rapid prototype the user experience
DESCRIPTION
why, what, who, when, how to rapid prototypeTRANSCRIPT
Rapid Prototyping the User Experience
General AssemblyUnderstanding User Experience Workshop
April 1, 2012
Hong Qu @hqu
Saturday, March 31, 2012
ContentsIntroduction 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
Saturday, March 31, 2012
From Idea to Launch in 6 weeksProduct and UX lead for www.upworthy.com
Project management
Brainstorm
Implement
Draw sitemap
Wireframe
Design
Build prototypes
Code
QA
Launch
Saturday, March 31, 2012
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
User Centered Design
http://gudmail.blogspot.com/2007/12/user-centered-design-process-ucd.html
Saturday, March 31, 2012
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
When to Prototype?
UX Process in stages
http://bit.ly/qkFf1K
Saturday, March 31, 2012
https://www.youtube.com/watch?v=qDK1ZAUaMWwSaturday, March 31, 2012
Who builds prototypes?
Anyone candraw 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
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
Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems
Saturday, March 31, 2012
How to PrototypeStart 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
Saturday, March 31, 2012
Saturday, March 31, 2012
Case study YouTube Quicklisthttp://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
Saturday, March 31, 2012
Software Tools
gomockingbird.com
http://keynotopia.com/
balsamiq.com
omnigraffle
Axure
Saturday, March 31, 2012
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
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
Thank You!
Questions and Discussion
Hong Qu twitter: @hqu
Saturday, March 31, 2012