2505ICT User interface Design

Group 1 Nathan Semester 1, 2016

Jack Lawson
Daryl Nazareth
Muhammad Elias
Raeesah Joowalay

Task Allocation and Completion

Date

Ver.

Author

Addition/Alteration

25/03/16

Jack

Sections 1 - 5 - Gather information &

formulate responses for sections.

25/03/16

Muhammed Sections 1 - 5 - Research

26/03/16

Daryl

Sections 1 - 5 - Complete sections for

initial project commencement

27/03/16

Raeesah

Sections 1 - 5 - Research and proofread

document, and completed sections.

28/03/16

Muhammed Sections 1 - 5 - Completed sections and

added to group document

29/03/16

1.1

Daryl

Sections 1 - 5 - Update documents and

add parts

30/03/16

1.2

Jack

Sections 1 - 5 - Proofread completed

document

01/04/16

1.3

Raeesah

01/04/16

1.4

Muhammed Sections 1 - 5 - Proofread documents and

edit

06/04/16

1.5

Raeesah

01/05/16

1.6

Muhammed Section 6 and 6.2

01/05/16

1.6

Raeesah

Section 6.3 and 6.1

01/05/16

1.6

Jack

Section 6.1 and 6.2

05/05/16

1.7

Daryl

Feedback correction and edited section 6

05/06/16

1.8

Daryl

Feedback Correction Section 1 - 6

25/05/16

1.9

Raeesah

7.1 Test Plan complete

Sections 1 - 5 - Edited the whole

document, combined everyones ideas to
formulate final answer.

Added additional information, edited

sections, Finalized document, proofread
everything, ready to be submitted.

27/05/16

1.9

Jack

Digital Prototypes complete

01/06/16

1.9

Muhammed 7.2 Test Results and Analysis Summary

03/06/16

2.0

Raeesah,
Revised respective parts of the
Muhammed assignment and proof read each-others
, Jack
work.

05/06/16

2.1

Raeesah,
Final check and compiled
Muhammed
, Jack

1 Introduction
1.1

Purpose of this Document

This document will provide a complete in depth analysis and design

for a new social enterprise network that will be used by the client
Knowledge Flux. The porpoise of the document is to provide the
design process for a new user interface module that the company
would like to use on a ongoing basis. This document will prove the
prototype designs as well as the test plan and all relevant
documents to show how the functional requirements conversation,
people, content and dashboard) are met according to the design
criteria. There will be an array of different font styles and interfaces
that will become part of the final design.

1.2

Scope of this document

The scope of this document will cover a step by step process

explaining the background, target audience, problem statement,
goals, alpha designs and testing showing insight and progression of
the potential final design of the User Interface. A substantial amount
of design prototypes will cover the functional requirements which
have been provided by the client (Knowledge Flux) with insight into
the reasoning and methodology behind the final design.
The User interface will be designed based on the system suited to
the outline, however no software implementation will come into

play. The aim of this document is to provide the client with a

functional model that can be seen in real time use. The ideal
platform we will use this on will be web browser based and
optimized to work on mobiles as well.

2 Background
Knowledge Flux a Brisbane based organization that deals with
information that make highly visual, adaptable and gamified
workspaces and creative management of that information currently
do not have a social platform for their enterprise. Knowledge Flux
has developed a number of enterprise wide systems for managing
services and user activities. Their request is to integrate a social
network into their enterprise systems and have provided a scenario
document with the functional and non-functional requirements that
need to be introduced and added to their enterprise system. An
enterprise social network platform enables employees to better
engage, collaborate, and organize. This, in turn, enables them to
more easily capture, generate and integrate new information and
knowledge to deliver the best solutions and achieve the best results.
Such a platform also significantly increases an organizations speed
in providing guidance, feedback and recognition to enable its
employees to grow both personally and professionally. The end
results are reduced operating costs, improved talent acquisition and
retention, and increased competitive advantage.

3 Target audience
The target audience for this product are the various organizations
that will be buying and using Knowledge Fluxs enterprise software
as known as Knowledge Flux users (KFUs). Understanding our client
and their requirements for their social network which will be suitable
for their users is a key factor when distinguishing the target
audience and in doing so relating to their customers who are from a
government, education, engineering and mining workforce. We
conducted research by asking the current users of what
improvements they would like in the new system in comparison to
current system which happens to be yammer. The feedback was
noted via an online survey and we were able to come up with a very
in depth analysis of where the system can be improved.

3.1

Audience beliefs

KFUs currently use other types of social media platforms as a

5

communication tool from within the company. KFUs are looking into
having a communication platform that is built specifically to the
standards and level of expertise for their users who are within an
organization workforce. Therefore, ensuring that the user interface
is fairly self-explanatory but not of unnecessary simplicity and
provides an adequate level of customization capabilities. The
audience believe that there is a better system that can be
developed that can bring their out-dated communication tool into a
newer modern time period. The belief that we aim to deliver on will
bring about a new vibrant user interface that will not only amaze the
clients but will solidify the faith in newer technology through the use
of the new UI.

3.2

Audience levels

Our primary audience would be the Employees of Knowledge Flux as

they will be using the social application to communicate with one
another. Our secondary level of audience includes executive staff,
and system administrators. Our tertiary level audience includes
other businesses as well as their employees. As our client
specifically requested this user interface for their staff and
customers, we will be consolidating in our existing client. However,
if we were to appeal to a new market in the near future we would
design and build a completely new interface.

3.3

Audience demographics

Audience 1 - KFUs
Age: 20-50 (professionals with a technology based
background)
Sex: male and female
Education: Tertiary qualifications and higher
Knowledge of technology: Mid to high background
knowledge of technology
Income: middle-high
Occupation: Government, Education, Mining / Engineering,
I.T
Location: Australia
Important Keywords: Technology, Organisation and Future
Audience 2 Clients/Visitors/Older Managers/ Staff

Age: 20-50 (professionals with a non technology based

background)
Sex: male and female
Education: Tertiary qualifications and higher
Knowledge of technology: Low to mid background
knowledge of technology
Income: Low-high
Occupation: Government, Education, Mining / Engineering,
I.T, Development
Location: Australia
Important Keywords: Technology, Organisation, Future and
Development

3.4

Audience expectations

Based on the clients very specific requirements and on the user

research methods conducted, KFUs will be expecting a
professionally designed user interface that is easy to navigate, read
and type and has the look and feel of a real enterprise social
network that one would be happy to use. Hitting the full functional
requirements of the client and their audience is primarily based on
working systematically through impeccable time management,
structural designs and honest workflow practices. Implementing a
community strategy where employees can share ideas, find
answers, and collaborate on projects can have a tangible effect of
an organizations performance. Using this communication tool will
allow the employees productivity to increase as the staff can feel
like they have a collective voice and deeper involvement in
important internal initiatives.

4 Problem Statement
KnowledgeFlux would like to be able to keep up with the current
methods of communication within an organization also known as
Enterprise Social Networks (ESNs) They currently do not have a
system in place that will adapt and combine features such as
employee profiles, activity streams, micro blogging, discussion
forums, wikis and more in an effort to help employees collaborate.
ESNs support the tagging, rating and reviewing of content for
workplace use with the primary goals of better connecting members
of an organization and promoting knowledge sharing between
different employees and departments.
Constraints that may have effect on the project are ensuring that
the team designing the User Interface actually listen to the needs
7

and wants of the clients they are then able to provide a level of
expert advice to meet these requirements. Once there is a clear and
mutual understanding of these requests, it is essential to include a
time management plan that complies with the client and the
designers within a reasonable budget scheme too.

5 Goals
The goal is to address the requirements of the client Knowledge
Flux by designing a user interface that can be integrated into
their social network enterprise that maintains the white theme
which offers simplicity, user friendly navigation, is selfexplanatory and omits the cumbersome straits of conversation
through scrolling. With specific customization that will provide an
incomparable experience to the KFU through the tech savvy
facets that are delivered with rich technical aspects.

5.1

Usability Objectives

The level of usability to be achieved needs to be of a professional

and simple design. The Aim is to build a front-end portal for the ease
of usability for users however, maintaining a rich level of technical
aspects. The UI will focus on keeping the overall design consistent
with maintaining a high level of usability. Navigation and Visual
appeal will be focused on while the Interoperability and Performance
if not left to be compromised. The Navigation design is important as
it allows the user to work through the website with ease. It also
needs to be visually appealing as bad colouring and poor artwork
can disinterest a user. The design will also consider the accessibility
of the website to allow for it to be viewed on a types of screens. In
terms of Interoperability, the UI would want to be the same in any
browsers. This will be testing in the Prototyping testing phase.
Performance is largely about using the correct tools to make the
website work at its optimum. This will include using appropriate
sized images colour schemes and contrasting.

5.2

Single message

The single message that the audience must know is that with easy,
cleaver and well-managed designs, the sky is the limit. The aim is to
use simplicity and ease excels with effective communication to be at
the forefront of the program. Providing these advanced features will
allow the audience to decide for themselves if this product will work

for them or not. Once they have had a chance to test the functional
and technical aspects of the design, one will be able to make a
choice.

5.3

Mandatory elements

To maintain a level of professionalism and capture a tech savvy

social network it is vital that all aspects of user interface design is
considered. This includes providing a platform that has

A futuristic look and feel through page less views.

By omitting the scrolling function to provide a sleek and
user friendly vibe
To incorporate colours such as white and blue that give
off a professional feel that is inviting and professional.

Also taking into consideration the intellectual property from the

clients side and including the companys information within the
platform will also be measured in developing the perfect product.
This will include:

The clients Address

The logo (Pictured below)

5.4

Deliverables

Upon testing, and client approval for completion, our client will be
delivered a well thought and designed user interface that meets all
their requirements;

Blueprints
Personas
Stakeholder Interviews

Wireframes
Paper Prototype
Low Fidelity
High Fidelity

6 Alpha Design
Different tools such as paper prototyping, low fidelity prototyping
and high fidelity prototyping have been used in this design stage to
show how the design has progressed from an idea to a final product.
These prototype designs have been created around the
requirements of the client and based on the personas of the target
audience. the design tools that are used for the propose of building
this UI are wireframes, paper sketching and the designs were based
on the personas that were created. The personas were used to build
the program to be able to suit the wide audience levels
technological knowledge. The prototypes that are displayed below
are created keeping the audience in mind and working alongside the
different personas. The alpha design stage will highlight errors and
allow for improvements to be made towards the final design. The
goal and the usability objectives will continue to remain the same
and set as the backbone to the project.

6.1

Structural Design

The first design element introduced was the use of gestures, which
can be seen throughout the prototypes. Considering that its a
communication tool for the organization, a vast majority of
10

employees would like to be able to access their web based chats

and date on the go. This opens up the mobile application
optimization section of this project. The decision was made to use
gestures on a touchscreen to give better accessibility to hidden
items such as search bars and menus. When looking at the persona
of Rowan Peterson (Persona can be found in section 6.3), it is noted
that he is easily distracted by outdated software. In order to allow
users to embrace the full capacity of the application it is vital that it
has user-friendly navigation. This is achieved by eliminating clutter
on the screen and having several options, which some users may
find too distracting, and complicated, therefore hidden menus and
sidebars were introduced and implemented.
This keeps the main view free of distraction and allows users to
focus on the task at hand. The information from Rowan shows us
that most of the users are well versed in the use of technology.
When referring to the Peter Listers persona, modern user interfaces
can still confuse the older generation. The best way to avoid such
problems is by giving the users a compulsory manual they must at
least view. On the start-up of the application, after creating an
account, the application will take the user to the single view tips
page. This will start from the first tab and for the user to begin to
interact with the applications functionality; they must swipe through
all the tips until they reach the continue button. For those people
who may need a reminder on the not-so-obvious touchscreen
gestures, the tips pages can always be accessed through the
sidebar menu. For the first three times the app is used, a demo
function can be overlaid on the UI to help the user find what they
need and where to do. This will be in the form of small bubbles that
pop up when a button or a feature is pressed or requested.
The way in which conversations work is by posting a thread,
whether that is a question or remark into the project dashboard and
from there, people in the project have the ability to interact with the
conversation. The options that are available range from flagging,
liking, tagging, mentioning users and replying. Replying has the
added functionality of being able to attach documents, PDFs,
images and other information. The information will be presented in a
clear and straightforward approach. The aim of the new UI is to
allow the users to be able to find and use a particular function with
ease. The three time demo tutorial will also aid in helping the user
learn the features of the product. It can be switched on and off
based on their needs. All people within the project or conversation
can view this. They navigate through replies and conversations; the
team was troubled with the problem of avoiding endless lists of
replies. This was avoiding by putting a conversation post onto a
single page and navigating between them through left and right
arrows on the bottom of the screen. A simple left or right swipe or

11

the press of the left and right buttons will take the user to the next
reply. The swipe and button decision will be made based on the test
plan and the feedback received from it. The biggest benefit to using
a button is the affordance provided by it. Not only does the inclusion
of a button provide the visual representation of the ability to tap,
but it also provides an opportunity to convey what the functionality
is through iconography, text, or both. However, A button has a
single interaction and therefore typically a single function per
button. Any additional uses of a button like double tap or tap and
hold, could easily be hidden from the user. Therefore, unlike swiping,
where directions can have meaning, buttons dont have as many
options. Comparing this to a swipe function, it is a natural
interaction in particular for moving items around. It allows for direct
manipulation of the on screen objects. Swiping doesnt have to
clutter the interface like buttons do. This frees up space and allows
focusing the Users attention by leaving the interface clean and
readable.
The use of swiping between replies can be very useful, but for times
when the conversation becomes too large, or users need to find a
specific attachment quickly, the hidden search bar can be used to
search for tags, mentions, file names, conversation names and even
phrases from a reply. This search bar can be accessed from all
pages, except for the compose page. The hidden search bar can be
found by swiping from the top of the screen all the way to about the
halfway mark of the screen. This will create a drag down search bar
option where the user can type text and the UI will highlight it on
the screen. The reason the hidden search bar is used so that there
will be less clutter on the main screen. It only needs to be used
when its required and not needed to be on display the entire time.
There will be other options included in the drop down search bar
which will include looking for items from other conversations that
have been hash tagged.
The compose page is a simple interface with a large text field for the
main conversation and a search bar for adding a group of people
from a project or a single person. For added security, there is a
private mode integrated into the compose page. If the user places
their finger on the search bar and swipes it from right to left, the
screen background color will inverse indication the user is in a
private mode. The reason private mode is used is to allow privacy
for personal conversations. This usually will mean a one to one
conversation. Group conversations will be left on open for everyone
to view. For many people who work in offices or tight-knit
workplaces, privacy can sometimes be a big problem. For this
reason private mode was created with password and biometric
scanning (Finger print). This mode allows for an unlimited amount of
users to be added to the conversation, but it will not appear to
everyone as a normal team conversation would. Team conversations

12

and private conversations behave the exact same in regards to their

features, though the visibility and access to conversations in
different. This feature will be made to blend in with the normal
structure of the UI. Private mode will be displayed in a different color
when it is being used during a conversation.
User profiles were introduced to avoid confusion between team
members and to gain an insight into colleagues. The Rowan persona
mentioned a lack of teamwork and the Becky-Lee persona discusses
the difficulty in communication with distant team members. This can
be largely due to the inability to connect with the team members,
thus we have introduced profiles into the design. The profiles will
have a major focus on outlining professional information, but users
will have the ability to add personal information and hobbies to help
build a team spirit and increase conversation between team
members.
The ability to reply to conversations, like them, tag them and
mention people in them is useful, but without a main control panel
for receiving these notifications, the application would be practically
useless. This is where the dashboard is introduced. The dashboard is
a collection of all the information and activity relating the currently
logged in user profile. By pressing on a dashboard activity
notification, the application takes the user to the conversation to
display the activity. At the top of the screen below the title bar two
new options appear to either save or delete the dashboard
activity notification. The option to save and delete both takes the
user back to the dashboard. If the item was saved, then it appears
in the dashboard in a faded out manner, if it was deleted, it will
simply not appear. For dashboard activity notifications that a user
does not wish to view, the user can simple swipe the activity
notification from right to left and the options for save and delete
appear.
Conversations must also be able to be accessed a long time after
their main purpose was served, so the ability to both archive and
delete conversations will be implemented. These tools will help to
manage information and keep a record of project activity and
colleague commitment. To perform such a task, a simply long press
is used on the conversation and an action alert will appear to select
the option. This is again a space saving option and helps to attain
the greatest surface area for conversation navigation.

13

6.2

Visual Design

Sketch 1

14

There are 9 steps with brief explanations about the features and
functionalities that we wanted to incorporate into the prototypes
which aim at eliminating scrolling, and clutter of information.
1 Gestures 1 Swipe out menus from the Left to Right
side, these menus will provide all the information
needed for the user such as (settings, profiles, folders,
help tips, etc.).
2 Hidden Search Bar This will have a pull down
function whereby, the user will not have it pinned to
their home screen, however if they need to search
anything they are able to access it easily.
3 Gestures 2 Swipe out menus from Right to Left side,
these menus will provide an easy access for the chats,
and messages for users to access easily.
4 Imbedded Information Within the swipe menus
there will be imbedded information, which is categorised
through generic headings allowing user-friendly
navigation.
5 Flagged icons This Icon represents a flagged
message or post of importance, a bold and capital L
represents a Like on a post or message and lastly, to
inform a user of a replied post there will be a bold and
capital RP. This style with the bold capital can be read
with ease when skimming a chat conversation. The star
stands out allowing the user to understand that that
conversation is of some importance. The bold and
capital letter fonts only emphasise on its importance.
6 Menu Icon Bar Will be on the top for easy access,
there will be icons that are generically familiarised by
majority of people. (Messages, Folders, Starred,
Updates, Notifications, Add/Delete Users)
7 Features /Gestures Users will be able to #tag and
@mention other users (people that they communicate
with through the application)
8 Features /applications On the swipe menus there
will be generic headings (Profile, Folders, Tips & Help,
and Log out, Languages) each of those have subfolders
that include imbedded information.
9 Floating Banners When a user wants to reply a
message, a floating banner function is put in place so
that they may easily swipe through the messages and
reply, instead of scrolling and sometimes forgetting
what the reply to the received message was.

15

Sketch 2

This sketch shows the Menu bar at the top of the screen, which is
placed there for easy access and makes the application user
friendly. Underneath there is a search bar, which is pulled down for
quick and easy use, otherwise it will always remain hidden. This idea
came from analysing Apple and Samsungs application gestures and
functionality.
The main focus on this sketch is the Swipe menu Left Right, the
importance of this is to eliminate the use of scrolling. There are 6
main headings (Profile, Settings, Folders, Documents, Tips & Help
and Log Out). These headings have subheadings, which start to get
more specific to the user. For example Settings has indented sub
folders (App settings, Account Settings, Privacy and Notifications)

16

there are also icons next to these headings that are generically
familiar to majority of people. This idea to have imbedded
information was taken from Facebook as it allows users to easily
navigate through the application without the use of scrolling.
Sketch 3

This sketch shows the Menu bar that is pinned to the screen, and
this time there is no search bar as it was not needed/ pulled down.
The main focus of this sketch is the Swipe menu Right Left which
shows the user all their contacts, who is online, active, inactive and
what time they were last seen online. This helps the user to know
17

who is currently on the app. As the sketch shows examples of

different contact names and their availability status to chat or
message online. It also shows a group chat, which will have the
option of being renamed to the preferred task/group. At the bottom
there are 3 icons (Messages, Create Group, Status) this allows the
user too easily and directly message anyone in their contact list or
create a group chat and add different contacts as well as update
your availability status.
Sketch 4

This sketches main focus is to show how a user may easily navigate
and view/ reply messages. An arrow pointing to the menu bar
(Message Icon) if clicked opens up the users messages. There will be
a customization option for users on how many messages they would
like to have displayed on screen. The example shows four
messages, the first message has a
which is what the user has
noted as important and this message will always stay on the top. On
18

the right and left there is the option of the floating banner that
allows the user to swipe through their messages and eliminate
scrolling. At any time the user is able to use the swipe menus on the
Right and Left to either go into Settings or their online chats when a
user wants to reply a message, they select it and a reply section
pops up. The example shows the user wanting to reply to a contact.
The contact name appears on the top left with their mobile number,
on the right is the date and on the bottom right is the option to add
an attachment or add another person into the message and make it
a group message. Instead of the user scrolling the floating banner
function has been applied so that the user may reply each message
individually without having to scroll and look for the message, which
they may have forgotten.
Sketch 5

19

This sketches main focus is to show how a user may view and
navigate through their updated newsfeed. The newsfeed will show
the most relevant information associated with the user such as their
most popular contacts they communicate with. In this example it
shows a few comments that the users contacts have
uploaded/posted. The user is able to like, comment and share the
post if need be. It also shows that images can be posted and the
user has the option to save the image. When a user replies they are
able to #tag and @mention people in their posts. This idea is easily
identifiable with Facebook who offer a user-friendly newsfeed
allowing users to like, comment or share posts. However, as we are
trying to innovate we are implementing the swipe menu for
comments and the newsfeed too. This will eliminate the user from
scrolling through the entire newsfeed and allow the user to read
20

through a post and have the option to swipe Right or Left to move
onto the next few posts.
Sketch 6

Image 6 is the layout for how a single tip will appear for users.
Tips will be accessible via the hidden side menu and will be
displayed on the users first time opening and setting up the
applications.

21

Sketch 7

Image 7 shows the appearance of viewing a profile. Profiles feature

a photo and small dot points. Links are also given to take users to
see a more in-depth synopsis of information.

22

Wireframe 1

Wireframe 1 shows the home screen which has all relevant trending
posts and friends posts, shows the ability to make a post(can add
#tags and @mentions in any text box) and attach files(documents,
pdfs, images, etc.) to that post, also shows the ability to like a post
and reply to it.

23

Wireframe 2

Wireframe 2 shows the hidden search bar, available by swiping

down on any page to search that page alone for specific
information/people or on the home page to do a general search for
people and information in groups you are in.

24

Wireframe 3
This image shows the info page, swipe right to pull out this page
which has notifications, starred (favourite) messages, groups with a

showcase of the main groups you post in and the ability to leave
them, recent conversations with other users and settings.
Wireframe 4
25

This image shows the people page, swipe left to pull out this page. It
shows current friends and recommended friends and the ability to
search for anyone you like. People will be colour coded by the
faculty they are in.
Wireframe 5

26

This image shows the multi-level messages in a post and the ability
to reply directly to the OP or reply to a persons comment on the
original post, it also shows the group name above with the ability to
leave.
Note: multi-level messages are available on all posts not just in
groups
Wireframe 6
27

This image is the private message that works by clicking on a user

and choosing the private message option. In a private message you
have the ability to attach files and add other users to the private
message. The private message box will then change from blue to
grey to indicate that the message being sent is a private type and
the change in the visual colour allows the user to understand that.
28

The fonts and colour scheme are based on the personas that are
provided. The development of the UI was built around them. The
skill range of each of the users vary dramatically so there needed to
be a balance between very technical and simple yet elegant user
interfaces. The prototypes will follow in the next section.

6.3

Prototypes

There are three different methods of prototyping, they include paper

prototyping, low fidelity and high fidelity prototyping. In this design
brief all three prototyping approaches have been used to outline the
final product that the client will want to see. Personas have been
used as the main design tool for this project, as they helped to
develop a basic understanding of the user requirements for the
application. In order to decide on the different personas, the target
audience was a key factor as it set out some boundaries such as
age, technical knowledge and so forth.
The reason paper sketches have been chosen for the project is
because they give the ability to brainstorm and formulate ideas,
from there the paper sketch ideas are developed further and turned
into digitalized sketches. Digitalized sketches are used so they can
easily be sent to the client for viewing and feedback as to whether
or not they meet the necessary requirements and can easily be
altered if necessary. After the digitalized sketches are finalized the
next step is to create wireframes around the sketches to further
develop them into a more workable UI design.

Persona 1

29

Persona 2

30

Persona 3

31

Persona 4Persona 5

Persona 6

32

7 Testing
7.1

Test Plan

Evaluation and Testing

As a group we attempted to use Photoshop to portray our digital
prototypes, however we found it too difficult to provide extensive
prototypes and functionality. We then did some research on
prototyping tools and came across Proto.io which is a mobile
application tool that allows the user to create their design plan. We
signed up with the 30 day free trial and spent a few minutes
studying the functionality of the tool and the features it possessed.
Our team member Jack seemed to take extra interest in this tool and
therefore volunteered to create the prototypes from the design
sketches from Brief Stage 2. Our group also discussed over a
meeting about what functions and gestures we would keep and add
to our designs and ways to implement them.

Developing the test plan

- User Interface for Knowledge
Flux
1. Purpose and goals of the test
Identify obstacles (if any exist) when navigating through
the app and find where users struggle with navigation,
how long it takes the user to complete a task and if its
visually pleasing to the user.
2. Research Questions

33

 What obstacles do users encounter as they navigate

through the app, whether through a desktop or a mobile
device?
How do users feel about how long it takes them to
manoeuvre through the entire app and to reach their
desired function?
How does the user feel about the swipe gestures in
place of the scrolling
How do users feel about our app in regards to their
standards apps that they used was there any
similarities?
What were the positive and negative feedback from the
users
3. Participant characteristics
18+ 2 males 2 females, tech-savvy
and not. The user will have a general
idea as the prototype structure is
similar to apps on current devices.

Characteristics
Tech- Savvy
Not Tech Savvy
Total Number of
participants
Type
Female
Male
Age
20 30
31 - 40
Device
Mobile Device

Desired number of
participants
2
2
4
2
2
2
2
2

4. Method
Participants who have been selected will arrive at the
project room n44, level 0 Nathan campus at the
corresponding pre-determined times. They will enter
the room and be seated with the device preloaded

34

with the app. There will be a moderator and observer

to welcome them into the room and inform the user
about the rules (no speaking apart from the
moderator) and give a bit of an overview of this test
and evaluation.
The user will attempt the tasks in the respective
order of the task list presented in the test plan. The
moderator will read the first task and the user will
attempt it.
If the user is unsure or unable to complete the task
they have the option to abandon the task and move
on. The moderator will then explain to the user how
to successfully complete the task they were unable to
achieve. At the end of each task the user will give a
rating from 1 10.
Once all the participants had completed the tests,
the observer and moderator gathered all data and
reported back to the rest of the group.
5. Task List

35

TASK STATE
BENCHMARK
6. Tes
Create an account, make
7 taps
t
your way to the dashboard
Logging in, composing a
7 taps
message and sending it
Logging in and going into
3 taps
the likes and deleting the
first like
Logging in and going into
3 taps
tags and accessing the
first tag notification
Logging in and going into
mentions and accessing
3 taps
the first mentions
notification
Logging in and going into
3 taps
reply and accessing the
first reply notification
Logging in and composing
9 taps
and sending a private
message
Logging in and accessing
the conversation and liking
4 taps
the first conversation
Logging in and adding
6 taps
some tags to the first
conversation
Logging in and mentioning
6 taps
someone in the first
conversation
Logging in and adding an
attachment to the first
10 taps
conversation and view the
attachment
Logging in and visiting the
user profiles page and
accessing Jenny Longs
11 taps
profile, then opening her
profile image and
navigating her profile
Accessing settings and
3 taps
finding the language
Accessing the search bar
1 tap
from a dashboard page
environment, equipment, logistics
The first few test trials were done in the n44 building
level 0 project room between Jack, Muhammed and

36

Raeesah. We spent a couple of hours back and forth

testing different actions and functions of the prototype.
We were secluded from people so we could discuss our
findings, designs and ideas and the room was spacious
which provided a great work station
We utilised the white board in the project room to
generate ideas or jot down anything we thought of that
could potentially help us later and tried to work as a
team with a professional attitude and environment.
On the day of the tests for the participants we ensured
that the project room was available at the required
times. We ensured that we had the correct equipment to
complete the task (mobile phone) that was able to open
and work the prototype application.

7. Test moderator and observer role

The moderator and observer will sit in the project room
with the participant while conducting the session. The
moderator will introduce the session, conduct a short
background interview, and then introduce the test tasks
as appropriate. The observer will take note of the
participant and how they navigate and attempt each
task and note down their feedback and gather the data
(ratings from 1 10) on the tasks.

8. Data to be collected
To answer the question What obstacles do the users
encounter as they navigate through the app, whether
through a desktop or a mobile device?, We have
collected data for:
o Number of steps (taps, gestures & long holds) to
complete task
o Number of tasks completed with or without
assistance
o Usefulness of terms and labels
o The ease of transition and navigation

9. Reporting Results

37

 The test results will be communicated to the

development team once all participants have completed
the test.
As a group we will discuss the findings and
recommendations and implement them to the new and
revised prototype ensuring that we have included all the
feedback from the
participants.

7.2

Date

Task 1:
30/04/
16
30/04/
16
31/04/
16
31/04/
16

Task 2:
30/04/

Test Results and Analysis

Particip
ant

Participa
nt
Info(age,
occupati
on)

Benchma
rk
(taps/swi
pes/
Long
holds)

Participan
t
Result
(taps/swi
pes/
Long
holds)N
Create an account and make your way to the
Yaseen 30, IT
7
Ahmed help
George 34,
7
Lin
Program 7
mer
Janice
48,
7
Graham Financial
Advisor
Ashleig 23,
7
h Doyle Governm
ent
Receptio
nist
Log in, compose a message and send it.
Yaseen 30, IT
7

Particip Observer
ant
Notes
Rankin
g
(usabilit
y
1-10)
dashboard.
10
10
10

Worked
as it
should
for all
participa
nts.

10

10

Participa

38

16
30/04/
16

Ahmed
George
Lin

31/04/
16

Janice
Graham

31/04/
16

Ashleig
h
Doyle

Task 3:
30/04/
16
30/04/
16

Log in, go
Yaseen
Ahmed
George
Lin

31/04/
16

Janice
Graham

31/04/
16

Ashleig
h
Doyle

Task 4:
30/04/
16
30/04/
16

Log in, go
Yaseen
Ahmed
George
Lin

31/04/
16

Janice
Graham

31/04/
16

Ashleig
h
Doyle

Task 5: Log in, go

notification.
30/04/ Yaseen
16
Ahmed
30/04/ George
16
Lin
31/04/

Janice

help
nts
understo
34,
7
10
od the
Program 7
compose
mer
icon and
48,
7
10
complet
Financial
ed the
Advisor
task
23,
7
10
right.
Governm
ent
Receptio
nist
to the likes section and delete a like.
30, IT
3
9
Some
help
participa
nts did
34,
3
9
3
not read
Program
the tips
mer
and
48,
6
6
know
Financial
how to
Advisor
swipe to
23,
3
10
delete.
Governm
ent
Receptio
nist
to the tags page and access the first notification.
30, IT
3
10
All
help
participa
nts
34,
3
10
found
Program 3
this
mer
simple to
48,
3
10
do.
Financial
Advisor
23,
3
10
Governm
ent
Receptio
nist
to the mentions page and access the first mention
30, IT
help
34,
Program
mer
48,

10

10

10

All
participa
nts
found
this
simple to
39

16

Graham Financial
Advisor
31/04/ Ashleig 23,
4
10
16
h
Governm
Doyle
ent
Receptio
nist
Task 6: Log in, go to the reply page and access the first reply
notification.
30/04/ Yaseen 30, IT
4
10
16
Ahmed help
4
30/04/ George 34,
4
10
16
Lin
Program
mer
31/04/ Janice
48,
4
10
16
Graham Financial
Advisor
31/04/ Ashleig 23,
4
10
16
h
Governm
Doyle
ent
Receptio
nist
Task 7: Log in, Compose and send a private message.
30/04/ Yaseen 30, IT
9
8
16
Ahmed help

9
30/04/
16
31/04/
16
31/04/
16

George
Lin

34,
Program
mer
Janice
48,
Graham Financial
Advisor
Ashleig 23,
h
Governm
Doyle
ent
Receptio
nist

Failed

Failed

10

do.

Very
similar
to
previous
task so
all
participa
nts
found it
easy.

This
participa
nt read
the tips
and was
able to
complet
e the
task.
Unable
to find
private
message
.

Participa
nt has
uses
similar
interface
s before
but
made a
mistake.
Task 8: Log in, access he conversations and like the first conversation.
40

30/04/
16
30/04/
16
31/04/
16

31/04/
16

Yaseen
Ahmed
George
Lin

30, IT
help
34,
Program
mer
Janice
48,
Graham Financial
Advisor

10

10

4
Took a
little
while to
find the
slide out
menu.

Ashleig
h
Doyle

23,
4
10
Governm
ent
Receptio
nist
Task 9: Log in, add tags to the first conversation.
30/04/ Yaseen 30, IT
6
10
Participa
16
Ahmed help
nts
6
found
30/04/ George 34,
6
10
this
16
Lin
Program
similar
mer
to other
31/04/ Janice
48,
6
10
apps and
16
Graham Financial
easy to
Advisor
do.
31/04/ Ashleig 23,
6
10
16
h
Governm
Doyle
ent
Receptio
nist
Task 10: Log in, mention someone in the first conversation.
30/04/ Yaseen 30, IT
6
10
Participa
16
Ahmed help
nts
6
found
30/04/ George 34,
6
10
this
16
Lin
Program
similar
mer
to the
31/04/ Janice
48,
6
10
previous
16
Graham Financial
task and
Advisor
simple to
31/04/ Ashleig 23,
6
10
do
16
h
Governm
Doyle
ent
Receptio
nist
Task 11: Log in, add an attachment to the first conversation and view
the attachment.
30/04/ Yaseen 30, IT
Failed
1
Most
16
Ahmed help
participa
41

30/04/
16

George
Lin

34,
10
10
9
nts
Program
Did not
mer
read the
tips and
31/04/ Janice
48,
Failed
1
Couldnt
16
Graham Financial
find how
Advisor
to
31/04/ Ashleig 23,
Failed
1
attach.
16
h
Governm
Doyle
ent
Receptio
nist
Task 12: Log in, navigate to the profile and access Jenny Longs profile
then navigate through her profile and open her profile picture.
30/04/ Yaseen 30, IT
11
10
Participa
16
Ahmed help
nts
11
found it
30/04/ George 34,
11
10
very
16
Lin
Program
similar
mer
to other
31/04/ Janice
48,
11
10
apps,
16
Graham Financial
very
Advisor
easy.
31/04/ Ashleig 23,
11
10
16
h
Governm
Doyle
ent
Receptio
nist
Task 13: Log in, access the setting and find the languages.
30/04/ Yaseen 30, IT
5
10
Simple
16
Ahmed help
to find
5
for all
30/04/ George 34,
5
10
participa
16
Lin
Program
nts.
mer
31/04/ Janice
48,
5
10
16
Graham Financial
Advisor
31/04/ Ashleig 23,
5
10
16
h
Governm
Doyle
ent
Receptio
nist
Task 14: Log in, access the search bar on the dashboard.
30/04/ Yaseen 30, IT
3
9
Participa
16
Ahmed help
nts knew
3
how to
30/04/ George 34,
3
9
find the
16
Lin
Program
search
mer
bar due
31/04/ Janice
48,
3
8
to it
16
Graham Financial
42

31/04/
16

Ashleig
h
Doyle

Advisor
23,
Governm
ent
Receptio
nist

10

being
similar
to the
standard
iphone
search
bar

7.2.1 Findings and Recommendations

Group Findings
1 When clicked on mentions page and tags page it gets stuck on
those pages and becomes difficult to navigate from there. The
replies page would not come up when clicked. There were some
noticeable spelling errors, and the swipe out menu had a few
glitches.
2 The like and tags page does not allow you to view what people
liked or tagged you in.
3 Also noticed we were unable to change settings as there was not
settings options added.
Participant findings
1 There was a problem navigating between a few conversations
2 Adding an attachment is not easily done without the user having
viewed the tips overlays
3 When on the conversations page or click on attachments it
takes too long to get back to the dashboard as there are too many
navigational buttons.
4 In addition to the tips page an overlay will be added for first time
users
5 - We added a tag icon as users were unable to easily source out
the tag functions
Recommendations
After all participants were attempted the tasks, the moderator and
observer gathered all data and brought it to the development team
43

(group) where we had a meeting and analysed the results to see all
the positive and negative feedback as well as the ratings for each
task by all the participants. We revised our designs and
implemented the changes to improve our final design.

8 Final Design
The opening, Login page (Figure 1) is a simplistically designed
page which hosts the first impression for the application. When
users interacted with the login page, they found it simple and easy
to use the navigational buttons and understood text field
placeholder prompts. After having no problems with the user testing
on the login page, it was decided that it would not change. This also
reflects on the Create an Account (Figure 2) page. The page was
easy to navigate by users and no problems have arisen with the
design. For this reason, the page has not been altered.
The Tips page (Figure 3) was similarly left unaltered. The design of
the tips page, while relying on users having technical knowledge, all
test subjects understood the page controller, which also implied
swipe gesture functionality. While not all the test subjects
discovered the swipe functionality on the test page, we found it was
something that was well implemented and no revisions were made
to that decision.
When users were faced with the dashboard (Figure 4), they
understood how to use the tab bar for navigation. The use of the
hamburger button on the top left helped users discover the hidden
sidebar menu (Figure 5) We found some users did not discover the
swipe gesture to reveal the hidden menu, so for users who are using
the application for the first time, a pop-up will appear outlining this
(Figure 6). The pop up will be short and will require the user to
perform the gesture before it disappears. This will ensure the user
understands how to perform the action. These overlays have been
implemented throughout the application and will be detailed in the
corresponding sections.
When initial testing by the team was attempted, it was discovered
that none of the likes, tags, mentions or replies had real
functionality. While it showed how they would appear, there was no
way to see or test the navigation and how the notifications would be

44

accessed. To fix this, the first notification on each respective page

had functionality imbedded into them to give the ability to view the
content in the notification (Figure 7). With regards to the ability to
delete a notification (Figure 8) some users, after reading the tips
page, were still unable to delete the like on the first page. To
better the understanding of this gesture based feature, a UI overlay
was added explaining the swipe functions (Figure 9). In original
group testing, there were some problems with segueing between
the tabs as there was missing navigational items. In the team based
test review, this was fixed, and all navigation items took users to
their correct, equivalent destination. The tests found that users were
able to identify the compose button and understood the
connotations of the icon. The overall visual design of the dashboard
was left unchanged in revisions of the prototype.
When faced with the compose page users understood how to
compose a standard conversation and send it, though when
confronted with composing a private message (Figure 10), half of
the users failed to find the private button and more then half were
unable to revert from composing a private message, back to
composing a conversation. Again, this was where the team decided
a UI overlay for first time users must be added. This will be shown
for both changing to private and reverting to a standard
conversation. Apart from this, users were able to send the message
preloaded. No further action was made towards this page.
Navigating to the conversations page was seen to be simple by
users and liking, tagging and mentioning actions were
performed with ease by the users. When users were asked to attach
a document to a conversation, many struggled. While this is covered
on the tips page, users overlooked the information and a UI overlay
has been added to assist in doing so. The downfall to the design
segues relates highly to the navigational path of returning to the
home screen. Users found there were to many navigational clicks to
get to the home page from some locations and this proved time
consuming. To rectify this problem, a button has been added to the
top right hand corner of pages which are deeply embedded (Figure
11). This will take users back to the dashboard, limiting excessive,
unnecessary navigation for the user.
When navigating the profiles page (Figure 12), users had no
trouble understanding the navigational items. A UI overlay has been
added to users profiles to secure the users knowledge in accessing
embedded details about a corresponding profile. Users understood
how to access the profile and expand information. No changes were
made to any visual aspects of the page.
45

In the original design, a settings page (Figure 13) had not been
included due to the lack of functionality it would provide. After group
discussions took place, the decision to add a settings page to purely
mimic the appearance was made. This page was simple and straight
forward. No users had trouble finding this page and the users
provided no comments, therefore this page was unchanged.

Figure 1.

46

Figure 2

47

Figure 3.
48

Figure 4.

49

Figure 5

50

Figure 6

51

52

Figure 7

53

Figure 8
Figure 9

54

55

figure 10

56

figure 11
figure 12

57

58

figure 13

59

60