1. Rapid Prototyping the
User Experience
General Assembly
Understanding User Experience Workshop
April 1, 2012
Hong Qu @hqu
Saturday, March 31, 2012
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
Conclusion
Saturday, March 31, 2012
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
Launch
Saturday, March 31, 2012
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 results
Saturday, March 31, 2012
6. User Centered Design
http://gudmail.blogspot.com/2007/12/user-centered-design-process-ucd.html
Saturday, March 31, 2012
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 PRODUCT
Saturday, March 31, 2012
8. When to Prototype?
UX Process in stages
http://bit.ly/qkFf1K
Saturday, March 31, 2012
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/Jquery
Saturday, March 31, 2012
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.html
Saturday, March 31, 2012
12. Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems
Saturday, March 31, 2012
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
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 users
Saturday, March 31, 2012
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 Krug
Saturday, March 31, 2012
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 redesign
Saturday, March 31, 2012
21. Thank You!
Questions and Discussion
Hong Qu
twitter: @hqu
Saturday, March 31, 2012
