UI Design Brief

Hayley Hazleman-Roach s2842693

Adam Burnell s2800642
Mark Willoughby s2802310
Benjamin Manning s2947756

Task Allocation and Completion

Date

Ver.

Author

Addition/Alteration

14.03.15

Hayley Hazleman,
Group discussion of ideas
Adam Burnell, Mark
Willoughby,
Benjamin Manning

23.03.15

Hayley Hazleman,
Group organization and
Adam Burnell, Mark discussion, allocation of tasks
Willoughby,
Benjamin Manning

26.03.15

Hayley Hazleman

Section 3 and 1.1

26.03.15

Adam Burnell

Section 5

26.03.15

Mark Willoughby

Section 1.2 and 2

26.03.15

Benjamin Manning

Section 4

27.03.15

Hayley Hazleman

Final edit and submission

25.04.15

Hayley Hazleman,
Group organization and
Adam Burnell, Mark discussion, allocation of tasks
Willoughby,
Benjamin Manning

24.04.15

Hayley Hazleman

User research at Highland Park

State Primary School

28.04.15

Hayley Hazleman

Revision of Assignment 1

29.04.15

Hayley Hazleman,
Mark Willoughby

Design of UI and prototype

29.04.15

Adam Burnell,
Benjamin Manning

Prototype development

04.05.15

Mark Willoughby

Section 6.1

04.05.15

Adam Burnell

Section 6.2

04.05.15

Benjamin Manning

Section 6.3

06.05.15

Hayley Hazleman

Final edit

10.05.15

Benjamin Manning

Section 7.1

Table of Contents
1. Introduction.................................................................................................1
1.1. Purpose of this Document....................................................................1
1.2. Scope of this document........................................................................1
2. Background.................................................................................................1
3. Target audience...........................................................................................1
3.1. Audience beliefs...................................................................................1
3.2. Audience levels....................................................................................1
3.3. Audience demographics.......................................................................1
3.4. Audience expectations.........................................................................2
4. Problem Statement.....................................................................................2
5. Goals...........................................................................................................2
5.1. Usability Objectives..............................................................................2
5.2. Single message....................................................................................2
5.3. Mandatory elements.............................................................................2
5.4. Deliverables..........................................................................................2
6. Alpha Design...............................................................................................2
6.1. Structural Design..................................................................................3
6.2. Visual Design........................................................................................3
6.3. Prototypes............................................................................................3
7. Testing.........................................................................................................3
7.1. Test Plan...............................................................................................3
7.2. Test Results..........................................................................................3
8. Final Design................................................................................................3

1. Introduction
1.1.

Purpose of this Document

1.2.

Scope of this document

1. This document aims to detail the development of the application designed

for the Fraud and Cyber Crime unit within the Queensland police service.
The application is aimed to be about Fiscal the Fraud Fighting Ferret and
the messages he conveys about keeping safe on the internet. This
document will include the findings and data of the conducted user research
and the design work. This also includes the recommendations for the
application and the user testing of the design and the development of the
application.
2.
3. Fraud and Cyber Crime Unit within the Queensland police service want to
create an application with the purpose of helping to encourage school
Children to accept the responsibility of being Fiscals Deputy to learn
about cyber safety, online threats, having responsible online behavior and
knowing when to share this information with their families. To help them
fulfill their goals of their program, an application has been chosen to
address this. As the chosen development team we are to design a user
interface and working prototype for testing to be refined into an application.
To properly help to reach the Fraud and Cyber Crime Unit within the
Queensland police services goals for this application, the applications user
interface will have to be both interactive and easy to use, it is also required
that the existing characters are used including the artwork that is provided,
as well as the following five tips.
4.
1

Limit the amount of information you post online. Never post your full name
and your date of birth.

Make sure you update your anti-virus 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.

5.

6.

7.

Page 1

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.

8.

9.
10. For this application, research will be conducted to successfully target the
intended audience. This will help to reach the project goals of being both
engaging and informative towards the chosen audience while conveying
the messages of the Fiscal the Fighting Ferret program. This document,
however, will not cover the coding process or the publishing details of this
application due to the design constraints. This is due to the time and
resource restraints of developing an application. Due to this, a working
application will be developed to be given to the Queensland Police Service
for publishing.

2. Background
11. This app is in creation because of the Fraud and Cyber Crime Unit within
the Queensland police service. The program has already completed a very
successful pilot phase, where 7 schools around Queensland were chosen
to participate. The application is intended to focus on their work,
encouraging school Children to learn about cyber safety, online threats,
having responsible online behavior and knowing when to share this
information with their families also known as being Fiscals Deputy It
unlike most programs seeks to educate the children, which will empower
them to become the educator and protector of their families. It is envisaged
that this will help to foster a cyber-safe culture from the ground up.,
therefore making the internet a safer play for everyone.
12.

3. Target audience
13. The primary targeted audience of the application will be young children
between the ages of five and fifteen. This was chosen as this is the age
group who the application will be used for as they are only then developing
their interest in the internet. This information was gathered from spending
an afternoon at Highland Park State Primary School in their prep class,
volunteering to work with the students. During this time, the information
Page 2

was gathered by observing the students, talking with the students and their
teacher and observing their room and their work.
14. The secondary target audience will be the childrens parents. This is
chosen as they secondary target audience as they are the people most
likely to download the application for their child to use.
15.

3.1.

Audience beliefs

16. The primary targeted audience may not find the information currently too
interesting as there is currently nothing interactive to interest and engage
them. Most of what is currently available are readings which young
children will not find engaging. The application would do well to avoid this
and engage the target audience through interactive means where the user
can have a fun and engaging learning experience.
17. The secondary target audience believes that the program is doing well and
is showing a positive reflection on the primary target audience. They
believe that the program is helping to take a step in the right direction for
helping their children become safe online and are supporting towards the
program despite its early stages.
18.

3.2.

Audience levels

3.3.

Audience demographics

19. The targeted audience will have a primary level education. This will be as
children between these ages are most vulnerable. It is aimed towards this
age to help instill safe and responsible online behavior to avoid online
threats. As this is the age that young children will start using the internet,
the application will be used to help them develop their skills for using the
internet safely.
20.

21. Shown from studies, the younger audiences have access to and use tablet
devices as there are simple and basic to follow unlike computers. This
would be a preferred means to communicate with the target through the
application. More young children are shown to have access to tablet
devices at home, while schools are now purchasing tablet devices for
communicative applications to help with the learning of their students.

Page 3

22. As the application will be aimed towards primary school students, the
application will need to be mainly visual, with limited and basic words as
younger children may not be able to understand.
23. Due to the age of the targeted audience, a very basic understand of
technology is expected. Due to this, the application will need to be
simplistic and easy to follow, showing entertaining and engaging visual
design.
24. As the application will be targeted towards this age group, the best choice
of platform will be a tablet device. As the application will be designed for
such a devices, the application will be aimed towards targeted audiences
who come from moderate income families or higher.
25.

3.4.

Audience expectations

26. To have the application be successful, the application will need to be

engaging and entertaining for the audience, also on a basic level of
education for them to understand. For this to be so, the application will
need to be predominantly visual with the aid of colour and interactive
elements to keep them engaged and to show them the message of the
program. From the studies conducted by the University of Kentucky,
younger children prefer bright warmer colours such as reds and oranges,
most developing their preference for cooler colours in their later life.

4. Problem Statement
27. The client is the Fraud and Cyber Crime Unit within the Queensland Police
Service. The client has tasked us with developing an app that conveys the
messages in the program Fiscal the Fraud Fighting Ferret Cyber Safety
Program. The current problem with the program is the lack of awareness
and availability of the program. As the program is only in its trial stage at
seven schools, it needs to broaden its program by targeting a wider
community, allowing children across other schools access to their program.
This could be easily done through the application, allowing them to expand
their reach.
28. The main problem with developing this app will be making the application
accessible to children and adults. The current time constraints are 10
weeks. The budget has been set at $6,000. The needs of this application
are to give children the information to be safe and secure online and also
allow them to be able to teach other how to be safe.
Page 4

5. Goals
29. The goal of this application is to provide the information to as many of the
target audience as possible while staying within the budget and the
timeline.

5.1.

Usability Objectives

5.2.

Single message

30. Usability for this app will be fitted for a young audience. This will make the
requirements for the UI simple. The main features need to have minimal
clicks and interactions to get the basic information that is required to be
delivered. It is also required to be engaging to the target audience which
can be achieved through the use of colour and interactivity while
maintaining the information required.
31.
32. The single message is to stay safe on the internet and due to the client
using the app to deliver this information, the legitimacy of this product
would not be in question as most of the information is teaching basic
common sense.

5.3.

Mandatory elements

5.4.

Deliverables

33. The client information including name of the department and numbers to
reach for additional contact or questions will need to be present in the
application with links to their other sites of information for the targeted
audience to become further informed if chosen. The application will also
be required to use the characters created by the Fraud and Cyber Crime
Unit within the Queensland Police Service, particularly Fiscal the Fraud
Fighting Ferret. This also includes the Queensland Police Service logo
34. The application will need to be interactive and engaging towards the
younger audience. This will be targeted through the colour scheme and
interactivity to help keep them engaged and entertained. The information
already on the site will be incorporated into the application, including the
video episodes and the five tips.
35. Upon completion, a functioning application will be delivered to the
Queensland Police Service along with all documentation and coding. The
designed prototype will be delivered as a working application however it is
designed for use on tablets. This will be delivered for both iOS and Android
as they are the two most commonly used platforms by both schools and
home users, allowing the application to target as many people as possible.
The original HTML application will also be delivered to the Queensland

Page 5

Police Service for easy updates and changes, also allowing them to export
to other platforms at a later date if desired.

6. Alpha Design
36. The application will be built on a powerful desktop computer designed for
such work. This will be a Microsoft windows machine however this does
not limit the native application software. A Wacom table will also be used
to design the graphics for the application. This will be used to enhance the
quality of the images used in the application as it allow for finer details that
are otherwise unobtainable with a mouse.
37. The application will be built using several different software programs. The
graphics used for the application will be designed using Adobe Photoshop.
This was chosen over other image software as it is a powerful imaging
software. Photoshop is the worlds leader in digital imaging, being easy to
use with visually stunning results, having no boundaries as to the level of
quality to the images produced. This program was chosen as it is easy to
use and allows for what is required. The other software that will be used to
develop the application will be Titanium Appcelerator. This is a JavaScript
based software that contains the components and functionality of tablet
applications, allowing for exportation to the native mobile and tablet
platforms. This software allows for the application to be developed once
and encoded across multiple different platforms instead of developing for
each device in their native code. This software was chosen over other
software as it is easy to use and can allow for the functionality required for
the application.
38. This section will cover the design process of the application, covering the
chosen layout of the pages and how they link together, the visual design of
the application and the justification of the choices based on the research
conducted and the design approach of the prototype of the application.
39.

6.1.

Structural Design

40. The application will be designed to have a basic easy to follow layout and
structure to accommodate the target audience. The information for the
structure of the application was gathered through the time spent in the
classroom with the primary target audience, helping a group complete
work through an application on iPads. The results showed their skill and
recognition of the basic elements of the user interface, allowing the Fiscal

Page 6

the Fighting Ferret application to be targeted towards them. This will be

accomplished through a basic structured page hierarchy.
41.
Home

42.
43.
44.
Tip 1

45.Tip 2

Tip 3

Tip 4

Tip 5

Videos

Links

46. The application will load to the home screen. From this screen, the user
can navigate to the tips, video or links page. Upon pressing the tips button,
the first tip page will load.
47. Each of the five tips will load on a different page. This was chosen due to
the user research that shows that young children respond better when
less, more concise information which will keep them more entertained. To
accommodate this, each tip will have a separate page to allow for room for
graphics and better visual design. Each tip page will link to the previous
and next, while also allowing the user to navigate back to the home page.
The videos page will link to each of online videos, taking the user to
external video links.
48. The links pages will have the external links of relevant sites for the user to
find more information. This will include the Fiscal the Fighting Ferret site
and the Queensland Police Service site.

6.2.

Visual Design

49. The visual design for the application was developed from the user
research conducted by external links and the research conducted at
Highland State Park Primary School in a prep class. This was aimed
towards the primary target audience of the young primary school children.
50. The colours for the website are based from user research into what
colours entertains young children. Each page will have a different
background colour. This was chosen as it shows variety and will help the
target audience be engaged. As shown from the studies conducted by the
University of Kentucky, these will be warmer colours such as reds and
oranges. The colours from the Fiscal the Fighting Ferret website will also
be incorporated into the application to keep continuity between the website
and the application to give a professional feel. Following the design
principles, colour will be limited per page, using the colours black for text,
Page 7

while for the text background to make it easy to read, and a single solid
background colour. Imaged will be used that introduce new colours
however these will be chosen specifically per page as to not over stimulate
and distract the user.
51. The text will be shown in a basic font that is easy to read for the user. The
font chosen for this is the Queensland Schools Font. This is designed in
strict accordance by the Queensland Department of Education. This is a
basic unjoined font that is aimed towards children learning to write as it is
easy to read. This was chosen for this purpose, as it is basic and easy to
read, while following the standards of the Queensland Department of
Education. The text will be displayed in black on a white background to
enable easy reading. The text will be slightly larger, size 14, making it
easier to read for children. The headings will be one size larger and bold to
make them stand out. This will be used on all pages except for the home
page.
52. The graphics chosen for the application are the images supplied by the
Queensland Police Service for the Fiscal the Fighting Ferret program.
These are chosen to be incorporated as they are part of the program
already and will provide continuity between the application and the website
while also fulfilling the requests of the Queensland Police Service of
including these images. No new images will be introduced as the images
given are sufficient for the design on the application.
53. The icons for the buttons in the application will be standardized imagery
that has been associated with their purpose. The next buttons on the tips
page will the arrows that have been standardized as the next and previous
arrows. This has been chosen as it is uniform across all platforms and is
easily recognized by the user, making it easy to understand while also
fitting in well with the visual design of the application.
54. The layout of the application is very basic and allows for the user to follow
it easily. There is minimal text, allowing to quick and easy reading. This will
be uniform across all pages. This was chosen to reflect through the site to
make it easier to use for the user, by keeping continuity across all pages.

55.
6.3.

Prototypes

56. The prototype was built as a wireframe. This was chosen as it gives a
better idea of how the application would run. The prototype for the
application is built with the basic user interface with no graphics and
limited visual design. The prototypes were built from the research
Page 8

conducted at the school by building brainstorming the possible ideas for

the application. The most suitable was chosen and is displayed below. The
final prototype was wire framed in Adobe Photoshop from a sketched
image.

57.

Page 9

58.
59. Upon completion of the prototype, it was discovered that it would flow well,
allowing for clean visual design.
60.

7. Testing
7.1.Test Plan
61.
62. For the test phase, the testing will be done in two groups. The first group
will be the Alpha testers and this group will comprise of Benjamin Manning,
Adam Burnell, Hayley Hazleman and Mark Willoughby, the four designers.
The Beta testers will be a group of children from a primary school.
63. Alpha test
64. The Alpha testing will be carried out on a functional version of the
application. This version will only feature basic requirements such as
buttons that can transition from page to page, access the videos featured
on the Fiscal the Fraud Fighting Ferret website and access links to the
Fiscal the Fraud Fighting Ferret website. The method of testing will be
using the basic functionality of the app to ensure all of the functions work.
Page 10

This means going from screen to screen making sure all links are active
and going to the right place and the application doesnt having any
functional bugs. IF all goes smoothly, Beta testing can commence. But, if
any problems do occur, notes will be taken down and the application will
be revised based on any problems which are found. Once all problems, if
any are found, are solved, the application will have images, color and text
added in and Beta testing can commence.
65. Beta Test
66. The Beta testing will be carried out on version 1.0 of the application. This
version of the application will have all functions active and all images, color
and text will be visible too. The method of testing is to have a number of
children test the application alone and amongst their peers and have them
both write down anything they didnt like or convey their problem to a
designer in person so that one of us may take note. The data that we are
hoping to collect is based around a childs ability to use this application.
We are looking at getting feedback about size of font (if they can read with
ease), color scheme (the color not blending with the background) and
overall appeal. Once the Beta has concluded we will take the information
away and improve upon the application for version 1.01. A second Beta
test may be conducted if many problems or recommendations are found.
67. Once the Alpha and Beta tests have been completed and all findings and
recommendations have been tried and possibly added to the application,
the application will be prepared for release on android with Samsung.
68.

7.2.Test Results and Analysis

69. 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.
70.

7.2.1.

Findings and Recommendations

71. Give your findings and/or recommendations for revisions to your design.
72.

Page 11

8. Final Design
73. 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.

Page 12