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