ds

Tasks for Fun

Client
Jin Lu

Project Team
Matthew Jerabek
Edmer Buen
Graham Dix
Woo-Young Choi
Alexei Michailowsky

Professors
John Kozodoj
Mike Freeman

Facilitator

Stefan Dickerson

Project Manager
John Omura

ds
Tasks for Fun

Table of Contents

Chapter 1: Introduction

Project Summary 2
Goals 3

Chapter 2: Project Diagram

Home Page
Profile Page
Rewards Page
Settings Page 1
Settings Page 2

5
6
7
8
9

Chapter 3: Design Concept

Mood Board
Colours
Fonts
Iconography
Logo
Screens

11
12
13
14
15
16

ds
Tasks for Fun

Chapter 4: User Interface Library

Buttons
Text Entry
Checkboxes, Radios, Toggle and Pill Buttons
Navigation Bar and Title Bar
Typography
Lists
Accordion Menus
Bars
Overlays
Forms
Containers

18
19
20
21
22
23
24
25
26
27
28

Ottawa, December 2016.

ds
Tasks for Fun

Introduction

ds
Tasks for Fun

Project Summary
Ads-Omni (Tasks for Fun) was created by
Jin Lu. She wants to make it easier to analyze
market trends in advertising both online and offline. It will be the first step in creating a closed
loop system that analyses marketing data and
amalgamates online and traditional marketing
methods.
This project aims to create a user interface
library for a mobile application, which will be
targeted towards younger audiences (ages
15-28). These users will participate in multiple
tasks posted by vendors and companies. They
will then be remunerated for their accomplishments, through the application, based on the
number of tasks they have completed and the
difficulty of these tasks.

ds
Tasks for Fun

Goals

The objectives of this Applied Research project are:

- To design an application user interface that strongly

entices the user to interact;
- To create branding guidelines for companies to optimize their user experience .

ds
Tasks for Fun

Process Diagrams
Contains graphic representations of all interaction flows
available in the application. From the process diagrams,
it is possible to understand the logical sequence of events
users go through to execute tasks and accomplish goals.
The starting points are: the home page, the profile page,
the rewards page, the settings page and the privacy settings page.

ds
Tasks for Fun

Home Page

ds
Tasks for Fun

Profile Page

ds
Tasks for Fun

Rewards Page

ds
Tasks for Fun

Settings Page

Categories

Choose
Categories

Submit

ds
Tasks for Fun

Privacy Settings

ds
Tasks for Fun

Design Concept
Features the layout guidelines, the mood board and the
general visual elements created by the team for the application: colours, fonts, icon and logo. These elements
are not interactive: they do not operate as communication interfaces between the user and the machine. However, they are crucial for a good understanding of the
contents and the interactive elements. There are also
three samples of screens, whose purpose is to provide a
general idea of how the application will look.

ds
Tasks for Fun

Overall Look & Feel

Mood Board

Playful
Fun
Engaging
Entertaining

11

ds
Tasks for Fun

Orange

Colours

#F79C34
RGB: 247, 156, 52

#ED7231
RGB: 237, 114, 49

Grey 1

#D35427
RGB: 211, 84, 39

#DAD9D9
RGB: 218, 217, 217

#818181
RGB: 129, 129, 129

#303030
RGB: 48, 48, 48

Grey 2
#E5E5E5
RGB: 229, 229, 229

#555555
RGB: 85, 85, 85

#181818
RGB: 24, 24, 24

12

ds
Tasks for Fun

Fonts

Primary Font

Oswald Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Secondary Font

Open Sans Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Open Sans Semibold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

13

ds
Tasks for Fun

Iconography

14

ds
Tasks for Fun

Logo

ds

ds

15

ds
Tasks for Fun

Screens

16

ds
Tasks for Fun

User Interface Library

Features all the interactive elements designed for the
application: buttons; text entry fields; checkboxes, radio
buttons, toggle buttons and pill buttons; navigation bar
and title bar; typographical elements (headers and paragraphs); lists; accordion menus, search and progress
bars; text overlays; forms, and containers.

ds
Tasks for Fun

Buttons

EDIT

DELETE

ADD

EDIT

DELETE

ADD

Normal

Hover

Pressed

Normal

Hover

Pressed

Login with Facebook

Login with Facebook

Login with Google +

Login with Google +

18

ds
Tasks for Fun

Text Entry

Username
First Name
Last Name
Password
Confirm Password

19

ds
Tasks for Fun

Checkboxes, Radios,
Toggle and Pill Buttons
Checkboxes

Default

Disabled

Checked

Checked & Disabled

Radio Buttons / Pill Buttons

Default

EDIT

Disabled

DELETE

ADD

Checked

EDIT

DELETE

ADD

Toggle

OFF

ON

20

ds
Tasks for Fun

Navigation Bar
and Title Bar

Navigation Bar
Home

Reward

Setting

Home

Reward

Setting

Home

Reward

Setting

Home

Reward

Setting

Home

Reward

Setting

Title Bar
Balance

5.00

5.00

21

ds
Tasks for Fun

Typography

Header 1 The quick brown fox jumps over the lazy dog
Header 5 The quick brown fox jumps over the lazy dog
Header 2 The quick brown fox jumps over the lazy dog
Header 3 The quick brown fox jumps over the lazy dog
Header 4 The quick brown fox jumps over the lazy dog
Header 6 The quick brown fox jumps over the lazy dog
Paragraph The quick brownox
f jumps over the lazy dog

22

ds
Tasks for Fun

Lists

Lists of Items (Default)

Lists of Items (Default)
Lists of Items (Hover)

List of Title 2 Lines

List of Paragraph
List of Title 2 Lines (Hover)
List of Paragraph

List of Title with Icon

List of Paragraph
List of Title with Icon (Hover)
List of Paragraph

23

ds
Tasks for Fun

Accordion Menus

Accordion List - Open (Default)

Content of Paragraph
Content of Paragraph
Content of Paragraph
Accordion List - Close (Default)
Accordion List - Close (Default)
Accordion List - Close (Hover)
Accordion List - Open (Hover)
Content of Paragraph
Content of Paragraph
Content of Paragraph

24

ds
Tasks for Fun

Bars

Search Bar

Search

Progress Bar
60%
100%

60%
98%

25

ds
Tasks for Fun

Overlays
Lorem ipsum dolor sit amet, quesque
pritoria elerupter quid. Treplus merlop su
imar, keletu per amir harahb hamorozu.
Pericules jarazia emiru amori, geo vrayan
iea vammo, iea vammo, iea qui vammo.
Pipo quemus alli aparut, pelomar ito. Sarop maturli isuts, fromelein friputs. Cronen
bein peloti, meruta lupis pur. Sopre sapiti
mutiquis, firel ilam moruquis quid. Frics.

1 button

Lorem ipsum dolor sit amet, quesque

pritoria elerupter quid. Treplus merlop su
imar, keletu per amir harahb hamorozu.
Pericules jarazia emiru amori, geo vrayan
iea vammo, iea vammo, iea qui vammo.
Pipo quemus alli aparut, pelomar ito. Sarop maturli isuts, fromelein friputs. Cronen
bein peloti, meruta lupis pur. Sopre sapiti
mutiquis, firel ilam moruquis quid. Frics.

2 buttons

26

ds
Tasks for Fun

Forms

Validated
Validated & Disabled
Invalidated

Setting - Edit
Setting - Delete
Setting - Add

EDIT

DELETE

ADD

Active
Inactive

27

ds
Tasks for Fun

Containers

Small - Setting List

Small II - 2 Lines List, Account Container, Coupons

Medium - Earning History

Large - Overlay

28

ds
Tasks for Fun

Extra Large - Large Text Container

Terms and Conditions, Privacy Policy

29

ds
Tasks for Fun