mDT#4 29. 9. 2016 Learn how to shape a rough app idea into a thoughtful, intuitive design. Find out how successful mobile apps are designed and user-tested. Charles will share design examples from his past work including the NASA app and the Ticketmaster app. This talk will focus on UX design so no coding experience is needed.

1. Resources: Online Courses
For coders For non-coders
Stanford’s iOS development class
iTunesU
“From Idea to App Store”
udemy.com
Link to discounted course
Apple’s iOS development videos
developer.apple.com/itunes
“The Complete Product Management
Course”
udemy.com
Link to discounted course

3. CHARLES DU
productcharles.com | nomadcharles.com

4. Introduction to Mobile
UX Design

5. Hi. I’m Charles

6. 1. Process
2. Models
3. Resources
Agenda

7. 1. App Definition Statement
2. Feature Backlog
3. Flow Diagram
4. Wires
5. Mocks
6. Mobile Web Prototype
7. Assets
Process

8. “An app definition statement is a concise, concrete
declaration of an app’s main purpose and its intended
audience”
What is an app definition
statement?

9. “An app that easily let the public get
NASA content”
1. App Definition Statement
NASA App

10. “An app that easily let two strangers
discover what they have in common”
1. App Definition Statement
Common Links

11. “An app that easily let two strangers
discover what they have in common”
Example: Common Links

12. 2. Feature Backlog
Tools: Asana, Jira, Pivotal Tracker

15. 3. Flow Diagram
Tools: Paper, Omnigraffle, Visio
Splash
Screen
Not
Logged In
Home
Screen
Logged In
User Data
Saved?
Data < 1 week
old?
FB Token
Received
Start Yes
Tap "Log in"
Unable to log in to
Facebook. Please
check your internet
connection.
No
Yes
FB Token
Saved?
No
No
Splash
Screen
Spinner
Yes
No
FB data
received?
Save User
Data
Yes
No
Is old data
available
No
Yes
Read User
Data
Read User
Data

17. 4. Wires
Tools: Paper, Omnigraffle, Balsamic, Axure

18. 5. Mocks
Tools: Sketch, Photoshop, Indesign, Invision
COMMON LINKS
CL_pageviews_createdlinkables.png
Header Arrow
#f47203
Headers
Cell height 88 px
#f7f7f7
Helvetica Neue Medium
18pt, #000000
Profile Image
W 317 px, H 317 px
Helvetica Neue Light, 16pt, #000000
Helvetica Neue Bold, 22pt, #f47203
Helvetica Neue Light, 16pt, #f47203
Helvetica Neue Light, 16pt, #000000
Helvetica Neue Light, 22pt, #f47203
Helvetica Neue Light, 16pt, #f47203
Footers
Cell height 84 px
#f7f7f7
Cell height 170 px
Cell height 295 px
Grey Stroke 1px, #d3d3d3
White Padding
(between grey stroke and profile image)
3px, #ffffff
White Padding
(between 2 profile images)
7px, #ffffff
27 px
18 px
27 px
18 px
73 px
73 px
12 px

19. Resources: iOS Human
Interface Guidelines
https://developer.apple.com/ios/human-interface-guidelines/

20. Resources: Android Material
Design Spec
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

21. 6. Mobile Web Prototype

22. “Show me how you would complete this task”
“What do you think this word means?”
“If you tap on this, what do you expect to
happen?”
“What was confusing?”
“how did using this app make you feel?”
User Test

23. 7. Assets
COMMON LINKS
Animation Assets
Friends Balls
18% opacity of #5c76b1
Music Artists Balls
18% opacity of #ee3568
Likes Balls
18% opacity of #2ac5f4
20px 28px 35px 52px

24. 7. Assets - icons
1
D
E
F
2 3

25. 7. Assets - icons
9. APP STORE PREP

26. Role Models
9. APP STORE PREP
FacebookSettings Ticketmaster
PathWazeVenmo

27. As Android, iPhone and other mobile platforms grow,
we are moving away from the page-based Internet. The
new Internet is app centric and often message-centric.
— Keith Teare, Archimedes Labs

28. Resources: Online Courses
For coders For non-coders
Stanford’s iOS development class
iTunesU
“From Idea to App Store”
udemy.com
Link to discounted course
Apple’s iOS development videos
developer.apple.com/itunes
“The Complete Product Management
Course”
udemy.com
Link to discounted course

29. PRODUCTCHARLES.COM

30. WWW.MDEVTALK.CZ
mdevtalk