CANARYM O B I L E A P P L I C A T I O N D O C U M E N T

Overview

Project OverviewGlobalization finds disparate countries with distinct cultures and languages doing business together, but struggling to understand one another. The world is becoming increasingly more connected through technology, yet the cultural and language communication gap continues to widen.

Canary, the first of its kind, intelligent database of vocalized name pronunciations.

The Canary mobile application provides users the ability to sync contacts from their phone, Facebook mobile app, LinkedIn mobile app and Twitter mobile app with Canary. This allows them the see all contacts who have a name pronunciation within Canary and hear the correct pronunciation of said contacts name.

Sections.

Section 1 | User FlowSection 2 | WireframesSection 3 | Design Mock Ups

User Flow.

On-boarding flow for a new user / first time user (FTU).

1. Pick method for Canary registration or create a Canary specific account.2. Enter credentials for social media platform.3. Info screen informing that verification is needed for account. Does not prevent from moving forward into app.4. Allows access to contacts in FB, Twitter & LinkedIn5. “Home” is the state that users will enter every time app is launched.

FTU

Load Screen

Introduction to Canary

Choose Registration Method

Social Media Access

“Home” name pronunciations

Facebook Access Twitter Access LinkedIn Access Canary User Only

Verify Email

Register

FB - Twitter - LinkedIn - New Account

Approve

Menu

Approve Access Approve Access Approve Access Submit

01.01 New User Flow

Click

Automatic

Automatic

Click

Click

Click

2

3

4

5

1

Returning user (RU) flow for app launch.

1. While loading, Canary will display a login screen that is specific account link type.2. Login screen that informs user to enter either FB, Twitter, LinkedIn or Canary credentials.3. “Home” is the state that users will enter every time app is launched.

RU

Load Screen

Login

“Home” name pronunciations

Facebook Access Twitter Access LinkedIn Access Canary User Only

Login

Menu

01.02 Returning User Flow

Click

Automatic

Automatic

2

3

1

Account

Settings

Search

“Home” aka Contacts

Menu

Specific User Profile

Specific User Profile

Play Sound

Play Sound

Record Prognostication

SearchContactsAccountSettings

Same as above

01.03 In App FlowMenu

click

click

click

Menu

Menu

Play

Click

Play

Wireframes.

1.Branding2. List of all methods to sign up for Canary.

02.01 Sign Up

2

1

1.Branding2. Login credentials from sign up method.Facebook, LinkedIn, Canary User or Twitter.

02.02 Login

2

1

1.Profile Image- Pulled from social media2. Record name prognostication3. App settings4. Link additional social media 5. Menu

02.03 Account

2 3

4

5

1

1. Profile Image- Pulled from social media2. Play name prognostication3. Notes from user4. Return to contact list 5. Menu

02.04 Contact Profile

2

3

4

5

1

1. Menu2. Instructions3. Contact Name4. How connected to contact via social media icons5. Scroll for all contacts

02.05 Contact List

2

3 4

5

1

1. Page slides right to reveal menu2. Menu list items3. User information

02.08 Menu

2

3

1

Design Mock Ups.

Sign Up & Log In.

03.01.01 | Signing up for Canary mobile app03.01.02 | Logging into Canary mobile app

The Canary mobile app will have a forced sign up via a social media platform (Facebook, LinkedIn or Twitter). The user will have the ability to link all three of their social media accounts to their Canary user account profile.

NotesThis is the first state after the load screen upon installing the app. After a user passes this state, they will always be prompted with the log in state in the future (01.02).

1. Canary branding2. Choice of sign up platform

03.01.01 | Sign Up

2

1

The only time that the user will have to re-log in to the Canary application is if there has been an update to the Canary application or if the phone has been powered off.

NotesThis is the first state after the load screen upon installing the app. After a user passes this state, they will always be prompted with the log in state in the future (01.02).

An error message will be prompted with “You have entered either the wrong user name or password for your Facebook log in.”

03.01.02 | Log In

1

Account.

03.02 | Canary User Account Profile

Regardless of the sign up method for Canary. A user will have the ability to link Facebook, LinkedIn and Twitter accounts to Canary.

The Account page is where a user will be able to add their voice recoding, edit account setting (i.e. push notifications or sharing)

NotesA user will arrive at the account page via the hamburger menu icon.

1. Menu icon2. Record name pronunciation3. Profile picture (from social media sync)4. Account settings5. Account contact information6. Add additional social media channels.

03.02 | Account

2 3 4

5

6

1

Contacts.

03.04.01 | User Contacts list03.04.02 | User Contacts detail

The contact section of the Canary app will be where the user spends the majority of the time. This list of contacts within the Canary app is an aggregated listed of all contacts that the user is associated with via their phone contacts & linked social media accounts, who have Canary accounts.

A user can only hear name pronunciations of persons that they are connected with via Facebook, Twitter, LinkedIn or Contact Book contacts that have allowed for Canary to expose their pronunciation publicly.

NotesA user will arrive at the account page via the hamburger menu icon.

1. Menu icon2. Letter section divider3. Contact entry record

Tap to find contacts Canary record

4. Social media connection indicatorGhosted icon indicated not connected via specified platform

03.04.01 | Contact list

2

3

4

1

The contact detail screen is the promoted screen when a contact is selected from the contact list.

This is the state in which a user will have the ability to hear correct name pronunciation from the contact. Additionally users have the ability to read notes entered by contact about pronunciation and the ability to enter their own notes about pronunciation.

NotesA user will arrive at the account page via the hamburger menu icon.

1. Menu icon2. Contact information3. How user and contact are

connected.4. Play button for name

pronunciation.5. Notes field6. Return to contact list button

03.04.02 | Contact detail

2

3

4

5

6

1

Menu.

03.05 | Global Menu

The global menu is accessible from the hamburger menu icon located in the top left of the application.

NotesGlobal menu has will allow for access to contact list, account settings, app setting and to the search function.

1. SearchAbility to search contact list for specific user

2. State indicatorIdentifies users location in application

3. Contact listTakes user to contact list

4. AccountTakes user to account settings

5. SettingsTakes user to global app settings

6. Log out

03.05 | Global Menu

2 3

4

5

6

1

Revision History.

Version 4.1Created by : Andrew Young