FoodMix — Cooking App. UX Case Study

Published in

UX Planet

7 min readJun 22, 2017

Once upon a time my lovely wife and I were deciding what to have for dinner. We had recently eaten this, tried that and we just had no ideas what to cook. So I wondered — if there was an app that could advise me something. For example, an app that allows you to select ingredients you have in your fridge and get some interesting recipes. Let the app not me think about what to cook!

My Objectives:

Define if users need this app (if not — how I can change it).
Bring ideas how to satisfy these needs.
Build a prototype to test my ideas.
Implement my ideas in final project.

I used a design thinking approach for all these steps.

Empathize

Research

My principle is “Start design with Why” to clearly understand why users need this app. I should know what the users’ goals are like and how they achieve them. The wrong way is to ask them directly what they need, the right way is to observe and ask what goals they are trying to achieve and how they are going to do this.

I set up interviews’ objectives, target audience, and questions before starting the interviews.

Objectives:

Define how often the users find themselves in a situation when they don’t know what to cook.
Define how they solve this problem. What tools and approaches they use?

Target audience:

I selected to interview different types of users—both male and female, with different level of experience in cooking, people with different familiarity with technologies, people who cook often and occasionally.

I conducted several users’ interviews, asking participants how often they find themselves in this similar situation and how they figure it out what to cook.

Define

I used an affinity mapping method to find patterns in my observations and group them. It helped me to get interesting information about my target users.

I analysed the research results and noticed users similar behavior and pain points.

According to the leak of ideas users are divided into 2 groups — people who never know want to cook and people who plan their menu in advance.
There are 3 main ways to make up your mind what to cook — use well-known recipes, search them on the Internet or experiment with the ingredients left in the fridge.
Users are interested in a relevant search, big database of interesting recipes and their moderation. Also users look for mobile apps because it’s easier to use them in the kitchen.
Users are not interested in a beautiful collection of recipes, they feel frustrated with too overloaded cooking apps and need clear guidance where to start.

Persona

I concentrated on 2 main types of target users— people who work hard and don’t have enough time to cook and people who are on a diet, those who stick to fasting and vegetarians who use a definite set of products for cooking. This app will not be helpful for experienced cookers who plan their menu in advance and know what to cook. Based on my research, I created primary and secondary personas to define who may be and may not be my target user.

Job Stories

I don’t really like using user stories, I prefer job stories. You may say — “Personas and Job Stories? Are you crazy?” In my opinion, both tools are useful and can be used together. Personas help you to understand whom you create this product for. Job stories help you concentrate on their needs and the context of use. As I’ve defined the main users’ needs, now I can create job stories:

Ideate

The common way to decide what to cook is to search for recipe and then create a list of ingredients to buy them in grocery. My idea was to combine this method with the reversed one— start with selecting ingredients you have and then get related recipes.

Based on my observations and insights, I created a list of features that can help users in their needs.

Red Route

I used a red route approach to outline critical features enacted by the key personas. It helped me to concentrate on the main features of the app that users really need.

I asked the participant to prioritize these features by frequency of use and importance. I insert the results on a table according to the frequency of use and number of people who use them. Mapping out the red routes helped me to determine what features are the most important for users.

So I’ve got 3 main functions that are crucial for users:

Quickly find interesting recipes.
Search for ingredients easily and edit the selected.
Add your own ingredients and recipes.

Such cool features (in my opinion) as Connect my fridge to automatically add my ingredients to the app or Scan ingredients via smartphone were on the last place. It was a great example of how important is to discover real users needs instead of assuming them.

Information Architecture

The way how the content is organized is as important as the content itself. In my case user’s success with finding an interesting recipe depends on a fast and convenient search.

The basic user flow is very simple — you start with searching for ingredients or recipes and then you get a list with recipes where you can select the best one for you.

How can we help users to search for numerous ingredients/recipes and decrease their cognitive load? According to the LATCH method information can be organized in 5 ways — by Location, Alphabet, Time, Category and Hierarchy. In our case we can organize ingredients by Categories (Meat, Fish, Vegetables, Fruits) and Hierarchy — the most popular and widely used ingredients to go first in the list. Users can also use the search bar with autosuggestion and autocomplete for fast and relevant search.

Recipes also can be grouped by Categories (Breakfast, Dinner, Salads, Dessert, Easy dishes etc) and Hierarchy (by rating, time of cooking).

Recipes in the search results list can be sorted by Time for Cooking, Rating, Calories and Categories.

Prototype

I created a paper prototype to test my design ideas with users. It was my first experience with paper prototyping and I was amazed by its benefits. It’s a great tool to test app’s navigation and workflow, create a rough layout and quickly test your ideas.

User Testing

After creating the paper prototype, I conducted a user testing to validate my ideas. I gave the participant the next task — “Imagine that you came back late from work. You opened the fridge and saw that there were only chicken breasts, mushrooms, and onions. You had a cooking app on your smartphone, so how would you decide what to cook using this app?”

I asked the participant to speak aloud while performing the task. I noted all my observations on the stickers — each observation per sticker. Then I used the affinity mapping method to find similarities among my observations and to group them.

I prioritized my findings according to their importance and defined 3 top issues I had to solve.

Implementation

After analyzing the test results, I used MockingBot to create a new iteration of the prototype including my findings. This app has an awesome feature — it allows you to view the links between screens. It’s a good way to improve the navigation map of your product.

Visual Design

After testing my prototype, I started working on the visual part of this app. I put in mind all my findings and testing results to create a light and clean UI that will not distract users from their goals.