Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rapid Prototyping: Rough to Ready

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

Erica Heinz

October 23, 2012
Tweet

Other Decks in Design

Transcript

  1. RAPID PROTOTYPING
    ROUGH TO READY
    @ericaheinz

    View full-size 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 full-size slide

  3. PROTOTYPES
    what are we talking about?

    View full-size slide

  4. SKETCHES ON PAPER

    View full-size slide

  5. SKETCHES IN SOFTWARE

    View full-size slide

  6. POLISHED MOCKUPS

    View full-size slide

  7. WORKING WEBSITES

    View full-size slide

  8. FAST
    NON-PRECIOUS
    INTERACTIVE
    PROTOTYPES

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. WHY PROTOTYPE
    don’t waste time

    View full-size slide

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

    View full-size slide

  13. usertesting.com

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

  20. INFORMED
    ITERATION

    View full-size slide

  21. REDUCE
    COMPLEXITY
    internetting is hard

    View full-size slide

  22. infographic by @hyperakt

    View full-size slide

  23. “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 full-size slide

  24. SAVE TIME
    work simple

    View full-size slide

  25. “ 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 full-size slide

  26. FIND YOUR
    BEST FEATURES
    learn to let go

    View full-size slide

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

    View full-size slide

  28. DESIGN
    VERBS NOT NOUNS

    View full-size slide

  29. DESIGN
    BEHAVIORS NOT OBJECTS

    View full-size slide

  30. DESIGN
    FLOWS NOT PAGES

    View full-size slide

  31. OUR MEDIUM
    IS THROWAWAY

    View full-size slide

  32. OUR IMPACT
    IS CULTURAL

    View full-size slide

  33. PROTOTYPE TYPES
    where to begin

    View full-size slide

  34. @adaptivepath

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. 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 full-size slide

  42. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. http://bit.ly/RiffleFOWD

    View full-size slide

  48. Hello, world!

    View full-size slide

  49. don’t repeat yourself
    CLIPS

    View full-size slide

  50. @chriscoyier

    View full-size slide

  51. integrated systems
    FRAMEWORKS

    View full-size slide

  52. with data and stuff
    FRAMEWORKS

    View full-size slide

  53. “GITHUB IS THE NEW
    VIEW SOURCE”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. PROCESS
    stay sane

    View full-size slide

  57. TRADITIONAL
    DESIGN PROCESS

    View full-size slide

  58. discovery

    direction

    design

    development

    View full-size slide

  59. discovery

    direction

    design

    development
    ➡ research
    ➡ concepts
    ➡ IA, UX, UI
    ➡ code

    View full-size slide

  60. discovery

    direction

    design

    development
    ➡ research
    ➡ concepts
    ➡ IA, UX, UI
    ➡ code
    ➡ $
    ➡ $
    ➡ $
    ➡ $

    View full-size slide

  61. AGILE PROCESS

    View full-size slide

  62. think

    make

    check

    View full-size slide

  63. think

    make

    check
    ➡ hypothesis
    ➡ prototype
    ➡ validation

    View full-size slide

  64. think

    make

    check
    ➡ hypothesis
    ➡ prototype
    ➡ validation
    each two-week sprint

    View full-size slide

  65. think

    make

    check
    ➡ hypothesis
    ➡ prototype
    ➡ validation
    each two-week sprint ➡ $

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. 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 full-size slide

  69. LEAN UX
    agile experience design

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. 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 full-size slide

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

    View full-size slide

  74. 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 full-size slide

  75. CHALLENGES
    i mean opportunities

    View full-size slide

  76. “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 full-size slide

  77. Judging.
    So much
    judging.
    @rameadows

    View full-size slide

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

    View full-size slide

  79. I miss
    my Adobe
    products.

    View full-size slide

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

    View full-size slide