Vitaly Dulenko

FoodMix

Cooking app

- ROLE

UX/UI, Animation, Art Direction


- DATE

2017


- TYPE

Mobile app


FoodMix is a cooking app that helps you to decide what to cook. Select ingredients you want to eat and get interesting recipes.

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:

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

Empathize

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


  1. Define how often the users find themselves in a situation when they don’t know what to cook.

  2. 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.

Interview Notes

I conducted several user 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.

Affinity Mapping

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


  1. 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.
  2. 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.

  3. 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.

  4. 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.

Personas


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.

Personas

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:

Job Stories

Ideate

The common way to decide what to cook is to search for a recipe and then create a list of ingredients to buy them in a 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 the frequency of use and importance. I insert the results into 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.

Red Route Mapping

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


  1. 1. Quickly find interesting recipes.
  2. 2. Search for ingredients easily and edit the selected.
  3. 3. 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 of 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 on 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 navigation and workflow, create a rough layout and quickly test your ideas.

Sketches and paper prototype

User Testing

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

User testing flow with paper prototype

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

Affinity diagram with grouped issues

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

Implementation

After analyses 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.

Navigation map

Visual Design

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

Main Screen


The main screen provides the user clear direction where to start. Most popular categories guide the user and give them assumptions.

Main Screen

Select Ingredients


You can decide what to cook starting with ingredients. Combine ingredients you have in your fridge and see what you can cook with them.

Select Ingredients

Smart Search


Search for recipes quickly and easily. Get relevant search results using autocomplete and auto suggestions.

Smart Search