rapid prototype the user experience

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