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

Prototyping with purpose

Prototyping with purpose

A talk about what prototypes are, why we use them, and how to avoid some common mistakes. Techniques and resources you can use, along with some working examples so you can build a prototype of your own.

This talk was delivered at:
- DXN Nottingham on 10 October 2018.
- NUX Manchester on 4 June 2018.
- Generator UX Conference on 17 January 2018.
- NUX Newcastle on 28 September 2017.
- Sunderland Digital on 19 July 2017.

Craig Abbott

July 19, 2017
Tweet

More Decks by Craig Abbott

Other Decks in Design

Transcript

  1. @abbott567
    Craig Abbott

    View Slide

  2. @abbott567
    Craig Abbott
    13.6K 269 6,677 8,928
    Craig Abbott
    @abbott567
    Senior Interaction Designer at @DWPDigital.
    Lover of cats and code.
    David Attenborough is my hero.
    Newcastle upon Tyne

    View Slide

  3. What you will get from this talk
    @abbott567
    • what a prototype is
    • why we use them
    • common mistakes
    • how to make one
    • tools and resources you can use

    View Slide

  4. What is a prototype?
    @abbott567

    View Slide

  5. What is a prototype not?
    @abbott567

    View Slide

  6. @abbott567
    A prototype
    is not a
    wireframe

    View Slide

  7. A prototype
    is not always
    high fidelity
    @abbott567
    50px
    30px
    30px
    30px
    40px
    20px
    40px
    20px
    50px
    30px

    View Slide

  8. A prototype is not
    the final product
    !important
    @abbott567

    View Slide

  9. prototype
    noun
    a first or preliminary version of a
    device or vehicle from which other
    forms are developed.
    https://www.google.co.uk/search?q=define+prototype
    @abbott567

    View Slide

  10. @abbott567

    View Slide

  11. prototype
    noun
    something you literally throw
    together to research if your idea
    sucks or not.
    @abbott567

    View Slide

  12. Why do we use prototypes?
    @abbott567

    View Slide

  13. Tell me and I’ll forget
    Show me and I may remember
    Involve me and I’ll understand
    @abbott567

    View Slide

  14. As a designer,
    I use prototypes to
    understand if my design is
    meeting the needs of
    the people that use it
    @abbott567

    View Slide

  15. Prototypes add value to
    user research
    @abbott567

    View Slide

  16. Product development
    costs money…
    …lots of money
    @abbott567

    View Slide

  17. A prototype should
    be quick, dirty and
    disposable
    @abbott567

    View Slide

  18. @abbott567
    https://github.com/gunjam/booking-frontend

    View Slide

  19. @abbott567
    https://github.com/abbott567/booking-pi-frontend

    View Slide

  20. @abbott567

    View Slide

  21. @abbott567

    View Slide

  22. @abbott567
    https://github.com/abbott567/booking-pi-frontend

    View Slide

  23. @abbott567
    https://github.com/abbott567/raspberry-pi-kiosk

    View Slide

  24. Failure is simply the
    opportunity to begin again.
    @abbott567
    This time, more intelligently.
    ~ Henry Ford

    View Slide

  25. Research early.
    Research often.
    @abbott567

    View Slide

  26. Good design is a process
    You’ll always find things that don’t work
    before you find things that do.
    @abbott567

    View Slide

  27. I have not failed,
    I’ve just found 10,000
    ways that won’t work.
    ~ Thomas Edison
    @abbott567

    View Slide

  28. A good design
    solution
    @abbott567
    Time
    My
    hypothesis

    View Slide

  29. @abbott567
    New
    hypothesis
    A good design
    solution
    First
    idea
    Time

    View Slide

  30. @abbott567
    Pretty bad
    idea
    New
    hypothesis
    A good design
    solution
    First
    idea
    Time

    View Slide

  31. @abbott567
    Meh, idea
    Pretty bad
    idea
    New
    hypothesis
    A good design
    solution
    First
    idea
    Time

    View Slide

  32. @abbott567
    “Keep going.”
    @BenHolliday
    Design Director, @FutureGov

    View Slide

  33. It’s better to fail often and
    learn from it, than to do no
    research at all
    @abbott567

    View Slide

  34. James Dyson
    I made 5,127 prototypes of my
    vacuum before I got it right.
    But I learned from each one.
    That’s how I came up with a
    solution.
    Inventor of cyclonic vacuum technology
    @abbott567

    View Slide

  35. It’s about being able to create
    just enough of a prototype to
    help the wider team learn about
    user needs for a given scenario
    @abbott567

    View Slide

  36. A prototype won’t tell you
    how pretty your design is,
    but it will tell you if it meets the user need
    @abbott567

    View Slide

  37. Prototyping fails
    @abbott567
    …some mistakes I’ve made

    View Slide

  38. Start with user needs
    @abbott567

    View Slide

  39. Don’t ask users what they
    think of your prototype.
    Watch them use it…
    …and probably struggle.
    @abbott567

    View Slide

  40. @abbott567
    Don’t make your
    prototype too
    complex

    View Slide

  41. @abbott567
    Keep your prototype
    focussed

    View Slide

  42. @abbott567
    Keep dynamic data
    to a minimum
    Hard code and cookies > databases

    View Slide

  43. A prototype doesn’t
    have to be perfect
    @abbott567

    View Slide

  44. @abbott567
    Let’s build
    ALL OF THE THINGS!

    View Slide

  45. @abbott567
    Paper prototypes

    View Slide

  46. @abbott567

    View Slide

  47. @abbott567

    View Slide

  48. @abbott567
    https://abtt.co/paper-prototyping-toolkit

    View Slide

  49. @abbott567
    Photo credit: Paul Downey Photo credit: Richard Pope

    View Slide

  50. @abbott567
    Video credit: BlueDuckLabs

    View Slide

  51. @abbott567
    Paper prototypes
    Pros
    • Cheap
    • Fast
    • Fun
    • Notes
    • No specialist skills

    View Slide

  52. @abbott567
    Paper prototypes
    • Cheap
    • Fast
    • Fun
    • Notes
    • No specialist skills
    • Unrealistic
    • Unwanted feedback
    • Relies on imagination
    Pros Cons

    View Slide

  53. @abbott567
    Digital prototypes

    View Slide

  54. © Crown copyright
    All content is available under the Open Government Licence v3.0, except where otherwise stated
    ALPHA This is a new service – your feedback will help us to improve it.
    GOV.UK
    Phone number
    Phone call
    Text message
    Email
    Choose as many as you like
    How would you like to be
    contacted?
    Continue
    @abbott567

    View Slide

  55. @abbott567
    https://github.com/abbott567/sketch_wireframing_kit

    View Slide

  56. @abbott567

    View Slide

  57. @abbott567
    http://invisionapp.com

    View Slide

  58. @abbott567
    © Crown copyright
    All content is available under the Open Government Licence v3.0, except where otherwise stated
    ALPHA This is a new service – your feedback will help us to improve it.
    GOV.UK
    Phone call
    Text message
    Email
    Choose as many as you like
    How would you like to be
    contacted?
    Continue

    View Slide

  59. @abbott567
    © Crown copyright
    All content is available under the Open Government Licence v3.0, except where otherwise stated
    ALPHA This is a new service – your feedback will help us to improve it.
    GOV.UK
    Phone call
    Text message
    Email
    Choose as many as you like
    How would you like to be
    contacted?
    Continue
    © Crown copyright
    All content is available under the Open Government Licence v3.0, except where otherwise stated
    ALPHA This is a new service – your feedback will help us to improve it.
    GOV.UK
    Email address
    Email
    Text message
    Phone call
    Choose as many as you like
    How would you like to be
    contacted?
    Continue

    View Slide

  60. © Crown copyright
    All content is available under the Open Government Licence v3.0, except where otherwise stated
    ALPHA This is a new service – your feedback will help us to improve it.
    GOV.UK
    Phone call
    Text message
    Email
    Choose as many as you like
    How would you like to be
    contacted?
    Continue
    © Crown copyright
    All content is available under the Open Government Licence v3.0, except where otherwise stated
    ALPHA This is a new service – your feedback will help us to improve it.
    GOV.UK
    Email address
    Email
    Text message
    Phone call
    Choose as many as you like
    How would you like to be
    contacted?
    Continue
    All content is available under the Open Government Licence v3.0, except where otherwise stated
    ALPHA This is a new service – your feedback will help us to improve it.
    GOV.UK
    Phone number
    Phone call
    Text message
    Email
    Choose as many as you like
    How would you like to be
    contacted?
    Continue
    @abbott567

    View Slide

  61. @abbott567
    Digital prototypes
    • Can be cheap
    • Realistic looking
    • Interactive (sort of)
    • Creative
    Pros

    View Slide

  62. @abbott567
    Digital prototypes
    • Can be cheap
    • Realistic looking
    • Interactive (sort of)
    • Creative
    • Can be expensive
    • Can be time consuming
    • Duplicate effort to code
    • Interactions are limited
    • Learning more software
    Pros Cons

    View Slide

  63. @abbott567
    Real code prototypes

    View Slide

  64. @abbott567
    http://gov.uk … or is it?

    View Slide

  65. @abbott567
    Real code prototypes work on:
    desktop, mobile
    or tablet

    View Slide

  66. @abbott567
    Parts of real code
    prototypes can be
    used in production

    View Slide

  67. @abbott567
    First name cannot be blank
    Check the following
    There’s been a problem

    View Slide

  68. @abbott567
    Accessibility
    #A11y

    View Slide

  69. @abbott567

    View Slide

  70. @abbott567

    View Slide

  71. @abbott567
    Real code prototypes
    • Cheap
    • Reusable in production
    • Interactive
    • Multiple devices
    • Accessibility testing
    • Validation
    • Realistic
    Pros

    View Slide

  72. @abbott567
    Real code prototypes
    • Learning curve
    • May need a framework
    • Cheap
    • Reusable in production
    • Interactive
    • Multiple devices
    • Accessibility testing
    • Validation
    • Realistic
    Pros Cons

    View Slide

  73. @abbott567
    Tools you can use to
    prototype
    FREE
    that isn’t enterprise software
    ,

    View Slide

  74. @abbott567
    https://uxtools.co/tools/prototyping

    View Slide

  75. @abbott567
    Sheldon Cooper
    http://instagram.com/abbott567

    View Slide

  76. @abbott567
    http://www.justinmind.com

    View Slide

  77. @abbott567
    http://invisionapp.com

    View Slide

  78. @abbott567
    http://getbootstrap.com

    View Slide

  79. @abbott567
    http://getbootstrap.com

    View Slide

  80. @abbott567
    https://github.com/alphagov/govuk_prototype_kit

    View Slide

  81. @abbott567
    http://govuk-elements.herokuapp.com

    View Slide

  82. @abbott567
    https://github.com/abbott567/prototype-example

    View Slide

  83. @abbott567
    https://github.com/abbott567/prototype-example @abbott567
    https://github.com/abbott567/prototype-example

    View Slide

  84. @abbott567

    View Slide

  85. @abbott567
    Up-skill yourself
    It’s never too late to start coding.

    View Slide

  86. @abbott567
    https://www.codecademy.com

    View Slide

  87. @abbott567
    https://wesbos.com

    View Slide

  88. @abbott567
    Ask for help
    Pester front-end developers

    View Slide

  89. “ ”
    @abbott567
    Pass on what
    what you have learned
    ~ Yoda

    View Slide

  90. “A prototype is worth
    1000 meetings.”
    @abbott567
    Mike Davidson
    @mikeindustries
    ex VP of design @twitter

    View Slide

  91. KTHXBAI
    Twitter: @abbott567
    Email: [email protected]
    Paper prototyping video: http://abtt.co/paper-prototype-research
    Paper prototyping tools: https://abtt.co/paper-prototyping-toolkit
    GOVUK prototyping kit: http://abtt.co/govuk-prototyping-kit
    Free prototyping tools: https://uxtools.co/tools/prototyping
    Raspberry Pi Kiosk: http://abtt.co/raspberry-pi-kiosk

    View Slide