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.

624f67643bdf37b458085aee294c870d?s=128

Craig Abbott

July 19, 2017
Tweet

Transcript

  1. @abbott567 Craig Abbott

  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
  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
  4. What is a prototype? @abbott567

  5. What is a prototype not? @abbott567

  6. @abbott567 A prototype is not a wireframe

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

    30px 30px 40px 20px 40px 20px 50px 30px
  8. A prototype is not the final product !important @abbott567

  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
  10. @abbott567

  11. prototype noun something you literally throw together to research if

    your idea sucks or not. @abbott567
  12. Why do we use prototypes? @abbott567

  13. Tell me and I’ll forget Show me and I may

    remember Involve me and I’ll understand @abbott567
  14. As a designer, I use prototypes to understand if my

    design is meeting the needs of the people that use it @abbott567
  15. Prototypes add value to user research @abbott567

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

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

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

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

  20. @abbott567

  21. @abbott567

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

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

  24. Failure is simply the opportunity to begin again. @abbott567 This

    time, more intelligently. ~ Henry Ford
  25. Research early. Research often. @abbott567

  26. Good design is a process You’ll always find things that

    don’t work before you find things that do. @abbott567
  27. I have not failed, I’ve just found 10,000 ways that

    won’t work. ~ Thomas Edison @abbott567
  28. A good design solution @abbott567 Time My hypothesis

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

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

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

    design solution First idea Time
  32. @abbott567 “Keep going.” @BenHolliday Design Director, @FutureGov

  33. It’s better to fail often and learn from it, than

    to do no research at all @abbott567
  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
  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
  36. A prototype won’t tell you how pretty your design is,

    but it will tell you if it meets the user need @abbott567
  37. Prototyping fails @abbott567 …some mistakes I’ve made

  38. Start with user needs @abbott567

  39. Don’t ask users what they think of your prototype. Watch

    them use it… …and probably struggle. @abbott567
  40. @abbott567 Don’t make your prototype too complex

  41. @abbott567 Keep your prototype focussed

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

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

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

  45. @abbott567 Paper prototypes

  46. @abbott567

  47. @abbott567

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

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

  50. @abbott567 Video credit: BlueDuckLabs

  51. @abbott567 Paper prototypes Pros • Cheap • Fast • Fun

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

    Notes • No specialist skills • Unrealistic • Unwanted feedback • Relies on imagination Pros Cons
  53. @abbott567 Digital prototypes

  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
  55. @abbott567 https://github.com/abbott567/sketch_wireframing_kit

  56. @abbott567

  57. @abbott567 http://invisionapp.com

  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
  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
  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
  61. @abbott567 Digital prototypes • Can be cheap • Realistic looking

    • Interactive (sort of) • Creative Pros
  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
  63. @abbott567 Real code prototypes

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

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

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

    production
  67. @abbott567 First name cannot be blank Check the following There’s

    been a problem
  68. @abbott567 Accessibility #A11y

  69. @abbott567

  70. @abbott567

  71. @abbott567 Real code prototypes • Cheap • Reusable in production

    • Interactive • Multiple devices • Accessibility testing • Validation • Realistic Pros
  72. @abbott567 Real code prototypes • Learning curve • May need

    a framework • Cheap • Reusable in production • Interactive • Multiple devices • Accessibility testing • Validation • Realistic Pros Cons
  73. @abbott567 Tools you can use to prototype FREE that isn’t

    enterprise software ,
  74. @abbott567 https://uxtools.co/tools/prototyping

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

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

  77. @abbott567 http://invisionapp.com

  78. @abbott567 http://getbootstrap.com

  79. @abbott567 http://getbootstrap.com

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

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

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

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

  84. @abbott567

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

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

  87. @abbott567 https://wesbos.com

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

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

    ~ Yoda
  90. “A prototype is worth 1000 meetings.” @abbott567 Mike Davidson @mikeindustries

    ex VP of design @twitter
  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