Rapid Prototyping: Rough to Ready

460aa51706c4ad81c8d63ad7c27cdbbd?s=47 Erica Heinz
October 23, 2012

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

460aa51706c4ad81c8d63ad7c27cdbbd?s=128

Erica Heinz

October 23, 2012
Tweet

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

  23. None
  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

  26. None
  27. None
  28. None
  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

  31. None
  32. None
  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

  43. None
  44. None
  45. None
  46. None
  47. http://www.msimpsondesigns.com/interaction/panda.html

  48. None
  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
  51. None
  52. VECTOR PROTOTYPES answer: how flows fit together good for: teams,

    some clients, text-heavy layouts require: layout skills and programs
  53. None
  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
  56. None
  57. None
  58. None
  59. None
  60. VECTOR PROTOTYPES attachment level: low benefits: symbol libraries, clickable if

    needed drawbacks: left-brained
  61. None
  62. BITMAP PROTOTYPES answer: how things feel good for: investors, clients,

    testers, designers require: design skills and programs
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. BITMAP PROTOTYPES attachment level: moderate benefits: crystal clear, familiar drawbacks:

    kind of precious, maintenance is a pain
  72. None
  73. HTML PROTOTYPES answer: how things work good for: team, testers,

    some clients, programmers require: front-end coding, maybe back-end
  74. None
  75. http://bit.ly/RiffleFOWD

  76. Hello, world!

  77. don’t repeat yourself CLIPS

  78. None
  79. None
  80. @chriscoyier

  81. None
  82. integrated systems FRAMEWORKS

  83. None
  84. None
  85. None
  86. None
  87. with data and stuff FRAMEWORKS

  88. None
  89. None
  90. “GITHUB IS THE NEW VIEW SOURCE”

  91. None
  92. None
  93. HTML PROTOTYPES attachment level: moderate benefits: clicks, hovers, gifs!, tested,

    responsive drawbacks: left-brained, preformatted
  94. None
  95. BE PRACTICAL ★ WHAT ARE YOUR SKILLS? ★ WHO’S THE

    AUDIENCE? ★ WHAT’S THE NICHE? ★ WHAT’S THE BUDGET?
  96. None
  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

  103. None
  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

  109. None
  110. None
  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