UI/UX Case Study — Designing a Food Recipe Finder Platform

Hello👋! This is my first time posting my design work on Medium, and I want to share the design process of Resyep mobile app. This is the result of my final group project when I took part in training at Rakamin Bootcamp.

Timeline: 3 months

Tools: Miro, Figma, Maze

Role: UI and UX Designer

The idea for this project is based on our concern as people who often cook as a part of our daily neccessity. We often think that cooking is nice because it saves money, and is a healthier option.

But more often than not, we also decide to order food from online platforms instead. So we decided to discuss several things that may be the reasons why we ended up choosing the easier choice (ordering food) rather than the harder one (cooking food).

Assumptions

After discussing, we concluded that there are 3 assumptions, which are:

1. People often have dilemmas in deciding what recipe are going to be cooked for the day.
2. For some people, cooking is an activity that wastes a lot of time.
3. People feel bored if they had to eat the similar menu repeatedly.

To validate these assumptions, we decided to start the design process with the Design Thinking framework.

🤝Emphatize

In the beginning, we assembled a Research Plan as a guide for us in doing our research work. In this stage, we decided to do In-Depth Interview as means to explore the behavior of possible users.

→ Objective

• To know the behavior of users when they want to cook for daily needs.
• To know the pain points of user when they want to choose a food recipe to be cooked.
• To know the expectations of user if there is a product that can help them to overcome the dilemma of choosing recipes.

→ Research Questions

Before executing the interview, we compiled research questions to know 3 main things from users: their behavior from choosing recipe to cooking, how they feel about it, and their expectations.

1. Behavioral Questions

• How often do you cook?
• Can you tell us your cooking process the last week?
• How much time do you usually spend to decide on a recipe?
• How much time do you usually spend to cook?
• How does the time you spend to decide on a recipe affect your daily life?

2. Pain Points

• What do you think of the food you cook these days?
• How many choices of recipes do you have to be cooked as your daily food?
• Can you tell us how do you feel when you have to decide on a recipe daily?
• What difficulties do you face when you have to decide on a recipe?
• Can you tell us how to face those difficulties?

3. Expectations

• What kind of products do you expect to help you face those difficulties?
• Have you ever used any products or apps to help you decide on recipes? Can you tell us about it?

→ Scope Criteria

We decided that we will interview users that are included in these criterias:

1. 18–40 year olds
2. Lives in Jabodetabek area
3. Has a packed schedule and has to cook daily

🔎Define

We interviewed two housewives and a female student. These are the main findings we got as the result of the interview:

Problems found

1. Limited time to cook. As their schedule is very packed, they don’t want to think for too long on deciding the recipe they want to cook.
2. Limited ideas. They tend to get bored easily as well, but they only cook the same, easy to remember recipes.
3. Only have few ingredients in storage. Sometimes they have already found a new recipe, but they don’t have some of the ingredients and have to buy it.

Other behaviors known…

The users usually decide on a recipe to cook with 2 methods: To ask recommendations from other people, or to recook an easy recipe that doesn’t require complicated preparations.

Expectations

Users want a personalized recipe that caters to their preferences. For example, they want a recipe based on the ingredients they have at the moment, or their favorite type of ingredients.

→ User Persona

Based on the findings and problem statements we’ve discovered, we summed up all of the informations into two User Personas. We divided it into two to represent our main target users, which are housewives and students.

→ Competitor Analysis

We also identified some existing competitors that also tried to solve similar problems. We broke down these competitors to know what are their strengths and the features they have.

1. Yummy

• Has step-by-step instructions implemented with short and clear audiovisuals.
• Has “Kulkas” (fridge) feature that acts as a filter to find recipes.

2. Endeus

• Has a lot of recipe variations
• Filters based on cooking methods, type of foods, and the base ingredient.
• Has “Kulkas” (fridge) feature that acts as a filter to find recipes.

3. Cookpad

• Compiles user-based recipes
• Has “Kulkas” (fridge) feature that acts as a filter to find recipes.

→ How Might We…

From these insights and analysis we worked on, we put it into How Might We questions to converge the main problems. These main problems are the design challenges that we will face later on, such as:

1. How might we make it easier for users to decide on a recipe that is easy to cook, varying, and doesn’t cost much time?
2. How might we help user to find a recipe that matches to the ingredients they have at the moment?

✨Ideation

To overcome the problems experienced by users, here are the ideas that we have come up:

1. “Kulkas” Storage

• Creating an ingredients storage, so that users can keep track of the food ingredients owned and their quantity.
• Placing a shortcut for the Kulkas feature on the main page. This is to speed up the user’s time to re-add ingredients that were previously stored.

2. Recommendations based on ingredients in the fridge

• Generate recommended recipes based on the ingredients selected by the user from Kulkas.
• Recipe recommendations can be displayed on the main page, so that it can shorten the time for users to choose food menus.

→ User Flow

Then we created a flow that is based on user’s scenario, where users will add ingredients to the Kulkas. Afterwards, users will find a menu of recommendations from the food ingredients that the user chooses.

→ Sitemap

After determining the main feature user flow, we determine the sitemap using the Open Card Sorting method. We use the method of card sorting to arrange functions that previously existed in other applications, and determine the functions that we will use for the main features of the application.

Then based on the results of this card sorting, we group them into several main features, namely Homepages, Refrigerators, Recipe Bookmarks, and Promos.

→ Wireframing

Based on the user flow of the main features that have been designed, we first design the wireframe before designing the final appearance. This aims to determine the skeletal structure of the pages to be designed, as well as to arrange the composition and layout of each page section.

Prototyping

Our prototyping stage comes in two phases, which are the making of high-fidelity designs and creating the prototype itself.

We designed a Style Guide which will be our guideline when designing High Fidelity views. This is to maintain consistency of appearance, and increase efficiency in the design process.

1. Typeface

The focus of our product’s brand is the friendly impression, so we decided to choose Sans Serif typeface with rounded corners. At first we chose the Rubik font, but because it felt a bit stiff and less flexible, we replaced it with Nunito to be able to convey our friendly tone of voice.

2. Color Palette

Orange is our primary color because it gives the impression of being friendly and warm. This color is also often found in various types of food.

3. Components & Icons

Our components and icons use rounded shapes to be consistent in highlighting a friendly impression. (Icons are taken from Iconify and we choose icons that are licensed free (CC0, MIT, Apache)

1. Landing Page

We created Onboarding pages so that the user understands the main features that will be the advantage of our product. We emphasize the main features can help user to cook faster and generate recipes based on the ingredients they have.

2. Homepage

On the home page, there is a shortcut to re-add materials that have been added by the user. This is to shorten the user’s time so there is no need to directly access the refrigerator features.

In addition, there is a daily menu recommendation (meal plan) based on the ingredients you have. However, to view this meal plan, users must have a premium subscription first. For the free plan, the system will generate recipes randomly for users.

3. Kulkas

When the user first enters the Kulkas page, if it is still empty there will be a CTA button to encourage users to fill in the fridge. Users can fill in materials by searching for materials in the search bar.

After the ingredients have been added, these ingredients can be selected to generate recommended recipes for the user. Users can find out how many materials have been selected and what materials have been selected.

4. Recommended Recipe

This is the page where the users can decide whether they want the recommended menu or they want other recommendations. Users can see the details of the recipe as well as bookmark it for later.

Link for the prototype MVP is here

Testing

Then, to find out whether the MVP of the product we have designed can help solve the problems experienced by users, we conduct online usability testing. The tasks given are:

Looking for a menu of dishes with chicken-based ingredients that have been stored in the Kulkas.

→ What they say

Then at the end of the UT process, we get some feedback from the user, which is as follows:

• Still confused with Refrigerator navigation
  Users are yet to be familiar with this feature, and according to users, it is still not efficient enough to help with meal prep.
• Th edit icon on the material be replaced with the delete icon
  Users doesn’t know the function of the edit icon, and they think it is confusing.
• The appearance of the list of ingredients in the Kulkas feature should be changed to be more compact
  Users feel that it is too long if they have to scroll down to see the ingredients.

→ Enhancements

Due to the concerns expressed by the user, we made several changes to the UI appearance, which are as follows:

Division into 2 tabs, namely the user’s storage and a list of ingredients that can be added to the Kulkas.

• We changed this view because users wanted a more compact view, so we changed it to Gallery view.
• In addition, the division of tabs is carried out with the consideration that users do not need to always add ingredients to the fridge via the search tab.
• We’ve also added a filter system so users can find ingredients according to category more efficiently.

Creating a tooltip for Kulkas feature as a navigation tutorial

We decided to create tooltips for Kulkas feature. We do this because there are still users who are confused about the navigation of the Kulkas feature.

We can still improve a lot from this design process! Throughout the process, the most difficult part was analyzing the research data and creating comprehensive user flows. Here are the things we learned:

1. In the future, we can analyze and synthesize data better with Affinity Diagrams to make it more efficient and to determine a more centralized Problem Statement.
2. Make sure the aligning of ideation at the beginning. We had difficulty during designing the features, because there were different views when we tried creating User Flow.
3. Look for more design references in determining UI design layouts.
4. Determining feature prioritization, so as not to waste time determining which features should be designed for the MVP design.
5. In the future, we can carry out Usability Testing in a more targeted manner and determine more concrete success metrics. This will assist in determining the type of design enhancements needed.

This Resyep project was realized because of my bootcamp friends at Rakamin Bootcamp, which include:

1. Hanifati Prasetyani and Tasya Tabriza who assisted in the recruiting process to carry out UX Research.
2. Hardy Uttamo Wirawan as a partner in determining the Style Guide and compiling UI Design
3. Ahsani Aisyah and Teuku Muda Rafsanjani who help facilitate the analysis and synthesis of data with a high curiosity.

Thanks for reading to the end! I hope this study case can be insightful. Let me know in the comments if there’s any feedback!

Get connected with me 👋 : LinkedIn | Portfolio