Designing a restaurant inspired recipe app — a UX/UI case study
Outlining the problem
For my final project at RED Academy, we were given the opportunity to choose our own UX adventure. This allowed me to reflect upon some problems that I might face daily. Being a food enthusiast and a 10-month-old Vancouverite, I enjoy trying out new restaurants and would cook up different recipes at home. This concept project idea sparked when I wanted to try recreating Miku’s Salmon Oshi at home but can’t seem to find the right recipe. I started to think if out there, users are experiencing the same problem. This curiosity inspired me to validate my assumption, and ultimately produce a solution to solve the problem.
Hypothesis
When recreating a restaurant dish at home, not knowing how to start, the ingredients used and the steps taken are widely common.
Proposed Solution
Snapchef is an app that eliminates the guesswork from cooking your favorite dishes at home, by unifying restaurant inspired recipes created by the app and its users.
Defining the Goals
Thinking with the three goals in mind, it has helped me set expectations and act as a framework for how I execute my research strategy as I believe UX is a mixture of User Needs, Project Feasibility and Business Viability.
Discovery
I began my research by browsing through some existing food apps and observed key features that made each app stood out of its competitors. This exercise helps me identify gaps within these apps and informed me what features that Snapchef needs to be able to gain a competitive advantage.
I noticed that apps like Yummly are integrating Artificial Intelligence to enhance their users’ experience and this greatly influenced my interest in Artificial Intelligence. When doing my domain research, I was surprised to find out that this technology has actually been experimented by MIT Computer Science and Artificial Intelligence Laboratory(CSAIL). The technology is called Recipe 1M and it is a neural network that stores more than 1M+ recipes and images. My rationale was that by using this technology as Snapchef’s Unique Selling Point, it would not only improve the user’s experience, it would also attract more users to using Snapchef. The built-in Artificial Intelligence would “scan” the food and suggest a recipe based on the food that is depicted.
To validate my hypothesis and further understand my users, I conducted quantitative research in the form of a survey to better understand their cooking and eating habits. I collected results from 36 users and here are some insights that I receive; 70% of my users have tried recreating restaurant dishes at home and that most of them are females ranging from 20–35 years old.
Getting to know the users
While surveys are a quick and easy method to gather user data, qualitative research methods like user interviews let me dive deep to ‘what’ the users are actually thinking and also their current process of recreating a dish. Here are some direct quotes from users;
Planning
The first step of my planning phase was to analyze my research findings and then group them through similar patterns and commonalities with an exercise called Affinity Diagram. It has helped me categorize insights that stood out and to focus on their pain points to turn them into design opportunities.
To summarize here are the major pain points the users' experience;
- When recreating a dish, users don’t know how much ingredients to put in as some of them only saw the ingredients from the restaurant menu
- Not being able to find a recipe they want for a specific restaurant dish
- Having to do a google search to find a substitute ingredient
- Too many choices of the recipe and don’t know which one to choose, ended up spending a lot of time searching online
- Pictures by the publisher can be biased, some of them feel like it is more relatable if the users share the same experience as them
Who are the users?
After working on the affinity diagram and analyzing all my research results, I came up with two types of users. My first user is a 23-year-old Grace berry who is an engineer in training.
Grace is a foodie who loves to explore restaurants. She tries to eat out on the weekends and cooks at home on weekdays to be more economical. Being a foodie herself, she also likes recreating restaurant inspired dishes for fun, however, she ends up spending a lot of time researching for recipes online and asking people around her who know how to cook them. Moving on to my second user; Marie Samuels.
Marie is a cooking and food enthusiast that spends most of her days creating dishes. She hopes that she could start her own YouTube channel and open her own restaurant one day. Marie would visit new restaurants for inspiration and would attempt at figuring out their recipes.
However, in this case study, we will be focusing on Grace as my main user. The journey map below shows Grace’s current process of recreating a restaurant dish. The sentences that are highlighted in red show the pain points experienced during her process. This exercise allows me to dive into their pain points and identify room for opportunities in a form of features.
Application Feature Prioritization
After working on the Affinity Diagram and Journey Map, I brainstormed potential features that could be incorporated into the App. However, I felt that there might be too many features and I don’t want to overwhelm the users with too many options as it may lead to bad user experience. I decided to use a feature prioritization exercise by categorizing them into 3 classes; Must Have, Nice to Have and Not Needed. By aligning it back to the main user goal, which is to recreate a restaurant dish at home, I only included features that are the most necessary for a user to achieve this goal.
Information Architecture
After solidifying the features that will be added in the App, I created the Information Architecture to holistically envision how the overall app would be populated. Features are then grouped in sections that make the most sense to the users.
Grace’s User Scenario
Grace is having her weekly Saturday meet-ups with her girlfriends. They decided to grab lunch at Cactus Club and ordered their Szechuan Chicken Lettuce Wrap. She liked the dish so much that she wanted to try and recreate it at home, she checks the menu and wanted to know the ingredients being used. She spent a lot of time researching online and was not able to find the exact same recipe. She then asked her friends if any of them had ever tried to recreate it. One of her friends suggested that she download Snapchef, an app that lets you scan your food and suggest you recipes of restaurant-inspired dishes.
User Flow
Next, I planned out a series of steps to how a user like Grace would flow through the app. It would consist of two different user flows, the first flow would be when Grace is at the restaurant and she just downloaded the app and the second would be receiving a push notification at home to be reminded of her saved recipe.
Design
Low Fidelity Sketches
Before diving into digital wireframing, the first step I did was creating hand-drawn sketches. Hand sketching allows me to visually design how the app would look like. It also allows me to do layout iterations quickly and effectively.
Low Fidelity Wireframes
Next step, I translated my initial sketches to digital wireframes using Sketch. I then prototyped our Lo-Fi wireframes using InVision and did usability tests with my users.
Visual Design
Moving on to the Visual design of the app. The primary colors I used for the Snapchef are red and yellow. Red is stimulating and is usually associated with hunger as it is a color that could jumpstart our appetite. I have yellow as an accent as the color yellow resembles happiness and I want users to feel excitement and joy when using the app.
As for the Typography, I used Proxima Nova as the main and the only typeface to strive for simplicity. I wanted the app to have a modern and clean look to complement the look and feel of other meal apps.
The name Snapchef can be interpreted in two ways, be a chef in a ‘snap’ or ‘snap’ an image and be a chef. I hope by using the word ‘chef’ would inspire users that they don’t need mad cooking skills to become one and that Snapchef would aid as a guide for their cooking experience. I also made the logo to be very simple and straightforward, but significant.
Usability Testing
After creating low-fidelity wireframes, I conducted some usability tests to validate my designs. I get to observe users’ frustrations and discover which area of design works and which need improvements. Here are some feedbacks that I received:
Feedback #1: Tips for substitution should be more prominent.
A feature that Snapchef has is that you would be able to see substitute ingredients when you hold on the bolded ingredients. However, I noticed that most users miss the tips instruction and a concern was that if you hold, there is a chance that the users’ finger might cover the screen. Therefore, for my final design, I made the tips instruction more prominent by adding icons, a yellow outline and differentiating substitute ingredients with bolded red color.
Feedback #2: Request recipe from Profile
When I ask my users to complete a task where they should request recipes, it is not their first reflex to go to the community tab to send requests, instead, most of them go to their profile and click on their request tab. On my final design, I decided to incorporate both request recipe form from both the Community tab and Profile.
Feedback #3: Camera/Community icons are not relatable
When users see the camera icon, they expect to see a “click” button to capture the image, however, the Snapchef scans your food image and therefore changing it to a “scan” icon would be most relatable. Some users are unsure of the community icon and tend to click on each tab to figure out the contents, therefore, I decided to include text under the icon to minimize users’ steps.
Feedback #4: Push-notification
As I will be sending push notifications to get the users back into using the app, a feedback was that it is necessary for me to include an “allow to send notification” permission as part of the onboarding process.
The Final Design Solutions
1. Simply Scan Your Dish
When dining at a restaurant, users tend to minimize the usage of smartphones as they prioritize quality time with their company. The AI that lets you scan and depicts a recipe of your food will save user’s time and at the same time, draws in users to use the app.
2. Share Recipes, Tips & Pictures
By sharing recipes, tips, and pictures, users feel a sense of community and develop trust with the recipes provided as users feel it is more relatable if they share the same experience.
3. Request Recipes
The restaurant industry is constantly changing and growing, in order to retain users, the app should be able to provide the recipes of dishes they are looking for. The request recipe feature helps the app and its users to be aware of recipes that they would like to see.
4. Substitute Ingredients
Users are now able to view ingredient substitutes within the app. They no longer need to exit the app to do a google search for substitutes and prevents a broken user flow.
5. Featured Top Snapchefs
Users are able to get featured as the Top Snapchefs if they post recipes and gain likes. This feature is useful for users who want to use Snapchef as an opportunity to gain popularity.
CLICK here to view the prototype!
My Reflections and Learnings…
Though the timeline is pretty short (4 weeks), I really enjoyed working on Snapchef as this project idea sparked from a personal pain point I experience. However, being given the freedom of choosing your own subject and setting up your own scope; the scope ended up to be really huge and you feel the need to add all kinds of features that would cover all user’s pain points. Here developed a greater understanding of why businesses use an MVP approach, and then add more features as they get user feedback. I was also excited to be working on the UI design for Snapchef, I was able to understand deeper the importance of using and implementing a design system, as it helped me a lot on productivity and effectiveness.
Thank you for spending time reading my case study, If you have any feedback, I’d love to hear from you. Drop-in a hello to santosa.jessicaa@gmail.com or check out my portfolio site www.jessicasantosa.com ! :)
