Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Charles Du: Introduction to Mobile UX Design

135 views

Published on

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.

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Charles Du: Introduction to Mobile UX Design

  1. 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
  2. 2. CHARLES DU productcharles.com | nomadcharles.com
  3. 3. Introduction to Mobile UX Design
  4. 4. Hi. I’m Charles
  5. 5. 1. Process 2. Models 3. Resources Agenda
  6. 6. 1. App Definition Statement 2. Feature Backlog 3. Flow Diagram 4. Wires 5. Mocks 6. Mobile Web Prototype 7. Assets Process
  7. 7. “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?
  8. 8. “An app that easily let the public get NASA content” 1. App Definition Statement NASA App
  9. 9. “An app that easily let two strangers discover what they have in common” 1. App Definition Statement Common Links
  10. 10. “An app that easily let two strangers discover what they have in common” Example: Common Links
  11. 11. 2. Feature Backlog Tools: Asana, Jira, Pivotal Tracker
  12. 12. 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
  13. 13. 4. Wires Tools: Paper, Omnigraffle, Balsamic, Axure
  14. 14. 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
  15. 15. Resources: iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines/
  16. 16. Resources: Android Material Design Spec https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
  17. 17. 6. Mobile Web Prototype
  18. 18. “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
  19. 19. 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
  20. 20. 7. Assets - icons 1 D E F 2 3
  21. 21. 7. Assets - icons 9. APP STORE PREP
  22. 22. Role Models 9. APP STORE PREP FacebookSettings Ticketmaster PathWazeVenmo
  23. 23. 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
  24. 24. 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
  25. 25. PRODUCTCHARLES.COM
  26. 26. WWW.MDEVTALK.CZ mdevtalk

×