interdisciplinary mediaprodcution · – persona – scenario – application – description main...

i n t e r d i s c i p l i n a ry med iap r o d c ut i o n– webdesign –

CleoGraa f

Mell issaG e uts k e n s

IMB4_3_WebdesignJuly the 4th, 2013

Pro l o g u e

The assignment of this course was to create the design of a time based application. The focus of this project was on the process of the design. In the first week we had to develop a couple ideas for the project, and present them in the next week.

There were a lot of topics, like video/audio, real-life data, data visualization, social media or events. We also thought about everyday problems, like how to get more people in the common room, how to break the silence in the house, what to do when you’re alone, what to eat today and how to plan who is using the washing machine.

Eventually everybody presented three ideas. From those ideas we voted for the best. We ended up with six ideas; a flat sharing community, a student productivity calendar, an event schedule, a medical schedule, a life logging blog and a food saving application.

After this step, we voted again. The four projects that remained were the flat sharing community, the event schedule, the life logging blog and the food saving application. While the teachers were having a break, we divided the project. We (Cleo and Mellissa) choose the food saving application.

The following steps are described in this documentation. And our prototype can be found on https://go.fieldtestapp.com/8bbenq

https://go.fieldtestapp.com/8bbenq

I n d e x

Chapter Prologue

Chapter 1. The concept– Concept – Definition of the problem– User – Target group – Persona – Scenario– Application – Description main functions – Navigation structure

Chapter 2. Design– Lay-out– Name– Typography– Color– Improvement – Latest feedback – Feedback ingeneral– Screens

Chapter 3. Researches– Food waste– Applications

Chapter 4. Enclosures– Planning– Hand-out presentations – Personas & Scenarios – Development so far – In between presentation – Final presentation– Source(s) – Researched applications

Page2

4444456667

88899991010

121214

161616161719212424

4IMP Webdesign – Cleo Graaf & Mellissa Geutskens – IMB4_3_Webdesign – 2013

ChapterOn e – the concept –

ConceptOur first concept was to create an application to search recipes based on ingredients, time to cook or level of hardness. While working on this concept, we started thinking about food waste. In a research we found that every year one third of the food produced for human consumption, which is 1.3 billion tons, gets lost or wasted.

We were shocked about this fact and did some more research about why food is wasted and which food is wasted most. The main reason food is wasted is because people think it doesn’t look good. A lot of people don’t have the knowledge to see when food is good or bad, and only look at the expiry date of the product (when available).

Now that we knew more about the problem, we could think of a new target. We decided the best way to prevent food loss, is to change people’s attitude. We will do that by creating an application where people can plan their meals with recipes based on the expiry date of the ingredients they have in their fridge. To make the decision if food is bad or not easier, we added food tips.

Definition of the problemEvery year lots of food is been thrown away. Most of the waste is unnecessary and could be avoided but isn’t, because people simply don’t have enough knowledge to recognize if the food is bad or not. The definition of the problem we’re solving is:

“How can we teach the target group to recognize if food can be eaten or not and help them planning to use food that is almost expired?”

UserTarget groupOur target group is European students between 20 and 30 years old whom live in a household smaller then three persons, because we believe a lot of students in Europe do not think enough about food waste. A research of WRAP in 2007 showed that households in which all occupants are adults aged over 16 but less than 45 years waste a significant amount of food, almost as much as a household with young children. These adults throw away 7.2kg of food each week (370kg a year) of which 68.1% a week could be avoided.

Food waste is not only important for the environment, but also for the students. A lot of students in Europe are having trouble living on their own, because they have to go to school but also have to pay the bills, groceries etc. With the prevention of food waste, students also prevent throwing away the money they spent on food.


The research from WRAP also showed that people who live in single-occupancy households waste the most money each week by throwing away avoidable food. This is the reason we choose to segment our target group to European students between 20 and 30 years old whom live alone or with less then three other students.

Persona 1 - Michael (beginner)Michael is 24 years old and living in Amsterdam, where he also studies. He lives in a student dormitory together with his three friends Jan, Patrick and Kevin. The rent in

Amsterdam is high, so all the guys have a part-time job after school. Michael is very social and likes to go to the gym or to a party.

He and his roommates are out a lot and do not have much time to prepare dinner. Their kitchen is a mess, because there is always someone else cooking. In their fridge is a lot of beer and fast snacks, but also vegetables because they try to stay healthy. Michael often finds things in the refrigerator that don’t look good or are past expiring date. He doesn’t like throwing the food away, but also doesn’t know how he could see if the food is still good or not.

Michael’s problem: Not a lot of time to prepare dinner and doesn’t know what’s in the fridge.

Persona 2 - Bob (intermediate)Bob is 26 years old and lives alone in an apartment in Paris. He studies Psychology at the University and spends a lot of time inside studying.

Bob has a lot of savings and a freelance job. Although he has enough money, he doesn’t like spending it on the wrong things.

Bob lives very organized and before shopping he always makes a list of things he need. While doing groceries Bob always get a bit frustrated, because a lot of products are sold in packages for two or more. He doesn’t want to throw

food away, but also doesn’t want to eat things twice. That’s why he is always trying new recipes with the food that’s left over.

Bob’s problem: A lot of products are being sold in packages of two or more. He doesn’t want to throw things away, but doesn’t know what to do with it.

Persona 3 - Jenny (expert)Jenny is 21 years old and lives together with her best friend Mila in Antwerp. She studies biology and cares a lot about the environment. Jenny loves cooking and knows a lot of

helpful tricks she learned from her grandmother. Because of the tricks she doesn’t waste so much food as Mila does.

While Jenny does most of the cooking home, she likes to give advice and learn tricks to Mila. Mila thinks Jenny’s advice is very helpful and wished more people would know about them, so they can stop wasting food too.

Jenny’s problem: How can she help people with her knowledge about food saving?


Scenario 1 - Michael (beginner)Michael comes home after a hard work-out in the gym. He hasn’t had lunch yet and doesn’t know what to cook. A couple of weeks ago he heard his friend Bob talk about an application, which has recipes based on the ingredients you have in your fridge. Michael downloaded the application and has been using it since then.

When he opens the application, he sees the ‘Tip of the day’ function. He clicks on it and the application gives him the tip to make French toast. Michael loves French toast, so decides to make them. Making French toast was a good decision, because the eggs where about to expire. If he hadn’t used them today, he probably would have to throw them away.

Scenario 2 - Bob (intermediate)Bob just got home from work. He is tired and hungry, but when he looks in his fridge he sees a lot of food, but he doesn’t know what to cook. Bob opens the ‘Foodsaver’ application and looks at the ingredients he has to eat this week.

On the top of the first page he reads that his eggs and bell peppers are expiring. Under the ingredients that are expiring are a couple of recommendations available for him that use one of the ingredients, but there is also one that uses both ingredients. He clicks on ‘Several ingredients’ and get’s the recipe ‘Egg with peppers’ as the best recommendation. The picture looks really good and it is easy to make, which is convenient because he is too tired to prepare a big meal.

He can see in the recipe which ingredients he has and is able to adjust the amount of the ingredients. Unfortunately he sees that he doesn’t have any red chilies, and is also missing the can chopped tomatoes.

Bob calls his neighbor, which happens to have these ingredients. She didn’t have dinner either, so they decided to cook together.

Scenario 3 - Jenny (expert)Jenny has her exams this week and locked her self up in her room all day. When her roommate Mila get’s hungry, she decides to make dinner so Jenny can continue studying. Mila wants to make a big omelet with bell peppers and leak as a surprise for Jenny, because that is her favorite food.

Mila has all the ingredients she needs to make the dish, but she doubts if the eggs are good. They have been in the fridge for almost two weeks. When Jenny opens her door to go to the bathroom, Mila decides to ask Jenny about the eggs, just to be sure she is not poisoning Jenny with her favorite food. Jenny laughs and tells her about the ‘Foodsaver’ application where you can read tips to see if ingredients are good or not.

They open the application and look for ‘Eggs’ in the ‘Food tip’ area. They find a tip that eggs can be put in a bowl of water to see if they are good or not. The pictures in the tip show them when the egg needs to be thrown away. Fortunately, the egg is still good and they can eat it.

ApplicationDescription main functionsWe will help our target group waste less food by creating an application, which can support them in their food making process. There are four main functions in our application; Recipes, Food Test, Agenda and Saved Food. Here is a description of all these functions:


1. RecipesBased on the expiring date of the ingredients in the users fridge, users can search recipes and plan their meals.

2. Food TestThe user can search ingredients and read tips about how to recognize if the ingredient is good or not. There can also be tips on how to prepare or cook a special ingredient.

3. AgendaAn overview of all the ingredients that are expiring soon. The user can see when the ingredient is expiring, so they can plan to cook them. A bar with days will show how many time the user has left.

To motivate the user to prevent food loss, the application keeps track of all the food the user saved. This should give the user a good feeling.

Navigation structureThere are five main navigation items in the application; Search, Recipes, Food Test,

Agenda and Food Saved. Every main item had it’s own sub items.

1. SearchThe search icon is available in every screen. The user can search by filling in keywords.

2. RecipesThis is the homepage of the application. The page contains an overview of ingredients that have to be used, a food tip, recommendations for recipes to cook and the categories of food.

When a user clicks on a category, they get a list of all the recipes in that category.

3. Food TestThis page is also based on a list of categories.

The user clicks on the category of the ingredients or types the ingredient in the search bar for easy access.

4. AgendaNext to the name of the ingredient are three icons. The first links to the ‘Food test’ page for easy access. The second looks for recipes based on this ingredient. If the user clicks on the last icon, he gets three options; click on ‘eaten’ to tell the application that the ingredient is used, ‘Thrown away’ to tell the applications the ingredient has been thrown away, and ‘cancel’ to go back to the agenda.

5. Food SavedBased on how many times the user has clicked on ‘eaten’ or ‘thrown away’ in the agenda or ‘I made this recipe’ in the recipes, the content of this function changes. The more food the user saves, the bigger the amount gets.t


ChapterTWO – design –

Lay-outWe first started with sketching some wireframes, to work out our concept. Initially, these where not detailed enough and not suitable for use on the iPhone. So we decided to base the lay-out of our application on the lay-out that is used in the iOS system. This gave us insight in the functionality of our application. iOS divides it’s screen in three sections. The header, content section and the menu bar on the bottom.

In the header is the name of the application displayed and, when going further in the application, a detailed description. It also gives the user the chance to go back a step or search for something. Like an ingredient or an recipe. The content section contains the main information of the application. And in the menu bar on the bottom are the four main functions, which the user can choose. It also gives the user information about which function the user is using at that moment.

NameThe name ‘foodSaver’ was chosen after a few brainstorm sessions and some trade-offs.

The brainstorm sessions where based on a few parameters, which we thought where important for our applications. The parameters where as followed:

– dinner; – tricks;– plate; – green;– bad; – dish;– food; – kitchen;– saving; – ingredients;– planner; – agenda;– fresh; – good.– tips;

The main parameters where fresh, saving and green, but we also considered the rest of the parameters. Some ideas for a name where as followed:

– savingmenu; – week X; – frezh; – foodZ;– foodplan; – weekplate;– fungUs; – weekheros;– saving; – desh (fresh + dish); – foodsave; – greenplate;– trickyPlate; – frish, every day a– savemenu; fresh dish.


We chose the name foodSaver, because that’s the main function of our application. Saving food, by changing people’s attitude. It’s easy to remember and it tells the users exactly what the application is about and what they can do with it.

TypographyFor the typography we first compared the different font families. Like Serif, Sans - Serif, Cursive, Fantasy and Monospace. Immediately the font families Cursive, Fantasy and Monospace were out of the question because they aren’t readable on a small screen.The overall font had to be easy legible, because of this. It had to be legible otherwise it would not work. So we chose Helvetica (Sans - Serif). A well known web font that is easy to read and recognized by multiple devices.

For the name of the app and titles we chose a different font, within the font family Sans - Serif . So it is a bit easier to recognize what is plain text and what are titles. For this we chose the font Ostrich Sans, because of it’s duality. Well, it looks like a duality because of the two lines in the bold version of Ostrich Sans. Just like the duality before using the application, between good or bad food. We continued the duality through using two lines instead of one (underneath the bars).

ColorThe main colors are green and orange. Green stands for nature, growth and life. Because the app is about food and initially giving new life to food we think isn’t good anymore.

Orange stands for optimism. In our case the optimism that the food the user has is still good. Orange is said to increase the craving for food. We used green as the overall color, for the bar on the top and on the bottom. And we used orange for the other buttons.

ImprovementDuring the project the application and how it looked changed a lot. The feedback helped us to make the application better for the eye and easier to use. After every feedback moment we chose some points and changed this in the application.

Latest feedback– Contrast is to low: In particular the thin fonts and dark color on dark color. So we made the fonts thicker, so they are easier to read. And we changed to colors somewhat, by making the background (a picture with different kinds of food) much lighter.– What is a list should function should look and work like a list: Instead of focusing on the look and feel of the application, we started focusing on the functionality of the application. This way not only the usability became better,


but also the look and feel was better. More complete.– Give users the chance to start saving food straight away: The users had to make a few steps before they could actually save food. But it was a good idea to give the chance to save food straight away. We added a short section where the user right away sees which ingredients are going bad and he / she can make with it.– The menu doesn’t look like a menu: It wasn’t clear for the user which function was active or not, in the menu on the bottom. So we looked at other applications for inspiration and decided to change the color scheme of the active function. Not too noticeable, but noticeable enough.– Think about the order of the main function: We had the order of foodtest, agenda, recipes and saving food. In order of importance. But we changed this to recipes, foodtest, agenda and saving food. Because the function ‘recipes’ contains some information that is best to start with.

Feedback in general – Give general info;– Think about how the application knows what ingredients the user has;– Focus on 2 points: how to save food and how much food we buy;– Visualize worst case scenarios;– Use standards, things that people in general already know.

ScreensThe main screens are listed here, the other screens can be found in our prototype.

https://go.fieldtestapp.com/8bbenqOur prototype is build with www.fieldtestapp.com, which was recommended for making wasy prototypes.

1. Recipes

2. Foodtest

https://go.fieldtestapp.com/8bbenq


3. Agenda 4. Saved food


ChapterTHR E E – researches –

Food wasteSlides of research from the first week:

Slide 1

Slide 3

Slide 2

Slide 4


Slide 5

Slide 7

Slide 9

Slide 6

Slide 8

Slide 10


ApplicationsSlides of research from the first week:

Slide 1

Slide 3

Slide 5

Slide 2

Slide 4

Slide 6


Slide 7 Slide 8


Chapter F O U R – enclosures –

PlanningWe used the following planning during:

Hand-out presentationsPersonas & ScenariosSlide 1 Slide 2


Slide 3

Development so far Slide 1

Slide 3

Slide 4

Slide 2

Slide 4


Slide 5

Slide 7

Slide 9

Slide 6

Slide 8

Slide 10


In between presentationSlide 1

Slide 3

Slide 5

Slide 2

Slide 4

Slide 6


Slide 7

Slide 9

Slide 11

Slide 8

Slide 10

Slide 12


Slide 13

Slide 15

Slide 2

Slide 14

Final presentationSlide 1

Slide 3


Slide 4

Slide 6

Slide 8

Slide 5

Slide 7

Slide 9


Slide 10

Slide 12

Slide 14

Slide 11

Slide 13

Slide 15


Source(s)Sources we’ve used for research and inspiration, throughout the proces.

– Ventour, Lorrayne. ‘The food we waste’. WRAP, April 2008 ISBN: 1-84405-383-0

Researched applications:– 222 Million Tons https://itunes.apple.com/us/app/222-million-tons/id528965282?mt=8– Food Waste Diary https://play.google.com/store/apps/details?id=com.main.foodwastediary&hl=nl– Green Egg Shopper https://itunes.apple.com/us/app/green-egg-shopper-shopping/id393794174?mt=8– Love Food Hate Waste https://play.google.com/store/apps/details?id=com.lovefoodhatewaste.lovefoodhatewaste&hl=nl– Dinner Spinner, All Recipes https://itunes.apple.com/nl/app/allrecipes.com-dinner-spinner/id299515267?mt=8

https://itunes.apple.com/us/app/222-million-tons/id528965282?mt=8

https://play.google.com/store/apps/details?id=com.main.foodwastediary&hl=nl

https://itunes.apple.com/us/app/green-egg-shopper-shopping/id393794174?mt=8

https://play.google.com/store/apps/details?id=com.lovefoodhatewaste.lovefoodhatewaste&hl=nl

https://itunes.apple.com/nl/app/allrecipes.com-dinner-spinner/id299515267?mt=8

interdisciplinary mediaprodcution · – persona – scenario – application – description main...

Documents