After creating persona and storyboards, it’s time to start thinking about the app itself. More specifically, we started designing the graphical user interface. Ideal for this is paper prototyping: drawing the GUI on pieces of paper, then testing that with a small number of subjects. Using paper enables us to quickly adapt their feedback.
First off, we thought about which platform we would develop for. After all, different platforms have different guidelines for design. From Android, iOS and Windows Phone we chose the first, Android, because it has the highest market share and its usage within our group (2 Android, 1 WP). An alternative would be to design a web app, but since we require push notifications (dinner invitations), that choice would have been tricky to implement.
Then we split up and started to draw GUIs for different scenarios, namely making a dish and adding/deleting ingredients from the fridge. These are the resulting sketches:
As you can see in the last sketch, we were interrupted. Professor Duval told us to focus on the core functionality for now, which is the first scenario.
We then started to make the actual paper prototypes on A6-sized pieces of (surprise surprise) paper. There were two iterations, the first of which was tested with four users. The second iteration is yet to be tested. These are the five most important cards of the first version:
From left to right:
- The user taps the search box (a keyboard appears) and starts typing “Spaghetti”. Some suggestions are shown underneath. The user picks the first one.
- The ingredients of the dish are displayed, each with an indication of whether the user already has them. The user taps ‘Cook’.
- The next screen is composed of three elements: on top we have small pictures of the people that have been selected. In the middle the checklist of the ingredients is shown. At the bottom, a list with available friends is displayed with the ingredients they can provide. The user taps ‘invite’ for Elke.
- Only paprika is missing. The user invites Freddy as well.
- The list of people that can be invited turns into a message that all ingredients are checked, and that you must bring spaghetti’s yourself. The user taps ‘GO’ and the scenario ends.
The feedback was clear:
- Most of our testers thought they could tap the check boxes on the second card. Since this is not the case, we decided to use V’s and X’s to indicate whether ingredients were already available.
- Testers also asked where and when the pasta feast would take place. To keep it simple, we decided that that would be in the kitchen of the user (= inviter) . As for the ‘when’, in version two we added this to the second card.
- We also decided to add a title to the list of candidates to help the user understand what he has to do.
The second set of cards took these remarks into account:
What we need now are people to test this second version. If other groups need those as well, leave a comment so that we can exchange testers.