Prototype app documents

1. CANARY
M O B I L E A P P L I C AT I O N D O C U M E N T

2. Overview
Project Overview
Globalization 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.

3. Sections.
Section 1 | User Flow
Section 2 | Wireframes
Section 3 | Design Mock Ups

4. User Flow.

5. 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 & LinkedIn
5. “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

6. 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

7. Account
Settings
Search
“Home”
aka Contacts
Menu
Specific User Profile
Specific User Profile
Play Sound
Play Sound
Record Prognostication
Search
Contacts
Account
Settings
Same as above
01.03 In App Flow
Menu
click
click
click
Menu
Menu
Play
Click
Play

8. Wireframes.

9. 1.Branding
2. List of all methods to sign up for
Canary.
02.01 Sign Up
2
1

10. 1.Branding
2. Login credentials from sign up
method.
Facebook, LinkedIn, Canary User or
Twitter.
02.02 Login
2
1

11. 1.Profile Image- Pulled from social
media
2. Record name prognostication
3. App settings
4. Link additional social media
5. Menu
02.03 Account
2 3
4
5
1

12. 1. Profile Image- Pulled from social
media
2. Play name prognostication
3. Notes from user
4. Return to contact list
5. Menu
02.04 Contact Profile
2
3
4
5
1

13. 1. Menu
2. Instructions
3. Contact Name
4. How connected to contact via
social media icons
5. Scroll for all contacts
02.05 Contact List
2
3 4
5
1

14. 1. Page slides right to reveal menu
2. Menu list items
3. User information
02.08 Menu
2
3
1

15. Design Mock Ups.

17. Sign Up & Log In.
03.01.01 | Signing up for Canary mobile app
03.01.02 | Logging into Canary mobile app

18. 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.
Notes
This 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 branding
2. Choice of sign up platform
03.01.01 | Sign Up
2
1

19. 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.
Notes
This 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

20. Account.
03.02 | Canary User Account Profile

21. 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)
Notes
A user will arrive at the account page
via the hamburger menu icon.
1. Menu icon
2. Record name pronunciation
3. Profile picture (from social media
sync)
4. Account settings
5. Account contact information
6. Add additional social media
channels.
03.02 | Account
2 3 4
5
6
1

22. Contacts.
03.04.01 | User Contacts list
03.04.02 | User Contacts detail

23. 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.
Notes
A user will arrive at the account page
via the hamburger menu icon.
1. Menu icon
2. Letter section divider
3. Contact entry record
Tap to find contacts Canary
record
4. Social media connection
indicator
Ghosted icon indicated not
connected via specified platform
03.04.01 | Contact list
2
3
4
1

24. 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.
Notes
A user will arrive at the account page
via the hamburger menu icon.
1. Menu icon
2. Contact information
3. How user and contact are
connected.
4. Play button for name
pronunciation.
5. Notes field
6. Return to contact list button
03.04.02 | Contact detail
2
3
4
5
6
1

25. Menu.
03.05 | Global Menu

26. The global menu is accessible from
the hamburger menu icon located in
the top left of the application.
Notes
Global menu has will allow for access
to contact list, account settings, app
setting and to the search function.
1. Search
Ability to search contact list for
specific user
2. State indicator
Identifies users location in
application
3. Contact list
Takes user to contact list
4. Account
Takes user to account settings
5. Settings
Takes user to global app settings
6. Log out
03.05 | Global Menu
2 3
4
5
6
1

27. Revision History.
Version 4.1
Created by : Andrew Young