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.

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: craig@craigabbott.co.uk
    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