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
   

   View Slide

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.”
   

   View Slide

3. PROTOTYPES
   what are we talking about?
   

   View Slide

4. SKETCHES ON PAPER
   

   View Slide

5. SKETCHES IN SOFTWARE
   

   View Slide

6. POLISHED MOCKUPS
   

   View Slide

7. WORKING WEBSITES
   

   View Slide

8. FAST
   NON-PRECIOUS
   INTERACTIVE
   PROTOTYPES
   

   View Slide

9. TODAY
   1.benefits of prototyping
   2.categories and examples
   3.process for prototyping
   4.tricky bits
   

   View Slide

10. LATER
    http://bit.ly/rapid-prototyping
    @ericaheinz
    

    View Slide

11. WHY PROTOTYPE
    don’t waste time
    

    View Slide

12. GET FEEDBACK
    even though you don’t want any more
    

    View Slide

13. usertesting.com
    

    View Slide

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
    

    View Slide

15. ART
    PROJECTS
    DESIGN
    PROJECTS
    BRAIN, DESIGNED BY SAMUEL DION-GIRARDEAU, FROM THE NOUN PROJECT GLOBE, DESIGNED BY PROLETKULT GRAPHIK, FROM THE NOUN PROJECT
    

    View Slide

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
    

    View Slide

17. GET FEEDBACK
    it’s like cheating, but fair
    THE RIGHT
    

    View Slide

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?
    

    View Slide

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?
    

    View Slide

20. INFORMED
    ITERATION
    

    View Slide

21. REDUCE
    COMPLEXITY
    internetting is hard
    

    View Slide

22. infographic by @hyperakt
    

    View Slide

23. View Slide

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
    

    View Slide

25. SAVE TIME
    work simple
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

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
    

    View Slide

30. FIND YOUR
    BEST FEATURES
    learn to let go
    

    View Slide

31. View Slide

32. View Slide

33. skimming
    searching
    reading
    judging
    escaping
    acquiring
    protesting
    connecting
    wandering
    flirting
    recording
    planning
    listening
    

    View Slide

34. DESIGN
    VERBS NOT NOUNS
    

    View Slide

35. DESIGN
    BEHAVIORS NOT OBJECTS
    

    View Slide

36. DESIGN
    FLOWS NOT PAGES
    

    View Slide

37. OUR MEDIUM
    IS THROWAWAY
    

    View Slide

38. OUR IMPACT
    IS CULTURAL
    

    View Slide

39. PROTOTYPE TYPES
    where to begin
    

    View Slide

40. @adaptivepath
    

    View Slide

41. PAPER PROTOTYPES
    answer:
    what goes on the page
    good for:
    teams, open thinking
    requires:
    co-location, chutzpah
    

    View Slide

42. http://v4.jasonsantamaria.com/articles/pretty-sketchy
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. http://www.msimpsondesigns.com/interaction/panda.html
    

    View Slide

48. View Slide

49. Jason Robb: http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/
    

    View Slide

50. PAPER PROTOTYPES
    attachment level:
    low
    benefits:
    fun, super fast, approachable
    drawbacks:
    slow cut-and-paste, no remote access
    

    View Slide

51. View Slide

52. VECTOR PROTOTYPES
    answer:
    how flows fit together
    good for:
    teams, some clients, text-heavy layouts
    require:
    layout skills and programs
    

    View Slide

53. View Slide

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
    

    View Slide

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
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. VECTOR PROTOTYPES
    attachment level:
    low
    benefits:
    symbol libraries, clickable if needed
    drawbacks:
    left-brained
    

    View Slide

61. View Slide

62. BITMAP PROTOTYPES
    answer:
    how things feel
    good for:
    investors, clients, testers, designers
    require:
    design skills and programs
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. BITMAP PROTOTYPES
    attachment level:
    moderate
    benefits:
    crystal clear, familiar
    drawbacks:
    kind of precious, maintenance is a pain
    

    View Slide

72. View Slide

73. HTML PROTOTYPES
    answer:
    how things work
    good for:
    team, testers, some clients, programmers
    require:
    front-end coding, maybe back-end
    

    View Slide

74. View Slide

75. http://bit.ly/RiffleFOWD
    

    View Slide

76. Hello, world!
    

    View Slide

77. don’t repeat yourself
    CLIPS
    

    View Slide

78. View Slide

79. View Slide

80. @chriscoyier
    

    View Slide

81. View Slide

82. integrated systems
    FRAMEWORKS
    

    View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

87. with data and stuff
    FRAMEWORKS
    

    View Slide

88. View Slide

89. View Slide

90. “GITHUB IS THE NEW
    VIEW SOURCE”
    

    View Slide

91. View Slide

92. View Slide

93. HTML PROTOTYPES
    attachment level:
    moderate
    benefits:
    clicks, hovers, gifs!, tested, responsive
    drawbacks:
    left-brained, preformatted
    

    View Slide

94. View Slide

95. BE PRACTICAL
    ★ WHAT ARE YOUR SKILLS?
    ★ WHO’S THE AUDIENCE?
    ★ WHAT’S THE NICHE?
    ★ WHAT’S THE BUDGET?
    

    View Slide

96. View Slide

97. PROCESS
    stay sane
    

    View Slide

98. TRADITIONAL
    DESIGN PROCESS
    

    View Slide

99. discovery
    ↓
    direction
    ↓
    design
    ↓
    development
    

    View Slide

100. discovery
     ↓
     direction
     ↓
     design
     ↓
     development
     ➡ research
     ➡ concepts
     ➡ IA, UX, UI
     ➡ code
     

     View Slide

101. discovery
     ↓
     direction
     ↓
     design
     ↓
     development
     ➡ research
     ➡ concepts
     ➡ IA, UX, UI
     ➡ code
     ➡ $
     ➡ $
     ➡ $
     ➡ $
     

     View Slide

102. AGILE PROCESS
     

     View Slide

103. View Slide

104. think
     ↓
     make
     ↓
     check
     

     View Slide

105. think
     ↓
     make
     ↓
     check
     ➡ hypothesis
     ➡ prototype
     ➡ validation
     

     View Slide

106. think
     ↓
     make
     ↓
     check
     ➡ hypothesis
     ➡ prototype
     ➡ validation
     each two-week sprint
     

     View Slide

107. think
     ↓
     make
     ↓
     check
     ➡ hypothesis
     ➡ prototype
     ➡ validation
     each two-week sprint ➡ $
     

     View Slide

108. http://www.agileproductdesign.com/blog/2009/kanban_over_simplified.html
     

     View Slide

109. View Slide

110. View Slide

111. SPIKE-DRIVEN DESIGN
     @jonathanpberger
     short investigation
     goal is learning
     code must be thrown away
     

     View Slide

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
     

     View Slide

113. LEAN UX
     agile experience design
     

     View Slide

114. http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
     STARTUP MODEL
     

     View Slide

115. http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
     AGENCY MODEL
     

     View Slide

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
     

     View Slide

117. ACTUALLY LOOKS MORE LIKE
     Review
     RESEARCH
     DESIGN
     DEV
     Check-in
     RESEARCH
     DESIGN
     DEV
     Check-in
     RESEARCH
     DESIGN
     DEV
     Review
     

     View Slide

118. UI UX
     

     View Slide

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
     

     View Slide

120. UI UX
     

     View Slide

121. CHALLENGES
     i mean opportunities
     

     View Slide

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
     

     View Slide

123. Judging.
     So much
     judging.
     @rameadows
     

     View Slide

124. RESPECT!
     

     View Slide

125. “I can’t
     even see
     what’s good
     anymore.”
     David Bowie
     as Andy Warhol
     in Basquiat
     

     View Slide

126. QUIET!
     

     View Slide

127. I miss
     my Adobe
     products.
     

     View Slide

128. LET GO!
     

     View Slide

129. TEST IT OUT
     

     View Slide

130. http://bit.ly/rapid-prototyping
     @ericaheinz
     @FOWD
     

     View Slide