2505ICT User

Interface Design
Design Brief
Stage Two Submission
Due Date: 08/05/2015
Gold Coast Lecturer: Dr Wee Lum Tan
Team Members:
Aiden Waring - s2946155
Lorenzo Lim - s2902632
Joe Chang - s2945351
Matthew Oj - s2954932

Task Allocation and Completion

Date

Ver.

Author

Addition/Alteration

16/03/15

-0.0

Aiden, Lorenzo, Joe, Research layout fundamentals

Matthew
and design principles from
lectures and external learning
sources

16/03/15

0.0

Aiden, Lorenzo, Joe, Discuss thoughts on application

Matthew
scope and goals

16/03/15

0.1

Joe

Devise introduction of document

16/03/15

0.1

Matthew

Begin practising writing the

target audience section, prepare
target audience research

17/03/15

0.1

Lorenzo

Devise rough draft of target

audience section

17/03/15

0.1

Joe

Devise rough draft of problem

statement section

17/03/15

0.1

Aiden

Devise rough draft of the goals

section

23/03/15

0.2

Aiden, Lorenzo, Joe, Collaborate in workshop and

Matthew
compile thoughts to begin writing
and editing the document

28/03/15

0.2

Aiden, Lorenzo, Joe, Write and edit a group word

Matthew
document of the design brief

30/03/15

0.3

Aiden, Lorenzo, Joe, Polish design brief in workshop

Matthew
and provide final thoughts

01/04/15

1.0

Aiden, Lorenzo, Joe, Make final adjustments.

Matthew

02/04/15

1.0

Aiden, Lorenzo, Joe, Submit user design brief 1.

Matthew

Part One

Part Two

27/04/15

1.0

Aiden, Lorenzo, Joe, Discuss what errors were made

Matthew
in the last submission and how
we should fix them

27/04/15

2.0

Aiden, Lorenzo, Joe, Assess requirements for part

Matthew
two

30/04/15

2.0

Aiden, Lorenzo, Joe, Begin research and planning for

Matthew
respective sections of the
document

01/05/15

2.0

Aiden, Lorenzo, Joe, Assign parts and discuss

Matthew
content

01/05/15

2.0

Aiden

Assigned to section 6.1

01/05/15

2.0

Lorenzo

Assigned to section 6.2

01/05/15

2.0

Matthew

Assigned to section 6.2

01/05/15

2.0

Joe

Assigned to section 6.3

03/05/15

2.0

Aiden

Complete section 6.1

05/05/15

2.1

Matthew

Complete section 6.2

05/05/15

2.2

Matthew

Edit, format and fix all of the

errors from version 1

06/05/15

2.2

Lorenzo

Edit and make contributions to

section 6.2

07/05/15

2.2

Joe

Complete section 6.3

07/05/15

2.2

Aiden

Edit and made contributions to

section 6.3

08/05/15

2.2b

Aiden, Lorenzo, Joe, Make final adjustments

Matthew

08/05/15

3.0

Aiden, Lorenzo, Joe, Submit user design brief 2

Matthew

Table of Contents
1.
Introduction..................................................................................................5
1.1.
Purpose of this
Document.......................................................................... 5
1.2.
Scope of this
document.............................................................................. 5
2.
Background................................................................................................ 6

3.
Target
audience..........................................................................................7
3.1.
Audience
beliefs.........................................................................................7
3.2.
Audience
levels...........................................................................................8
3.3.
Audience
demographics.............................................................................8
3.4.
Audience
expectations...............................................................................8
4.
Problem
Statement.................................................................................. 10
5.
Goals........................................................................................................11
5.1.
Usability
Objectives................................................................................. 11
5.2.
Single
message...................................................................................... 11
5.3.
Mandatory
elements............................................................................... 12
5.4.
Deliverables.............................................................................................12
6.
Alpha
Design...........................................................................................13
6.1.
Structural
Design.................................................................................... 13
6.2.
Visual
Design..........................................................................................13
6.3.
Prototypes................................................................................................ ?

Introduction
Purpose
The purpose of this user design brief is to inform the client on the many decisions
and processes made throughout the construction of the application. Providing
information such as this is very important, as it gives insight into the research,
time and effort undergone to create the best application and project possible.

Scope
The content of the user design brief covers extensive details and more
importantly both the thought processes behind each phase of the application's
development.
The following documentation covers seven different stages of development.
These stages are:

Background - The problem being addressed and how much value it

holds to the client.
Target audience - Addressing the audience, researching standard
customer expectations and beliefs, audiences level such as age and
level of education, demographics about the audience, and what's
expected to satisfy the audience.
Problem statements - Discusses the issue and or limitations that may
occur throughout the course of the design phase
Goals - What the development team aims to achieve whilst undergoing
the development process such as user friendliness, the 'take-away
message' and mandatory elements delivered on completion.

Alpha Design - A brief run through on the process and tools used when
designing the application's structural and visual design.
Testing - Testing, considering test data and implementing final changes
from user testing feedback
Final Design - Documenting the delivery of the final product.

2. Background
The client of this project is the Queensland Police Department. The QPD has requested
an application to be made which educates children and adults on how to protect
themselves from cybercrime.
The QPD has also requested that the development team associate the application with
the 'Fiscal the Fraud Fighting Ferret' character. This character and the media associated
with it encourages children to take on the responsibility of being Fiscal's deputies.
Fiscal upholds 5 Tips to Help Protect Your Identity and they are as follows:
1.
2.
3.
4.
5.

Limit the amount of information you post online. Never post your full name and
your date of birth.
Make sure you update your antivirus software.
Never give out personal details to anyone who calls you on the telephone or
sends you an email or text. Talk to your parents first.
Change your password regularly and never use your date of birth or anything
too obvious - never give out your password to your friends.
Shred documents containing your personal information - never just put them in
the bin.

The underlying problem associated with the scope and goals of this application remains
with the fact that a younger audience may not be able to read the content in the app, or
the young user may not use anti-virus software. A way to resolve this is target both
children and adults. The user interface for this app will change based on the age of the
user to ensure that every age group are able to understand and enjoy learning the
content of this project. Also, this project is being designed to create a interactive way to
educate children and adults on protecting their identity through the use of clever design
techniques.

3. Target audience
The target audience of this product are children from Grades 1 through 12. Given the
wide age group, each version of the product will have various requirements. For
instance, a child in grade one will not be able to read content that a grade 12 user would
be fluent and proficient in. Therefore, the design of the product is vital for success
across the various age of students. In addition to the children in discussion, the parents
will also be targeted for this product as they have a great influence on their children.
Furthermore, the contents of this product will also benefit adult users. After conducting
an interview on the primary target audience, that of the children, it was found that they
want to enjoy the application thoroughly.

3.1. Audience beliefs

After undergoing extensive research on the Google Play store for similar applications, it
was found that successful applications with high user retention were those that
implement educational elements through interactive gameplay elements.
Typically within the industry, applications with little to no interactivity, large amounts of
text and no fluidity do poorly in getting the target audience interested in the purpose of
the app.
These are important things to consider the application which is to be developed. To
cater for the possibility that certain users will be disinterested due to a lack of
interactivity and understanding, there will be an appropriate use of language in the
product. Children from Grades 1 through 3 wont understand as many words as
someone from grade 12 might know. Therefore, complicated words shall be avoided to
keep the simplicity of the product and additionally make the content easily
understandable. Explicit language and profanity will also be avoided from the product to

better accommodate the younger audience. The product will also avoid any type of
language that may or may not discriminate some of the users, as the application intends
to be universal and enjoyed by all within the target audience.

3.2. Audience levels

The primary, secondary and tertiary level audiences for the application are children,
adults and pensioners respectively. As discussed previously, the children are being
considered the primary focus group in the target audience. This is due to all of the preexisting artwork and content supplied by the client is relevant to children. However, as
the application will support alternate language packages, families with parents and
pensioners will also be able to benefit, as these two groups were found that they could
also benefit from anti-crime information. Adults and pensioners may also not have a
good understanding of how to protect themselves using anti-virus and such elements,
so catering towards these larger audiences is also beneficial.

3.3. Audience demographics

The details age and education have been discussed previously within this document
and have been deemed relevant by the development team.
After much consideration, it was deemed that no greater detail for additional attributes
affiliated with the target demographic required. Beyond the age, education and
knowledge of technology of the already discussed target audience, details such as the
income, occupation and location of the audience is deemed irrelevant due to the
universal nature of the application.

3.4. Audience expectations

The audience expectations of the project are crucial to the development of the app so
that there is a better understanding on what needs to be included or excluded from the
app to satisfy the users. The users would like a functioning user interface that does not
'require them to think', is pleasing to use and conforms to standard application
standards as to not confuse the user. Due to the primary audience being young, this is
especially important.

4. Problem Statement
The major problem that pose a threat to the development of the application is that which
has been discussed previously: the barrier or entry to the application.
The 'barrier to entry' depicts the user's inability to use the application to its full extent
due to a lack of understanding on how the application works.
To solve this issue, the development team aims to implement various language level
packages which either increase or decrease the difficulty of the language used in the
app. This in turn allows a larger number of younger users to enjoy the application with
ease.
Other problem elements that have arisen during discussion are a lack of a larger budget
for the application. Although the client did not specify a budget target, the application
may potentially be limited by the funding that the development team can contribute
personally.
A potential lack of resources and time to conduct research has also been considered.
This particular issue can be resolved through careful planning and management
beforehand, keeping a realistic view of what can and cannot be accomplished within the
time frame given.

5. Goals
The most important goals that were set earlier in the document were to provide the best
user experience for both children and adults and create an interactive, enjoyable user
interface which educates users in Fiscal's 5 Tips.

5.1. Usability Objectives

The development team behind the application is striving to have a high, open level of
usability. Measuring the success of an application's usability can be established through
target audience research via the internet and, additionally, through hands-on testing
with a member of the target audience.
Utilizing the theory found on user experience and how the target audience in question
responds to specific user interfaces, the level of success will be measured by the
enjoyment of the user.

5.2. Single message

After using the application built for the project, the audience should walk away from the
experience with the knowledge of the five protection steps they should take to keep
cyber crime under control. Additionally, through fun and interactive experiences in the
application, the user should also remember that they have been tasked to defend others
from cybercrime and uphold safe internet regulations.

The user should believe in what the application is telling them as it is told from the
perspective of Fiscal the Ferret, an authority figure associated with the Queensland
Police Department.

5.3. Mandatory elements

Like many applications, this product will contain many mandatory elements which are
crucial to the understanding and enjoyment of the content.
Organizational relevant elements such as the QPD's logo, phone number and most
importantly the Fiscal the Ferret artwork and visual elements that have been requested
to be required in the application. Designed specifically for the user however are design
elements such as the main logo of the app placed in the center or the top left of the
screen, which clearly presents to the audience what the application is.
This feature is common throughout many modern applications. It is important to
maintain consistency with standard application and web conventions, so elements such
as this are considered mandatory. Other elements include buttons to navigate the
application, the purpose of the application and entertainment to increase user retention.

5.4. Deliverables
Delivered to the client on completion will be a complete, polished interactive user
interface which teaches the target audience of the dangers of cybercrime. The user
design brief will also be sent to the client to demonstrate an understanding of the target
audience, content and to demonstrate proof of research. Design elements which help
teach the audience about the dangers and encourage user to practice safe use of
technology will be interactive games, engaging sound and visuals.

6.0. Alpha design

The alpha design phase consists of the structural design, visual design and prototypes.
The tools used for the structural design of this application consists of a detailed analysis
on the decisions made for the design. The tools used for the visual design stage
includes the creative process of making sketches, wireframes and mockups of each
user interface of the application and a detailed description of all the design elements
considered while designing the aspects of the user interfaces. The tools used for
prototyping include Paint.Net and Codiqua, whilst the other sections involved
Photoshop.
These multiple tools were used to create the foundations of the application. The key
findings from this section were the multiple design fundamentals that were necessary to
implement into the design and the practicality of the different design tools.

6.1. Structural Design

The developing applications structure is a matter of great importance. Good application
structure is integral to the users experience, as it shapes the way the user navigates
and experiences the applications content. Given the circumstances of the target
audiences young age and the levels of easy accessibility targeted for the project, the
application will be structured in a simple way. In order to appeal to these two goals, the
applications structure must be minimalistic. After thorough consideration between the
development team, a recurring comment was made that the pages structure must be
simplistic. By taking the theories and design principles learned from analysing industry

examples of application layout and content from lectures, it became evident to stick to
Big picture design principles and standard web conventions. The result of this research
was that a solid effective format was discovered. The application shall contain a variety
of pages (l1), headings (l2) and content (l3). Each design element has been provided
with a unique identifier. The applications premise is to act as an interactive experience
which engages the audience with a variety of games and quizzes to educate and
highlight Fiscals five tips to help protect your identity. Each page will utilise a minimum
amount of buttons and interactive options to keep the easy of use low for the audience.
This design option is consistent with the Dividing Content Design Pyramid. This
pyramid showcases that the main points of the application must be highlighted and
apparent when first opening the application or the current page, whilst supporting
information and less important information be placed and represented in less intrusive
ways.
The main page and activity pages (l1) shall include a large heading (l2) written in basic
English at the top of the page to draw attention to the content. In addition, the content
(l3) shall be presented in a simple list structure. The reasons for these design decisions
are that by presenting the headings (l1) and content (l2) in large, consistent ways is to
ensure that the users are engaged in the content appropriate to the scenario and that
the users dont have to think. The primary way of navigating throughout the app is
through the use of various buttons to swap between the different activities. By creating
the layout like this, the application succeeds in hiding irrelevant information (in this case
the later tips the children have not learned about yet) and only presenting them with the
beginning headings (l1) and the first Fiscal tip, simplifying the layout.

6.2. Visual Design

Sketches & Wireframes

During the planning of the app, the basic design principles were kept in mind. Since this
app was mainly targeted at children, the text was kept simple and large so that it could
be easily read and also understandable. Single words were used as links so that the
user would understand that clicking that link would go to their desired page and
because it is a single word, it is kept simplistic and easy to understand where that link
would go to. The game link would go to the game page and the quiz link would start a
quiz that the user can start. Another basic design principle that was kept in mind was
the colour. A light blue colour is going to be used as the background because it looks
visually appealing and is a much calmer colour and not too bright so that it doesnt
distract the user from the content. The colour of the background also matches the
images that were provided for the app. The blue sky background of the image blends in
well with the already existing colour. The two main colours were used was light blue and
green. It was decided that there shouldnt be too much colour on one page and that all
the pages should be consistent with the colour scheme. The prototype for the app will
not have sound but when it is fully developed, there will be in game sounds for the user
and also interactive sounds when a button is pressed. By having sound on buttons, the
app becomes much more interactive and enjoyable for the user. When the age screen
appears, the app will ask the user for their age vocally so that even if the user cant read
as well, they understand what the instruction is. Also, every time a question is asked in
the quiz, a clear voice will say the question and it will be multiple choice so that the user
can just guess if they dont know. When an option is selected, a voice will say the option
and if the user wants to select it as their answer, they click on the continue button
instead of the answer being a link that directly takes them to the next question. The
layout of the app will be as simplistic as possible to avoid cluttering. The buttons will be
large enough so that they can be clicked with a finger with ease and also not big
enough that it takes up too much of the screen. The images will be used as headers
and also used at the side of the screen. The layout of the app will remain consistent and
have minimal scrolling. The titles will be kept at the top so that the user knows what
page they are on.

Mock-ups

Design principles
Text:
The text used in all of these user interfaces is courier. We chose to use this text
because it is clear and easy to read for all ages and it adds a nice look and feel to the
application. For the main heading "Welcome to Fiscals Five Tips to help Protect your

identity" We chose to use the same style of font as what was used for the headings on
the Fiscal the fighting ferrets website. Also, we chose to colour the font black for the
content, and dark blue for the main heading. These colours have been chosen because
they match the colours used by the Fiscal the fighting ferrets website. The font size for
the game and quiz buttons is still the courier font, but it is bold and larger than the rest
of the content. This has been chosen to make these features stand out.

Colour:
The colour scheme we used is the green on the left and right sides of the user interface
with a dark blue/green section above the title. This was chosen because it is the same
colour scheme as the Fiscal the fighting ferrets website. We decided to change the
colour scheme of behind the content to match the same colour as the background of the
image of Fiscal pointing. This was decided to make it seem like the user is interacting
with Fiscal in order to learn these five points. A white text box has been chosen to
represent where the user enters their age at the home screen of the application. This
has been chosen because it provides a clear area where the user knows they have to
utilize.
Images:
All of the images used in this application are derived from the Fiscal the fighting ferret
website. The image of Fiscal pointing has been chosen because it promotes user
interaction and makes it seem like the user is interacting with Fiscal.
Sound:
We have chosen to have Fiscals voice ask the user how old they are once when the
application is opened and the home screen is displayed with the prompt for the user to
enter their age. Also, we have chosen to have a soft melody playing in the background
of the application only on the home screen. Finally, we have decided that Fiscals voice
will also read out each point to the users when the user goes to the corresponding page
of the application.
Layout:
The layout for this application is similar to the layout of the Fiscal the fighting ferrets
website. This has been chosen because it promotes similarity to Fiscal the fighting
ferrets website. Also, from using a similar layout and colour scheme to their website, it
encourages the users to learn more that Fiscal has to offer on the website. Furthermore,
the layout on the home screen has been designed so the image of Fiscal is on the left
hand side of the page in the center and the text that is asking the user for their age is
positioned inline with Fiscals mouth. This has been chosen so it seems like Fiscal is
talking to the users and is promoted by the sound of Fiscal asking the user for their age.

The layout of the pages that display the five points has been designed so the banner
picture that is used on Fiscals website appears under the pages title (like it does on the
Fiscal website) and the picture of Fiscal is position half way down the page from the
banner and on the left hand side. Also, the text is aligned so it appears like Fiscal is
talking to the users. The interaction with Fiscal will be promoted by the sound of Fiscal
reading the text displayed on the screen to the user. At the bottom of the text, there is a
left and a right arrow to navigate to and from each point. These arrows have been
positioned so the bottom of them align with the bottom of Fiscals image. Below the
arrows the game button appears and below that the quiz button appears. These will
navigate to a game designed for younger children to help them understand what the
point is trying to convey. The quiz is designed for the middle age children to adults to
gain a further understanding of why the points are so important.
These design choices have been chosen because it encourages familiarity with the
Fiscal the fighting ferrets website and promotes users to learn in an interactive way
where they feel like they are interacting with Fiscal. The sound choices were decided
because it is a way to teach the younger children who may have trouble reading the
content to understand it and it promotes user interaction with all users. Also, the game is
designed for the younger children to help them understand what the point is conveying.
The layout of the page is almost identical to the layout of the Fiscal website. The only
difference is the background of the content. This has been decided as presented in the
colour section of section 6.2. The banner (image under the heading) of the pages where
the points are being presented has been chosen because it is the same banner that is
displayed on Fiscals website. Also, Fiscal (the image of Fiscal pointing) has been
chosen to promote user interaction and make it appear like the user is interacting with
Fiscal the fighting ferret himself. Furthermore, the heading has been chosen to be
displayed on all the pages and the positioning of Fiscal on the user interface is similar
across all pages.

6.3. Prototypes
When prototyping we decided to approach the visual design with a simple, clean and
yet not too childish look, yet childish enough to appeal to the younger audience.
Functionality wise we wanted user friendly experience to both experience (children in
their teens) and non-experienced technology users (very young audience and or the
elderly). Tools we used to accomplish this includes Paint.net to produce the very first of
many alpha versions of the application (shown below alpha1.1) then Photoshop CC to
refine the design with more details and content, then applying those designs in to a
working UI through Codiqa (shown in codiqa1.1).
We started off with Paint.net using this program as our first step in the design, as the
tools provided are simple and easy to use but provides a few more features, being a
free image editing software providing basic layer features, special effects and other
useful tools.
Later in the next phase we moved on to Adobe Photoshop CC at add more detail and to
refine our designs, to give a more realistic view of what the end product will look.
Overall Photoshop offers very professional image processing tool, on top of that it is
easy to use and learn though hard to master. In addition this software is most widely
used as it is very popular and well known so convenience wise most people will have
access to it and most elements can be converted to the other formats even HTML.
Lastly Codiqa, we chose this as it the most convenient and fastest way to produce a
working prototype of our educational application as it is also web-based therefore can
be worked on anywhere. Using the previous prototype designs made in Paint and
refined in Photoshop, Codiqa allows us to build our application through a very easy drag
and drop system, further allowing cross-platform HTML mobile apps and websites thus
synergizing with Photoshop (as elements made there can be converted to HTML). This
site is largely cloud based making accessing your work extremely convenient as editing
and sharing work makes progress much faster as long as you have internet connection.
Other minor features include Google maps compatibility, version history (for easy
reverts), YouTube and Vimeo support and more.
As of the prototyping stage, the team of developers all gathered during the later stages
of the development cycle and considered the efficiency of the application's layout. The
theory behind creating a navigation menu.
Our UI prototype can be found here: https://codiqa.com/view/987a2ddb

Prototype Application Layout~

Demonstrates layout between all pages and the split of the
application for two different age groups.