Published on October 29, 2016
2. What is prototyping A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. (Wikipedia)
3. Why do we prototype? • have fun • save money • fail fast, learn fast • get approval from stakeholders • reduce risk • communicate • understand
4. Time Photo: Nick Webb, Flickr
5. Wizard of Oz Sketch-a-Move
6. All kinds of prototyping • Wizard of Oz • Paper prototypes • Concept sheets • Photo mockups • Screen mockups • Interactive prototypes • Final product mockups • Fake landing pages • Fake ads (online + offline) • Concierge service • Legos • Board-game-like toolkits • Existing products • Hacking
7. Which prototype for what purpose?
8. Are you trying to... • have fun with prototyping? • impress your teacher / customer /investor? • see if something is usable? • see if something is useful? • see if someone will pay for it? • communicate how something should be built? • ...?
9. Today we will make... • Wizard of Oz • Paper prototypes • Concept sheets • Photo mockups • Screen mockups • Interactive prototypes • Final product mockups • Fake landing pages • Fake ads (online + offline) • Concierge service • Legos • Board-game-like toolkits • Existing products • Hacking
11. Paper prototypes
12. Paper prototypes
13. Paper prototyping Comptel proto 1
14. Paper prototyping Comptel proto 2
15. Paper prototyping Comptel Final
16. Interactive Prototype Management Events (link)
17. BUILDING THE PROTOTYPE
18. Big picture first, details second
19. What should you prototype first and why? Prioritize
20. Choose your resolution: Finer lines, smaller paper
21. Choose your resolution: Thicker lines, bigger paper
22. Grids, Guides & Stencils http://www.uistencils.com/
23. Be modular!Be modular
24. Be iterative
26. Be modular!Colours
28. TESTING THE PROTOTYPE
29. Let it hurt Photo: erizof, Flickr
30. Listen Photo: erizof, Flickr
31. Planning the user test • Assign roles: interviewer, note-taker, photographer • What do you want to test? • Rough interview plan • Tasks / questions • Could you tell me what you see in this screen and what you think it means? • Could you try to do x?
32. Running the user test • Make them feel welcomed • Tell who you are • Explain user testing: why, what • “We are not testing you, but our concept” • Ask for permission to take photos. Take photos!! • Do not lead the user. Look for problems, not validation.
33. WHAT’S THE PLAN?
34. Prototyping Schedule 10:30 Sketch the flow - 15min 10:45 Sketch the (selected) screens – 1h 15min 12:00 Lunch – 30min 12:30 Make it click – 1h 13:30 Plan user testing – 15min 13:45 Test with users – 15 min 14:00 Insights from interviews – 10min 14:10 Update prototype – 40min 14:50 Break – 10min
35. 10:30 – 10:45 Sketch the flow • Draw a box or use a post-it for each screen you’ll need • Give the screen a title that describes what it does • Draw lines between the screens to show how the navigation between them goes
36. 10:45 – 12:00 Sketch the selected screens • First decide which screens are the most important to sketch! • What UI elements + layout are needed on each screen for performing the screen’s function? • Be modular; be iterative • Use guides & templates • Use drop-shadow & colours
37. 12:30 – 11:30 Make it click • How do you take photos of your screens so that the layout doesn’t jump? • Take photos of all your screens • Upload to InVision (well, create account first) • Create navigation between the screens • Test the prototype inside your team • Fix if needed
38. 13:30 – 13:45 Plan user testing • Assign roles in your team: interviewer, note-taker, photographer • What do you want to test? Overall experience & value proposition? Usability? Both? • Draft your interview plan: one bullet for intro + one for each task you will assign to the user or functionality you will inquire about • Plan how to test without leading your user. i.e. “Could you tell me what you see in this screen and what you think it means?” “Could you try to do x?”
39. 13:45 – 14:00 Test with users • Make your interviewee feel welcomed. Be friendly and smile • Assume / pretend they know nothing about you or your service • Always start with an intro: tell who you are, why you are doing a user test and what will happen during the session • Ask for permission to take photos. Take photos!! • Do not lead the user. Look for problems, not validation.
40. 14:00 – 14:10 Insights from interviews • Discuss in your team: what did you learn that was interesting? • What in your design didn’t work? What are some ideas for improvement? • Take notes of this discussion. • Prioritize: what will you improve in your design? (or should you through it into the bin altogether?)
41. 14:10 – 14:50 Update prototype • Fix those parts of your prototype that didn’t work • If nothing to fix, you may add essential functionality that you didn’t have time to add before. Or record a video of how your prototype works • If nothing to add, work on other parts of your concept.
42. Sebi Tauciuc firstname.lastname@example.org +35840 774 0124