Rapid Prototype the User Experience

2,662 views

Published on

why, what, who, when, how to rapid prototype

Published in: Design, Technology

Rapid Prototype the User Experience

  1. 1. Rapid Prototyping the User Experience General Assembly Understanding User Experience Workshop April 1, 2012 Hong Qu @hquSaturday, March 31, 2012
  2. 2. Contents Introduction and background Prototype: Why, What, Who, When How to prototype Paper Powerpoint, Keynotofia Wireframing tools: Balsamiq, Omnigraffle, Skitch Wizard of Oz: build interactive HTML page Case study: YouTube QuickList ConclusionSaturday, March 31, 2012
  3. 3. Saturday, March 31, 2012
  4. 4. From Idea to Launch in 6 weeks Product and UX lead for www.upworthy.com Project management Brainstorm Implement Draw sitemap Wireframe Design Build prototypes Code QA LaunchSaturday, March 31, 2012
  5. 5. Why Prototype? User Center Design Process Iterate the product to meet users’ needs Test product/market fit Synchronize the development team on the same page Discover “unknown unknowns” Minimize risk at launch Inform forecasts of KPI metrics post launch Pro forma - models the anticipated resultsSaturday, March 31, 2012
  6. 6. User Centered Design http://gudmail.blogspot.com/2007/12/user-centered-design-process-ucd.htmlSaturday, March 31, 2012
  7. 7. What to prototype? Value proposition Complex functionality conceptual model Navigation flow Mobile Different views what visitor vs registered user are asked to do next empty profile vs completed profile page THE ENTIRE PRODUCTSaturday, March 31, 2012
  8. 8. When to Prototype? UX Process in stages http://bit.ly/qkFf1KSaturday, March 31, 2012
  9. 9. https://www.youtube.com/watch?v=qDK1ZAUaMWwSaturday, March 31, 2012
  10. 10. Who builds prototypes? Anyone can draw with pen and paper design Powerpoint or Keynote (keynotopia) cut and paste in wireframe software make animated GIFs code basic HTML, CSS and Javscript/JquerySaturday, March 31, 2012
  11. 11. Who tests prototype? What would real life customers do? Does the concept make sense? Are users motivated, interested in accomplishing this goal? Do users see the content, link, button, call-to-action etc...? http://youtube-global.blogspot.com/2009/10/inside-user-research-at-youtube.htmlSaturday, March 31, 2012
  12. 12. Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability ProblemsSaturday, March 31, 2012
  13. 13. How to Prototype Start by modeling system level site map and navigation flow diagrams Be specific about what you want to learn from building and testing the prototype Get team understand the spec Collect qualitative data point to guide design direction Confirm users “get it”Saturday, March 31, 2012
  14. 14. Saturday, March 31, 2012
  15. 15. Saturday, March 31, 2012
  16. 16. Case study YouTube Quicklist http://www.slideshare.net/hongqu/quicklist- design-process Develop 10 different concepts Refine the best ideas Fail and fail fast! Eliminate and throw away prototypes that didn’t test well Resolve heated debates and assumptions with solid data and feedback from real usersSaturday, March 31, 2012
  17. 17. Saturday, March 31, 2012
  18. 18. Software Tools gomockingbird.com http://keynotopia.com/ balsamiq.com omnigraffle AxureSaturday, March 31, 2012
  19. 19. Books Sketching the User Experience by Bill Buxton The Elements of User Experience by Jesse James Garrett Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems by Steve KrugSaturday, March 31, 2012
  20. 20. Conclusion All Talk and No Prototypes Anyone can build prototypes, but only real life target users should test the prototypes Prototyping helps you validate Product/Market Fit hypotheses Prototype artifacts enhances your specs and requirements doc Throw away most of your prototypes Design iterations around user needs and feedback mitigates major risks to a successful launch or redesignSaturday, March 31, 2012
  21. 21. Thank You! Questions and Discussion Hong Qu twitter: @hquSaturday, March 31, 2012

×