Paper Prototype
January 5, 2009, 9:17 am
Filed under: Uncategorized

The paper prototype consists of five different screens:

  1. “Main Screen” always visible in the kitchen.
  2. “Week Plan” displays the planed meals.
  3. “Recipes” database with straightforward ways to display some special recipes.
  4. “Shopping List” shows what’s still missing and when it is needed.
  5. “Recipe Details” includes all steps to actually cook the meal.

The same screens should also be available on the mobile device. We decided to use the iPhone for our first (non paper) prototype. The user interface elements of the iPhone are most adapted to small screen size. After the reading through the “iPhone Human Interface Guidelines” (iPhone Dev Center – the decision to keep the interface between the fixed device and the the mobile device consistent was made. We tried to take typical iPhone elements to the large scale touch screen, resulting in the following images:

1.The “Main Screen” including root level menu structure and the next recipe to be cooked.

2. “Week Plan” includes drag and drop support to rearrange the meals and possibilities to add and remove recipies. The recipes also get a special label if all necessary ingredients are available.


3. “Recipes” includes a typical iPhone like Tab Bar at the bottom to select different views of the same data model. The user should be able to rate recipes, check the cooking counter and find out about new and healthy meals.


4. The “Shopping List”, shows which ingredients are still needed. This list will of course be synced with the mobile device.


5. “Recipe Details”


The same screens and additionally the possibility to display two images to the fridges content are also available on the mobile device (PostIt(tm) Notes should match the iPhone screen size):


User testing using the paper prototype was quite fun. We started with the fixed device and our users became excited when they later realized that everything they did in the kitchen can also be done on the go. “Its all on your iPhone”. During the tests we came across two improvements.
The first problem is that there should be a way to cook an “unplanned meal”, which is not listed in the week plan. We first thought about a new button labeled “I’m hungry”, but the realized that parts of what we need are already included in the recipes database. It just has to be extended in a way to search for recipes which only need the available ingredients.
The second problem concerns the images of the fridge on the mobile device. It was very cumbersome to get an overview about what’s inside the fridge and remove these items from the shopping list where appropriate. Our solution to this problem is that all items of the shopping list will be displayed over the fridge images in succession. The user can now quickly decide if a certain ingredient is already at home.


Leave a Comment so far
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: