UIDesignBrief

Done By : Majid Gudle - Akash Singh - Erik Bernard - Dylan Hormann

Task Allocation and Completion

Date

Ver.

Author

Addition/Alteration

21/03/2016

0.1

Majid Gudle

Assigned Sections 1.1, 1.2 ,1.3, 4, 5.0

21/03/2016

0.1

Majid Gudle

Started Sections 1.1, 1.2

21/03/2016

0.1

Akash Singh

Added to Section 1.1

21/03/2016

0.1

Erik Bernard

Assigned Section 3.1, 3.2, 5.3

21/03/2016

0.1

Erik Bernard

Started Section 3.1, 3.2

21/03/2016

0.1

Akash Singh

Assigned Sections 3.3, 3.4, 5.4

21/03/2016

0.1

Akash Singh

Started Sections 3.3, 3.4

21/03/2016

0.1

Dylan Hormann

Assigned Sections 5.1, 5.2

22/03/2016

0.1

Dylan Hormann

Started Sections 5.1, 5.2

22/03/2016

0.1

Majid Gudle

Completed Sections 1.1, 1.2

22/03/2016

0.1

Akash Singh

Started Section 5.4

22/03/2016

0.1

Erik Bernard

Started Section 5.3

30/03/2016

0.1

Akash Singh

Completed Sections 3.0, 3.3, 5.4

01/04/2016

0.1

Erik Bernard

Completed Sections 3.1, 3.2

01/04/2016

0.1

Akash Singh

Started Section 3.4

02/04/2016

0.1

Akash Singh

Assisted in Section 5.1

06/04/2016

0.1

Majid Gudle

Edited Section 3.3

07/04/2016

0.1

Erik Bernard

Edited Section 5.3

07/04/2016

0.1

Majid Gudle

Completed Section 5.0

08/04/2016

0.1

Erik Bernard

Completed Section 5.3

08/04/2016

0.1

Akash Singh

Edited Sections 3.0, 3.2

23/04/2016

0.2

Majid Gudle

Started Section 6.1

23/04/2016

0.2

Akash Singh

Started paper based prototypes for

interface

23/04/2016

0.2

Erik Bernard

Assisted in prototyping designs

25/04/2016

0.2

Majid Gudle

Started Section 6.2 (Interface design)

27/04/2016

0.2

Majid Gudle

Completed Section 6.1

02/05/2016

0.2

Majid Gudle

Completed 6.2 - Created and designed

all the Interfaces (Interface design).

03/05/2016

0.2

Akash Singh

Edited and completed Section 6.1

04/05/2016

0.2

Akash Singh

Started Section 6.3 Prototypes

05/05/2016

0.2

Akash Singh

Started and Completed Section 6.2 Visual

Design

05/05/2016

0.2

Dylan Hormann

Started and completed section 6 alpha

design

05/05/2016

0.2

Dylan Hormann

Worked on section 6.2

07/05/2016

0.2

Akash Singh

Finished Section 6.3 Prototypes

07/05/2016

0.2

Majid Gudle

Created and completed the Mockups for

the interface

08/05/2016

0.2

Majid Gudle

Written and completed the paper

prototypes information.

08/05/2016

0.2

Erik Bernard

Edited Section 6.1

Table of Contents
1. Introduction

1.1. Purpose of this Document

1.2. Scope of this document

2. Background

3. Target audience

3.1. Audience beliefs

3.2. Audience levels

3.3. Audience demographics

3.4. Audience expectations

4. Problem Statement

5. Goals

5.1. Usability Objectives

5.2. Single message

5.3. Mandatory elements

5.4. Deliverables

6. Alpha Design

6.1. Structural Design

6.2. Visual Design

6.3. Prototypes

7. Testing

7.1. Test Plan

7.2. Test Results

8. Final Design

1 Introduction
1.1 PurposeofthisDocument
This document will provide a profound overview of a Social Networking
forum that KnowledgeFlux has assigned us. Throughout the report a
descriptive and detailed breakdown regarding the target audience and their
beliefs, goals of the project, design and testing of the final product will
become clear. Our aim is to develop a social networking interface that will
allow KnowledgeFlux to be able to comfortably integrate in their enterprise
systems.

1.2 Scopeofthisdocument
This report will contain the main topics that were assigned. These topics
which are; Background, Target audience, Problem statement, Goals, Alpha
Design, Testing and the final design of the interface. These topics will
determine the outcome of the interface. Majority of the feedback from the
client with be the outside source, but this will not interfere during the process
of designing the interface.

2 Background
Our client, Knowledge Flux is an organization that deals with information in a
creative management manner. The organisation has previously developed
numerous enterprise wide systems which tend to manage the service and the
user activities. The key goal is to support an environment where users can
have large amount of discussion and were scrolling lists are not critical. We
have been asked by KnowledgeFlux to design a social network interface so
they can integrate the interface into their enterprise systems throughout the
organisation. This will allow their staff members to have work related
conversations which will become a beneficial way of executing their target
goals.

3 Target audience
It has been taken into account that KnowledgeFlux wants to incorporate a
social networking forum into their enterprise systems. As a result a thorough
review and analysis of KnowledgeFluxs website was undertaken to
determine the target audience for the project. It was deduced from
KnowledgeFluxs website that the target demographic for this product will be
young adolescents from age 18 to those in their mid 30s. KnowledgeFlux
specialises in information and knowledge technology and as a result their
clientele would have to be a mature demographic. It has also been assumed
that this demographic has some understanding of technology and
contemporary social networks for their ease of use. Along with reviewing the
website, surveys have also been found highlighting the target audience for
social networks such as this. These can be referred to in sections 3.2 and
3.3.

3.1 Audiencebeliefs
The audience currently believes that this product will be a social forum purely
for the employees of KnowledgeFlux. They are going to use this interface to
be able to communicate and discuss with each other about work related
topics. We need to avoid confusing our audience with what our intentions for
this design is supposed to be. We want to create a social network for
KnowledgeFlux employees to use while at work or even at home to
communicate with their fellow co-workers. We do however want to avoid this
social network we are building to be used in a similar way to Facebook where
people are going to fall off task using it.

3.2 Audiencelevels
Our primary audience would be the employees of Knowledge Flux who will
use it as a social app to communicate with each other. Our secondary level
of audience includes admin, system administrators and executive staff. Our
tertiary level may include other businesses and their employees who are
seeking to get in touch with Knowledge Flux. The tertiary level audience
would therefore use this as a means of communication between them and
members from KnowledgeFlux. In terms of expansion or consolidation, we
would prefer to consolidate our audience as this product is strictly design for
Knowledge Flux. If we ever chose to appeal to a new market, we would build
a new interface to another companys standards.

Table 1 : Details of each level of audience

Primary audience

Age group between 18- Early 30s

Secondary audience

Users (Staff admin)

Tertiary audience

Organisation (KnowledgeFlux)

3.3 Audiencedemographics
Age -
Young adolescents from age 18 to mid 30s
Sex -
Product is available to sexes, male and female
Education -
Primarily those in university, tafe, finished school or
some other form of education
Knowledge of technology -
a broad understanding of technology
and social forums should be known
Income -
Our application will not require tangible nor intangible
funds to operate. As a result there is no set income barrier in order to
use this app.
Occupation -
Entrepreneurs, businessmen and women, uni students
Location
Important Keywords
The criteria outlined above gives a specific overview of the target
demographic for the project for KnowledgeFlux. According to the Social
networking Fact Sheet that was conducted in January 2014 , the age group
that predominantly uses social media were between the ages of 18-29.
A table below will show those higher percentages from each category that
use social media.
Table 2 : Highest demographic percentage from the Social Networking Fact Sheet

Gender

Women -
76%

Age group

18-29 -
89%

Education

University -
78%

Salary

Less than $30,000 a year -

79%

3.4 Audienceexpectations
KnowledgeFlux wants a functional social networking forum which will allow
them to easily communicate and pass messages through to one another. A
network system that can compliantly be integrated in their enterprise

systems. Therefore in order for us to achieve this the usability of the platform
will be a key factor. We must create a clear platform which can be used
instinctively. A static layout is essential, this is because websites which have
an active layout consequently have scrolls. Scrolls potentially limit and
deprive the user from accessing the navigation bar, making usability very
inconvenient.

4 Problem Statement
The application that is to be designed is a new user interface that users can
experience a new feel of way of communication within another over a social
network. This new user interface will need to support in an environment
where large amount of conversation are acceptable.
Because of the social network enterprise are predominantly used by ages
from 18-29, some of the design constraints that will need to be taken into
consideration when designing the interface is; to create an interface that will
have longevity, by designing the application to look and feel futuristic.
There are three deadline dates set during the 13 - week period of designing
the interface. Those deadlines are the documentation (Week 5), alpha
testing (Week 9) and the final presentation of the design at (Week 13).

5 Goals
The goal is to produce a futuristic social networking interface where users
can have a large amount of conversation with no difficulties when
communicating with others. We are hoping that the interface will then be able
to expand throughout the enterprise, making it popular within the users for
years to come.

5.1 UsabilityObjectives
We wish to achieve a very practical and intuitive platform that will enable
users to be able to socialise within the KnowledgeFlux firm. We aim to make
the usability of the networking forum, very consistent, simple, accessible and
credible. In order to achieve such usability, the following design elements will
be considered, text, colour, images and layout. We will integrate a familiar
text font such as Sans Serif or Arial as these fonts can easily be identified.
This in turn will increase the legibility of the text. A basic colour palette
consisting of blue and white will be used to enhance readability and attract
attention. Blue conveys the connotation of loyalty, intelligence and wisdom.
Therefore making this our prime colour of choice will result in a professional
after product. Images will be used to further assist with the understanding

and identifiability of the network forum. We will incorporate the client's logo
so it can instinctively be perceived that this forum is related to
KnowledgeFlux. The layout of the website will remain static and simple. The
design elements mentioned above will be implemented to cater for the finest
experience for the demographic.

5.2 Singlemessage
The audience will see and be told that the product is Simply Intuitive which
will infer the main idea that the product is simple and easy to use. Simply
Intuitive is easy to remember and easy to add as a slogan to logos. Simply
Intuitive will convey the message that describes the core way in which all
elements of the user interface is designed as most clients will want an easy
to use system as this will save on training costs of the users that will be using
the system. Clients and customers will believe in what we say because of
previous work and projects and an in depth research and development stage
of a project will heavily rely on creating a simple and easy to use design for
users.

5.3 Mandatoryelements

Organisation logo and Icon Elements

Organisation address/phone number
User Names
User Addresses
User Information and Department
Search bar
Friend List
Personal Items - such as Notes
Messages
Facetime
Call button
Attachment Options
Sorting Options
Grouping and Group figurations
Social media icons (Gmail, Twitter etc)
Like and unlike button
Private button
Follow and unfollow button

5.4 Deliverables
Our aim by the final date is to have a functional networking forum that
satisfies the client's needs. A platform that can be integrated in
KnowledgeFluxs enterprise which will enable users to experience a social
environment allowing them to see and interact in social conversations. A
simple yet futuristic layout which is far from the conventional social forum
design. A basic colour palette of blue and white with legible font. It was taken
into consideration that a simple, uncluttered and consistent design makes for
a user friendly platform.

We will deliver the design briefs in three stages :

Stage 1 :
Research requirements , user research , defining the problem.
Stage 2 :
Will be the designing the interface using prototypes and mockups
Stage 3 :
Testing the interface design.

Right below is an extended description of what each stages will produce and
the outcome.

Deliverables

Stage One
(Documentation)

Stage Two
(Design)

Description

Outcome

The documentation will contain a

broad range of analysis that we
conducted for KnowledgeFlux. It will
deliver the user research and the
requirements needed to produce the
interface.

An in-depth user
research was
gathered to conduct
the design.

Requirements from
the client were
documented.

Produced a problem
description.
Target audiences
were identified.

Goals of the project.
Deliverables of the
project.

Also the target of the audience and

how the interface will integrate with
the users.

The design of the interface will be

conducted based on the analysis that
was researched and design decisions
applied respectively to the
prototypes.

A mock
up/prototype will be
designed.
The structure of the
layout and each
element will be
designed.
Flow diagrams of
how users interact
with the user
interface.

Final design will consist of testing the

interface and finalisation of the end
design of the interface.
Stage Three
(Testing)

Development of a
testing plan is
conducted.
Testing of the
interface will be
conducted.
A scheduled plan of
users testing the
interface will be
conducted.
Details of the design
summary will be
recorded and
provided.
Revisions and
recommendations for
the interface.

6 Alpha Design
Following the initial research phase the group discussed designs for the user
interface. Through rough sketches and a brainstorming tool we managed to
come up with an initial design and flow of the user interface and through
these initial designs we then created mockups of each page of the interface.
During the creation of the mockups we followed a decided upon colour
scheme and how we would use the colours for the design of the user
interface. Once a mockup of each page was created we could then see how
each page will flow to the next helping to keep a uniform user interface that
flowed well. This was then followed up with the prototyping phase where we
put into effect the improvements that were decided upon after the mockups
and details of the decisions were documented.

6.1 StructuralDesign
The group collaborated and discussed a few design tools that were needed
to help co-ordinate the implementation of the user interface. For the
structural design, the brainstorming tool allowed us to gather and synthesise
our ideas on how the interface should look and feel like. Paper prototype was
another tool used to help design the user interface. The paper based
prototype in our design brief application enabled us to be able to make quick
and easy changes whilst also enabling the client and us to get a rough
impression of what the design layout was going to look like. The paper based
prototypes also gave the group a visual approach on what needed to be
improved and what the flaws were.

6.2 VisualDesign
We decided to construct mockup sketches of possible designs for the
application. Through mockup sketches we were able to apply ideas and
techniques from our research phase and then implement this into a
completed design for the user interface. Some of these ideas and techniques
that were decided upon include visual effects, symbols and icons, colours
and screen designs.

Mockups

Design Tools
During the brainstorming stage, the group decided that all interfaces should
have a navigation button. This will allow the user to further access the
application. We believed that the application will then have enough room for
content and information to be stored and easily read instead of having all in
one layout. Before we designed the application, we believed that mockups
and paper prototypes will be the best option to have in order to structure the
interface.

Visual Elements
The group collaborated and brainstormed the following visual elements and
design for the user interface.
Font -
Arial, serif, sans - serif
Reasoning -
as mentioned earlier a familiar font is a font group that enables
users to be able to distinguish characters and letters quickly without strain.
(Arial, serif, sans - serif ) is an example of a familiar font. Therefore employing
this font will allow user to easily identify and read the content without
Text/Font Size -
range from 10 to 12 depending on headers, content
description
Reasoning -
the font size will range between these parameters outlined. This
is because the application will be used on a mobile interface, therefore the
content and size of headers will have to be readable in their respective areas.
Content will be a smaller font of 10, while headers will be a larger font of 12.
Furthermore the mobile interface will permit users to be able to use gestures
to zoom in or out if there happens to be difficulty in reading.
Letter Spacing -
normal
Reasoning -
normal spacing enables users to be able to easily read the
content. Too tight or to far makes it difficult for the user to interpret and read.

Colour Palette
The following colours that will be shown below is what will be used
throughout the interface. The colours is an important element when creating
an interface, making the interface appealing is an important aspect but
whats even more important is it guides users to their destination without
causing any confusion.

The images above are the chosen colours that will be used consistently
throughout the interface.

Icons/Symbols
Throughout the interface we used a variety of icons to make the navigations
for users less complex (user friendly). Having icons is an easier approach to
guide the user to their destination. We chose to use universal symbols which
coincided with their obvious actions.

Interfaces

Home
The home page remains very simple, displaying the client's
(KnowledgeFluxs) corporate image along with a
create account
and
log
into account
button. An
about us
button is also created for those who
want to know more about what the app entails. Because the interface is
exclusive to those only within the KnoweldgeFlux environment, we realised
that a login page was necessary to keep those outside the domain out.
Therefore this would only enable users from the KnowledgeFlux department
to be able to access the content. We thought about creating this simple
layout as it is very user friendly and intuitive.

Account - Login
The login page is similar to the home page in terms of its simple layout,
content, background and image. This page just ensures login details for
those trying to enter. A green widget is also displayed beside the password
box as a yes or no action command. Green denotes yes while a blank
widget denotes a no. We chose to add this simple widget in substitute of
adding a separate yes or no button. This is because it is a simple,
effective and space efficient widget.

Profile
This is a more personal page which highlights the individual's posts,
personality and updates. We tried to achieve the futuristic appeal by
minimising the amount of content here. This page will update users on their
notifications and like with the aid of a red circle. The red circle signifies an
unread notification. This page also features the delete post and create
post features as stipulated. The blue tabs indicate clickable buttons. The
user also has the option to view Older Posts by scrolling down.

Posts
After the user clicks on the Posts button, a layout of posts from other users
will be displayed. This layout is less complex and has a professional feel
when in use. The user has the option to like/dislike their posts and also have
the option to follow other users for more updates. The user is able to follow
and unfollow someone on this page by simply clicking on the on/off action
widget. Theres also a trending button on the right side, this will show the
user on what the trending topics are that's surfing on the internet.

Creating Group Conversation

In creating a new group we have implemented such features such as being
able to search select which users you want in the conversation and
privatising the conversation. These were stipulations that were
predetermined by the user and we have chosen to incorporate them on this
page. The done button is then selected to finalise the group.

Group Conversation
This is the main page where users are able to converse and share content
with their fellows, in an open or private environment (predetermined in the
previous page). Along the top of the conversation is a horizontal navigation
which allows the user to be able to input some sort of element to the
conversation. The keyboard will pop up on the screen as the user goes to
write a message. A swipe up gesture can also be used to call for the
keyboard. On the left hand side we have featured the name of the active
members in the current conversation. More users can be invited via the
horizontal navigation on top. Below this are additional elements, one of which

is a leave the group. A delete the group button is also featured, however this
command is only for the host of a conversation.

6.3 Prototypes
It was decided that the most ideal prototyping method for the initial design
would be a paper type prototype. This was a low fidelity approach, however
with no prior starting point this approach made it easier to construct a design
to the clients and our visions. This was a simple yet effective approach
which yielded a mock up model of the design and display off the application.
The prototyping phase was firstly conducted by constructing a basic
homepage mockup design. We decided on keeping the homepage simple by
only featuring the clients logo along with a create account and login
button. The application is only exclusive to people who work for
KnowledgeFlux, therefore we had to ensure a way to exclude those outside
the system. It was decided that KnowledgeFluxes image would be largely
centered on the top of the screen to entice users. The large image would also
bode well for identification purposes. The buttons are clearly displayed
underneath the image. This homepage layout is very simple and intuitive and
in turn conveys a smooth running and professional application. After
determining the layout for this page, we ensued with designing prototypes for
the other pages, which can be perceived below. It took a few iterations of
designing each of these layouts before we found a definite prototype design
for each page.
Once the design layouts of our pages were established we focussed on the
features and contents that were requisite based on the agreed stipulations.
The client requested a futuristic appeal; we took this into consideration by
ensuring the pages had a well-organised and immaculate feel. This would
accentuate the smooth transitions between pages. To achieve this futuristic
appearance we had to reduce the amount of content that was featured on
the pages and make sure unnecessary content was not displayed.
Once we established the modern layout we focused on how the users
wanted to like a post, create new threads, follow and unfollow others, delete
posts, privatise conversations along with other stipulations. This was an
extensive process because we had to determine the placement and location
of each feature. So when it came to populating the user interface with
widgets, buttons and content, our main aim was to focus on how user
friendly and futuristic the platform would look. If we added all these functions
on one page it would constitute for a cluttered and ineffective page and in
turn spoil the overall functionality and appearance of the design. We placed
these features on pages where they seemed relevant such as inviting a
newcomer to a conversation seemed ideal on the conversation page as
opposed to the home or account page. With trial and error on what seemed
to be appropriate, the group was able to determine the location of these
buttons, widgets and content.

It was found that instead of having a separate on and off button it would
be more convenient to have a single button, which could be clicked to turn
on and off. This would save space on the overall layout, as we would have
one button as opposed to two. It was little widgets and features like these
that the group made compromises on in order to maintain the futuristic
appeal for the interface.
The paper-based prototype served many advantages, however when it came
to deciding on a colour palette we were very restricted with our endeavours.
This was because unlike digital prototyping, we were not able to persistently
change the colour scheme on the design without re sketching the full design.
A digital based prototype would have allowed us to drop and fill colours to
our liking in half the time it would of taken to do so on paper.
Determining the colour palette was a significant process for the user
interface. We had to take into consideration the effect the colours would
induce, the contrast between dark and light colours and what impact these
colours would evoke upon users. As a collaborate effort by the group, we
decided on which colours complemented each other and which colours
created mass effect when juxtaposed. These colours can be referred to
above in the alpha design section.
The client requested for a white theme, so in agreement with their request we
chose to preserve the background white. This choice of having a
white
theme
is ingenious as a lot of dominating and prominent platforms utilise
this theme. Furthermore the white background enables a greater contrast
and distinction between other features on the interface. The colour chosen
for the title labels and icons were two shades of blue with RGB codes of (0,
0, 255) and (0, 0, 115). Blue was chosen because it is a familiar and quite a
universal colour for tabs and buttons. The header was decided to be black to
maintain a great contrast with the white themed background. Blue along with
shades white and black collectively pop and accentuate the features of the
application. Colours green and red with RGB values of (0, 255, 0) and (255, 0,
0) respectively were chosen for the action parts of the application. Green
denotes a positive response while red denotes a disagreement.
After conducting all these procedures and making slight alterations to each
aspect of the design, we decided to digitise our design. The digital prototype
allowed us to get a more enriched and detailed illustration of the user
interface. The program that was used to achieve this realistic model was
balsamiq. This mockup wireframe was used because it was an open
platform, which allowed us to digitise and replicate exactly what we had
illustrated in our paper prototypes. These digitised prototypes can be
referred to above in the alpha design section. The paper prototypes can be
seen right below.

Paper Prototype
Home

Page 1
Header
:
A welcome header is included.

Body
:
The enterprises logo/name and image. A Create and login button,

which will allow users to create an account or existing users to login into the
application.
Navigation Button
:
When user creates/logs in, the login account will

access them to enter their personal information.

Login Account

Page 2
Header
: The header Account will be used.
Body
: The title Log In Details is used. Username, Password and the
recommendation for the password to be remembered is displayed.
The logo and title of the enterprise is centered right below.
Navigation Button
:

The login button will access the user to their profile.

Profile

Page 3
Header :
A Profile header was used for this page.
Body:
An image was added in the profile to identify the user. The Create
Post section allows the user to write a post, also having the option to tag
another user by using the @ symbol.
An older posts icon is presented below, where users can view their
previous posts.
Navigation Button :
Clicking on the Posts button will guide them to view
the other posts that other users have posted.

Posts

Page 4
Header
: The title Posts is centred above the interface.

Body
: Posts that other users have posted are presented. The
recommendation to like/dislike their post or to follow/unfollow is optional for
the user.
Navigation Button
: A Create Group Conversation is placed at the bottom
of the interface, this will guide the user to create a group conversation.

Create Group Conversation

Page 5
Header
: The enterprises name/logo is centred largely at the top of the
interface.
Body
: The title Choose Group Members is shown. Theres a search/voice
input bar where users can search the users that he/she wishes to add.
An optional widget will be shown if the user wishes to make the conversation
private or not.
Navigation Button
:
A Done button will confirm the selection of users and
will then create the group conversation.

Group Conversation

Page 6
Header
: No Header/Title is used.
Body
: A large sum of the chat content is consumed for the group
conversation interface. On the left side, it will show the users that are active.
Above that is a toolbar, which consists of; Close, Add attachment, Add
image, Add users. Right below that will be a View Attachment , Video
chat and a Voice record option, also allowing the user to Leave Group if
he/she wishes too.
A Delete Group is displayed if the user wants to delete and erase the group
conversation.
Navigation Button
:

The user will then have the option to logout or to

navigate back to their previous destination.

7 Testing
7.1 TestPlan
Detail your testing plan for your design, following the approach outlined in the
module book and covered in the workshop. Pay specific attention to the
description of your method, your task list, and the data you will collect and
evaluate. Check the course site for links to an example test plan.

7.2 TestResultsandAnalysis
Provide a summary and analysis of your test results. Detail dates of tests,
participants, test results, and notes relating to the outcome. Include
quantitative and qualitative results as needed in summary form.

7.2.1 FindingsandRecommendations
Give your findings and/or recommendations for revisions to your design.

8 Final Design
Detail the revisions to your design based on the results of your user testing.
Final designs are to be electronic, and should be referred to by file name.
Include screen shots for clarity.