UI UX Case Study: Reduce the confusion of choosing a menu to cook by creating a cooking inspiration application
Disclaimer: This is a personal project at Dibimbing.id. Here I share the process to complete this project. I do not own pictures and video footage so I attach the link in references.
Introduction
Hello, My name is Shintia. Currently, I’m studying UI UX at Dibimbing.id Bootcamp. As I dive deeper into UI UX world, I have learned a lot of things such as design thinking, wireframing, usability testing, and many more.
In this project, I want to discuss a case study to help users reduce their confusion about choosing menus to cook each day.
Overview
In this pandemic era, people spend more time at home and do many activities. One example is cooking. Cooking has become a routine activity for some people, whether to cook for themself or for their beloved ones.
Problem Statement
Because they have to cook often, sometimes some people feel bored and confused about what to cook.
Roles & Responsibilities
For this personal project, I make end-to-end processes from UX research, UX design, UI design, and Usability testing.
Challenges
The challenge is to find the best solutions for users in introducing new features.
Processes
To make applications that are useful for users, I applied design thinking in making this project.
Design thinking is creative and collaborative problem solving to produce more empathetic and innovative solutions.
By David Kelley and Tim Brown, IDEO founder
Step 1. Empathize
To know users’ behavior and users’ pain points, I make a research plan and discussion guide. Then, I conducted the research by in-depth interviews with five people
Step 2. Define
After that, I created an empathy map to define the gained insight. From the empathy map, I created a user persona to make it easier to define the intended user. I also created a user journey map to find what opportunities can be implemented in the product. Then, the next step is to create prioritization matrics to decide what are the main opportunities to be implemented in the product based on the user journey map. To develop the product, I also do a competitive analysis to find more insight that is useful for users.
Empathy Map
With an empathy map, we can define how users’ behavior when they want to cook.
User Persona
Let’s meet Lucy who is a WFH content creator. She hopes she is not confused anymore when determining the menu to cook.
User Journey Map
User journey map contains users' experience when they want to cook and we also can define opportunities based on users’ pain points that are useful to develop the product.
Prioritization matrics
After creating opportunities from the user journey map, I create prioritization matrics to consider which opportunities will be implemented into the product.
Competitive Analysis
I analyzed three brands, Cookpad, Tasty, and Yummy. Based on these brands, there are similar hierarchies in search features, food recommendations, and the navigation bars on the bottom.
In the search feature section, there is a filter to make it easier to find food recipes. Three brands recommend recipes that are currently popular and with additional filters based on several other categories in Tasty and Yummy.
Cookpad and Yummy provide a search feature by food ingredients.
The recipes on the three brands have something in common, like providing visuals, ingredients, cooking steps, and writing comments. Cookpad provides visuals and cooking steps in the form of photos and writing. Users can give likes by pressing the love button, like button, and claps button. Besides that, users can also upload photos as a sign that they have re-cooked the recipe.
Tasty provide visuals with recipe videos, to make it easier for users, there is a step-by-step video. Users can also buy groceries in this application.
Yummy also provides visuals with recipe videos but with cooking steps using photos and text. Users can rate recipes with stars.
The profile is a place to store favorite recipes.
Step 3. Ideate
I start ideate by creating a user flow, information architecture, wireframes, mock-ups, and design system.
User flow
User flow is used to describe the user’s steps to complete the task using a product. There is two main user flow, register/login user flow and search for recipes user flow.
Information Architecture
Information architecture is a method used to make documentation of all flows, contents, and design requirements of an application or website.
Dibimbing.id Bootcamp class
Wireframe
Based on information architecture, I make wireframes on papers with design alternatives to enhance efficiency.
UI Design
Homepage and Search
On the homepage, there are sections to recommend recipes like in today’s menu, search by ingredients, inspirations’ preview, #FastEasy menu, and Popular menu. Each recipe has details like preparing duration, hashtag, and ratings. Users can search for recipes by search box and there are most search menus and search categories. There is an example for the saved recipes if users have already login or register. If there are no saved recipes, users are invited to the homepage to search for recipes by click on the “browse recipes” button.
Ingredients Feature
Users can search for recipes by the ingredients. I use the coach mark to tell the function of this “ingredients feature”. Users can search for the desired ingredients or directly select the available ingredients. This feature also recommends popular ingredients for users. After choosing ingredients, there is a recap button to search for the desired recipes. There are also filters to sort out the recipes.
Inspirations Feature
I got the inspiration to make this feature from Instagram Reels and TikTok. I create an “inspirations feature” to help users get inspiration from videos. Users can see details and if users are interested, they can see the detailed recipe to cook.
Recipe
On the recipe page, users can see recipe details like the cooking video, duration to cook, hashtags, ratings, ingredients, cooking steps, and comments. Users can follow the recipe step-by-step cooking in videos and words. If users forgot the ingredients, there is an ingredients button in the feature. And if users are interested in the recipe, they can save the recipe by clicking on the love button or share the recipe.
Login/Register
Before liking, sharing, and comment, users who have not logged in or registered will be directed to the login or register page.
Design System
Step 4. Prototype
I make prototypes using Figma. This prototype covers the user’s journey in searching and getting menu inspirations. Please click the italic link below to try the prototypes.
Step 5. Test
Usability Testing
I did usability testing on the inspirations feature by maze.co web application with five participants. After participants did the testing, I asked about the difficulty and participants’ purpose for clicking other than the mission.
Test Results
Mission: Imagine you want to find a recipe with the inspirations feature. After scrolling, you are interested in roasted chicken and want to see the recipe in more detail. Please show me how you use the inspirations feature and see the roasted chicken recipe in more detail.
Improvement
Closing
Thank you for reading my explanation of my case study project. Through all data, I got a lot of insight and made several opportunities ideas in the hope to give many inspirations for users to easily decide menus to cook. I also learn to make mission testing more clear and validate with participants after testing. Feel free to comments, I am very open to receiving feedback and suggestions :)
References
I don’t own the footage resource, I attached the footages’ link here
https://tasty.co/recipe/tuna-melt
https://www.shutterstock.com/id/image-photo/traditional-caesar-salad-white-bowl-on-1703838325
https://www.shutterstock.com/id/image-photo/fresh-raw-beef-steak-isolated-on-344681603
https://www.shutterstock.com/id/image-photo/green-vegan-salad-leaves-mix-vegetables-1519672565
