Phase 4: creating and validating the prototype
Last updated
Last updated
The previous three phases offered a very structured approach to get from the challenges to a concrete Storyboard of the proposed solution. In this final phase we convert the Storyboard into a working Prototype and use that to test with users. It is recommended to invite someone with experience in prototyping and interviewing. This phase does not have many structured exercises but is meant to provide you with tips and guidance that we learned in the Design Sprint 2.0 course by AJ SMART.
The Storyboard is in this phase converted into a Prototype, which is an early stage model of the intervention built to test its design. The word comes from a Greek word for "primitive form". After a recap of the previous day, and especially the Storyboard and Platform Questions, it is time to get to work. There exists no 'together alone' anymore in this phase as it is all about teamwork. It is recommended to assign two roles:
The Prototyper, who is in charge of constructing the prototype and delegates and assigns tasks to the others.
The Supporter who should arrange all things that could distract the others, i.e, ensures that there is always enough snacks, coffee, lunch, etc.
It is wise to prioritise two or three screens at first. If you start with them all at the same time then focus is too spread out. Moreover, screens often share common layout components and if you want to make a change you have to change them all. Therefore, it is better to get these right for a small set of screens and then just copy them over. The team works quite decentralised so it is advisable to do two stand-ups of 15 minutes during the day, for instance one just before lunch and one just before entering the final hour.
A prototyping tool is at the core of each prototyping kit as it allows you to add your designs and create links between them. A good prototyping tool is able to create the feel of a real web application or mobile app without actually coding it. It is also the place where the appointed Prototyper combines everyones work into the actual prototype. The most well-known option is to use InVision which is a freemium product. If you have sensitive information on the screens you can opt for desktop application Adobe XD and if you are on a budget then Presentator.io or Origami Studio are good options.
Once you decided on a prototyping tool you also need a design application to draw your screens in. Established options are Sketch and Figma, although a simple and free tool such as draw.io would also suffice. Finally, we need some graphical resources for our screens. Icons can be obtained for free from NounProject or FontAwesome, while free photos are found on Unsplash.
Note that the above are just recommendations and you are free to go with any set of tools depending on the capabilities you have in your team.
After the prototype has been created, we can start having interviews. For this we recruit five people from the platforms target group. Why only five interviews, you ask? Jakob Nielsen found already in the nineties that the best results come from testing no more than 5 users and running as many small tests as you can afford. He summarized his findings in the graph below. More background information about the research can be found on Nielsen's website.
The interviews are preferably conducted by two participants from the previous parts, where one is the Interviewer and other is Note Taker. Be sure to make clear to the interviewees that you are not testing them, but testing the prototype. Nothing personal.
Starting at the first screen, let them examine each screen and think out loud. After they indicate to be done with a screen, guide them towards the next screen (they might try to click on stuff that do not work in prototype which breaks the experience). Instead of a notepad, the Note Taker has two sets of post-its: green post-its for positive or affirming statements and yellow ones for writing down misunderstandings.
The findings of the interviews can be structured by creating a table with on the horizontal header the names of the interviewees and on the vertical headers the names of the prototype screens. After the interview, stick the post-its into the cells for the corresponding interviewee and screen. As post-its are in two colours, you can immediately see where are a lot of misunderstandings.
