Rapid Prototyping: Rough to Ready

Lean UX is a new standard for web designers. How can you keep up and ahead? Learn the best processes and most helpful tools for rapid prototyping, whether you're in-house, freelance, or running a startup. See examples of paper, vector, bitmap, and html prototypes and learn when each is appropriate. Understand how they fit into an agile development process or a typical waterfall flow. We'll talk about mobile-first strategies, and responsive frameworks, and how they help prototypes. And we'll unpack the team dynamics and collaborative tools that make all this user research and discussion productive. You'll leave with a full list of resources and tips to start rapid prototyping and make your projects better, faster.

Presented at the Future of Web Design conference at New World Stages in New York City, October 23rd 2012.

Full list of resources at http://bit.ly/rapid-prototyping

Transcript

1. RAPID PROTOTYPING ROUGH TO READY @ericaheinz
2. “ RALPH WALDO EMERSON Don't be too timid or squeamish about your actions. All life is an experiment. The more experiments you make, the better.”
3. PROTOTYPES what are we talking about?
4. SKETCHES ON PAPER
5. SKETCHES IN SOFTWARE
6. POLISHED MOCKUPS
7. WORKING WEBSITES
8. FAST NON-PRECIOUS INTERACTIVE PROTOTYPES
9. TODAY 1.benefits of prototyping 2.categories and examples 3.process for prototyping 4.tricky bits
10. LATER http://bit.ly/rapid-prototyping @ericaheinz
11. WHY PROTOTYPE don’t waste time
12. GET FEEDBACK even though you don’t want any more
13. usertesting.com
14. “ The problems that plague organizations, or hold them back from greatness, are often small things that happen to be consistently overlooked.” SCOTT BERKUN, “DOES SIZE MATTER FOR IDEAS?”, HBR, VIA FRANCISCO INCHAUSTE, DISTANCE 02
15. ART PROJECTS DESIGN PROJECTS BRAIN, DESIGNED BY SAMUEL DION-GIRARDEAU, FROM THE NOUN PROJECT GLOBE, DESIGNED BY PROLETKULT GRAPHIK, FROM THE NOUN PROJECT
16. “We should embrace the subjective nature of what we do and allow for the multiplicity of responses to thrive, because the mixed pool represents the diversity of human perspective. That diversity fortifies us, makes us strong.” FRANK CHIMERO, THE SHAPE OF DESIGN
17. GET FEEDBACK it’s like cheating, but fair THE RIGHT
18. ➡ PROBLEM INTERVIEWS ★ WHAT DOES OUR COMMUNITY NEED? QUALITATIVE ➡ CONCEPT TESTING ★ HOW IS OUR DESIGN PERCEIVED? ➡ USABILITY TESTING ★ HOW ARE THESE FEATURES WORKING? ➡ SOLUTION INTERVIEWS ★ ARE WE SATISFYING CUSTOMERS’ NEEDS?
19. ➡ USER SURVEYS ★ WHAT ARE OUR USERS’ PRIORITIES? QUANTITATIVE ➡ ANALYTICS TRACKING ★ WHAT ARE THEY ACTUALLY DOING? ➡ A/B TESTING ★ WHICH LAYOUT IS “BETTER”? ➡ “AARRR” METRICS ★ IS OUR PROJECT SUSTAINABLE?
20. INFORMED ITERATION
21. REDUCE COMPLEXITY internetting is hard
22. infographic by @hyperakt
24. “Design is a path-dependent process… Our early design decisions are like bets whose outcome we will have to live with iteration after iteration.” RYAN SINGER, OF 37SIGNALS, ON QUORA.COM
25. SAVE TIME work simple
29. “ Whatever time we spend on prototyping, we typically save [clients] three to four fold on the backend.” TODD ZAKI WARFEL, AUTHOR OF “PROTOTYPING: A PRACTITIONER’S GUIDE”, SPEAKING AT BIG SPACESHIP
30. FIND YOUR BEST FEATURES learn to let go
33. skimming searching reading judging escaping acquiring protesting connecting wandering flirting recording planning listening
34. DESIGN VERBS NOT NOUNS
35. DESIGN BEHAVIORS NOT OBJECTS
36. DESIGN FLOWS NOT PAGES
37. OUR MEDIUM IS THROWAWAY
38. OUR IMPACT IS CULTURAL
39. PROTOTYPE TYPES where to begin
40. @adaptivepath
41. PAPER PROTOTYPES answer: what goes on the page good for: teams, open thinking requires: co-location, chutzpah
42. http://v4.jasonsantamaria.com/articles/pretty-sketchy
47. http://www.msimpsondesigns.com/interaction/panda.html
49. Jason Robb: http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/
50. PAPER PROTOTYPES attachment level: low benefits: fun, super fast, approachable drawbacks: slow cut-and-paste, no remote access
52. VECTOR PROTOTYPES answer: how flows fit together good for: teams, some clients, text-heavy layouts require: layout skills and programs
54. HOME (GUEST) value props press marketing promo LOG IN HOME (USER) featured items marketing promo followed items SIGN UP FOLLOWING grid/list of items price changes coupons? MARKETING LANDING contest etc ABOUT US CATEGORY PG CATEGORY PG CATEGORY PG best sellers CATEGORY PG CATEGORY PG SUBCATEGORY best sellers CATEGORY PG CATEGORY PG PRODUCT robot verdict price history news feed related items SHOPOBOT.COM REQUIRES LOGIN TRADING POST items friends have items i want items friends want items i have follow USER'S GOOGLE READER subscribe USER'S FACEBOOK WALL USER'S TWITTER FEED ASSETS my stuff current value future value friends wants INTERESTS grid of categories SETTINGS password email prefs SEARCH SEARCH RESULTS OTHER EXPOSURES HEADER LINKS available from any page CATEGORY PG CATEGORY PG PRODUCT V2 robot verdict price history news feed related items item options future value share on FB? tweet? Add to wish list CATEGORY PG CATEGORY PG BLOG contests data analysis
55. List Title List blurb LIST TITLE Mark the ones you've read! Done FACEBOOK AD BOOKVILLE LIST DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE SHARE CLICK Gain: X books Gain: 1 post List Title List blurb LIST TITLE Mark the ones you've read! Done FACEBOOK AD BOOKVILLE LIST DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE CANCEL CLICK Gain: X books LIST TITLE — CONFIRMED! Thanks for sharing. Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED + SHARED BOOKVILLE WOULD LIKE PERMISSION TO: Access the following required information: • Your likes • Friends' likes Access my custom friend lists Allow Cancel FACEBOOK AUTH YOUR NAME Your books Your friends' books Invite more friends! BOOKVILLE PROFILE OK ALLOW 2. Ad clicker, checklist completer, non sharer 4. Ad clicker, checklist completer, score sharer LIST TITLE — DONE Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED BOOKVILLE WOULD LIKE PERMISSION TO: Access the following required information: • Your likes • Friends' likes Access my custom friend lists Allow Cancel FACEBOOK AUTH YOUR NAME Your books Your friends' books Invite more friends! BOOKVILLE PROFILE OK ALLOW Gain: 1 user Gain: 1 user INVITE FRIENDS INVITE Gain: Y invites SEND INVITE FRIENDS INVITE Gain: Y invites SEND 3. Wall post clicker, checklist completer, score sharer Friend's Comment List Title List blurb FB WALL POST LIST TITLE Mark the ones you've read! Done Your friends who have done this: BOOKVILLE LIST FRIENDLY Gain: X books DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE SHARE Gain: 1 post LIST TITLE — CONFIRMED! Thanks for sharing. Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED + SHARED
60. VECTOR PROTOTYPES attachment level: low benefits: symbol libraries, clickable if needed drawbacks: left-brained
62. BITMAP PROTOTYPES answer: how things feel good for: investors, clients, testers, designers require: design skills and programs
71. BITMAP PROTOTYPES attachment level: moderate benefits: crystal clear, familiar drawbacks: kind of precious, maintenance is a pain
73. HTML PROTOTYPES answer: how things work good for: team, testers, some clients, programmers require: front-end coding, maybe back-end
75. http://bit.ly/RiffleFOWD
76. Hello, world!
77. don’t repeat yourself CLIPS
80. @chriscoyier
82. integrated systems FRAMEWORKS
87. with data and stuff FRAMEWORKS
90. “GITHUB IS THE NEW VIEW SOURCE”
93. HTML PROTOTYPES attachment level: moderate benefits: clicks, hovers, gifs!, tested, responsive drawbacks: left-brained, preformatted
95. BE PRACTICAL ★ WHAT ARE YOUR SKILLS? ★ WHO’S THE AUDIENCE? ★ WHAT’S THE NICHE? ★ WHAT’S THE BUDGET?
97. PROCESS stay sane
98. TRADITIONAL DESIGN PROCESS
99. discovery ↓ direction ↓ design ↓ development
100. discovery ↓ direction ↓ design ↓ development ➡ research ➡ concepts ➡ IA, UX, UI ➡ code
101. discovery ↓ direction ↓ design ↓ development ➡ research ➡ concepts ➡ IA, UX, UI ➡ code ➡ $ ➡ $ ➡ $ ➡ $
102. AGILE PROCESS
104. think ↓ make ↓ check
105. think ↓ make ↓ check ➡ hypothesis ➡ prototype ➡ validation
106. think ↓ make ↓ check ➡ hypothesis ➡ prototype ➡ validation each two-week sprint
107. think ↓ make ↓ check ➡ hypothesis ➡ prototype ➡ validation each two-week sprint ➡ $
108. http://www.agileproductdesign.com/blog/2009/kanban_over_simplified.html
111. SPIKE-DRIVEN DESIGN @jonathanpberger short investigation goal is learning code must be thrown away
112. SPIKE-DRIVEN DESIGN branch github ➡ hack code ➡ screenshot to sketch ➡ cherry-pick commits http://pivotallabs.com/users/jonathanpberger/blog/articles/2349-spike-driven-design
113. LEAN UX agile experience design
114. http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/ STARTUP MODEL
115. http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/ AGENCY MODEL
116. M review research SAMPLE SCHEDULE T brainstorm W prioritize tasks T sketch prototype F review sketch M code prototype T review code W polish design T QA & launch F user testing flex week
117. ACTUALLY LOOKS MORE LIKE Review RESEARCH DESIGN DEV Check-in RESEARCH DESIGN DEV Check-in RESEARCH DESIGN DEV Review
118. UI UX
119. M review research SAMPLE SCHEDULE T brainstorm W prioritize tasks T sketch prototype F review sketch M code prototype T review code W polish design T QA & launch F user testing flex week
120. UI UX
121. CHALLENGES i mean opportunities
122. “Checking too often with someone else —pausing for feedback with each bit of output—can inhibit or confuse us.” SUSAN CAIN “DOES ARTISTIC COLLABORATION EVER WORK?” THEATLANTIC.COM
123. Judging. So much judging. @rameadows
124. RESPECT!
125. “I can’t even see what’s good anymore.” David Bowie as Andy Warhol in Basquiat
126. QUIET!
127. I miss my Adobe products.
128. LET GO!
129. TEST IT OUT
130. http://bit.ly/rapid-prototyping @ericaheinz @FOWD