Case study: Food substitution recipe app
One Dish — Two Meals: FoodSwap App
Overview
During the pandemic, it was next to impossible to dine outside. My friends and I felt this cabin fever because all of a sudden the social and human connections were taken out of our lives. To fill this gap, my friends and I decided to organize a potluck once a month (with all the safety precautions in place). Having a large friend circle made it hard to please everyone, especially when friends have different food requirements like vegan/ meat-eaters, for example. To decide on a menu, we would have extensive discussions but would ultimately give up.
While trying to figure out an alternative, I e-met Melissa Vela, another UX Researcher, at a UX conference who was facing a similar situation at home, where her daughter refused to eat meat. Since she was looking for recipes that would cater to vegetarians and meat-eaters to reduce her cooking time, we decided to work on this problem together.
My Role: UX Researcher and Designer
Duration: 1months| Individual Design Project
Methods: Desk Research, Competitor Analysis, Screener Survey, Interviews, Affinity Mapping, Persona, User-flow, Wireframe, Lo-fidelity and Hi-fidelity Prototype. Tools: Miro, Figma, InVision, UXArmy, Youtube, Xtensio.
Objectives
Finding a way to make easy meals that can adapt to either meat eaters or vegetarians by substituting the meat with a vegetarian-friendly option for those friends/family members who do not eat meat.
- Empathize with the users
- Define if the users need an app, website, or a blog
- Bring ideas on how to satisfy these needs.
- Build a prototype to test my ideas.
- Implement my ideas in a final project.
The figure out a potential solution for this case study, I used Design Thinking, as it provides a solution-based approach for problem-solving.
Empathize
When Melissa and I shared our problems we realized there might be several people going through similar situations. Upon some informal research, we found parents who are working full time or who are doing business have very little time for cooking.
Traditionally, cooks prepare two separate dishes when it comes to different food requirements in a family. This causes the cook to spend more time in the kitchen. The reasons for different food requirements varied between dietary restrictions, health issues, food choices, religious reasons, allergies, food sensitivity, etc.
What are the benifits to providing cooks with recipes for dishes that include substitutions for alternate food type?
- Better user experience
- Faster decision making
- It saves time and energy
Domain Research (Primary Research)
At the very beginning of the problem, I did desk research to figure out if users actually need an app for food substitution recipes.
Competitor Analysis (Secondary Research)
In order to discover what others have done and to see what was missing from existing apps, I also conducted a competitive analysis of the marketplace which included different recipe books, blogs, websites, and app experiences of my brand’s competition. From this, I was able to identify the areas in which my brand excels and also opportunities for improving the brand’s experience.
Target Audience
To elicit specific kinds of information from the users, I developed a screener survey. I targeted the main person who cooks in the family/group and the challenges they face while preparing meals. A few examples of questions are as follows:
- How often do you cook dinner at home?
- How much time do you take when deciding what to cook for dinner?
- Does your partner and/family have different food choices as compared to yours? (vegetarian/gluten-free/vegan/meat/food allergies/food sensitivity)
- How much time do you spend cooking dinner each day?
In-Depth Interview
After the screener survey, I shortlisted those users who usually prepared two in order to discover what type of methods they use to reduce their cooking time. I conducted several user interviews and entered all the responses onto Post-it notes.
Quote from the users
“It is relatively easy to make things veggie or gluten-free but variety of dishes gets difficult. Would be nice to have more ideas up the sleeve for those occasions”
“I often cook vegetarian for myself but would love to have replicas of meat-based meals to try and make it more appealing to my meat-eating family members”
“I didn't know I could find food substitution recipes, would use it for sure if it was an app”
Define
Problem Statement
A cook needs a way to make cooking decisions when they have loved ones who have different food preferences, to reduce cooking time, and to prepare one meal instead of two.
Persona
On the basis of target audience and interviews, I focused on two types of users — working mothers with kids and a friends/roomates/couples with different eating habits. Creating personas helped me visualize their struggles and pain points and look into user needs so I could design features accordingly.
Ideate
Through these interviews, I saw a lot of patterns emerging. It helped me extract interesting information about our target users (main cook) who had a basic level of cooking experience. The majority of the users said they would like to have an app instead of a website/blog.
User Insights from Affinity maps
After putting the all responses into specific groups and analyzing the results, we noticed similar behaviors and pain points:
- Users hated cooking separate meals and so would, therefore, eat a snack for dinner and feed the kids microwave food.
- Some users ordered food from outside.
- Some users were sick and tired of cooking.
- Users usually compromised by cooking one dish that everyone liked.
- If the user had no kids, they decided to cook independently.
- Some cooks put in that extra time to cook one main dish with different add in’s.
- Users are interested in receipts which help them save time and cook one dish for all.
- Hard to decide which ingredients to use to substitute in a recipe.
Site Map
I created a site map to give a bird’s eye view of the app. This site map showed how pages are prioritized, linked, and labeled. Having this site map helped me plan the app before I created it. The way how the content is organized is as important as the content itself.
Prototype
Sketch
To test my design ideas with users, I started with a basic paper-pencil prototype. This is my first experience in creating a lo-fi prototype and testing it out, turns out it was really very helpful. I found it to be one of the best ways to test the navigation and workflow. It took me very little time and resources to quickly pen down my ideas and test them out with a handful of users.
Wireframe
After creating the paper prototype, I conducted a low-fidelity wireframe and conducted a small sample user testing to test my solution with the users. We received a lot of feedback about adding different features such as a shopping list that could be linked to a grocery store, making a user suggested favorite screen, etc. We included such suggestions in our wireframes.
Prototype: Hi-Fidelity
Try out the prototype here
Test
User Testing
After creating the hi-fidelity prototype, I conducted a large group user testing to see if users would be able to smoothly navigate the product and successfully complete a list of tasks. I gave participants 6 tasks each. Each task had a scenario where they had to go through the prototype to complete it successfully. Some of the tasks were the following:
“You’re planning a dinner for all non-meat eaters. Search for recipes that do not include meat.”
“You’re now ready to go grocery shopping. Check your saved shopping list to see what you need to buy.”
“Imagine that you really liked the Zucchini and Tomato Spaghetti option on the menu. Where would you look for its recipe?”
I utilized audio and screen capturing software for the user testing and asked the participant to speak aloud while performing the task. I noted all my observations on an excel sheet — each observation per my x-axis and y-axis. Then I used a bar graph method to find similarities among my observations and to group them according to success and failure.
Findings:
- Using an app delivers a better user experience and more accessibility than a recipe book.
- The issue of thinking about what food to substitute is resolved as the app provides detailed recipes cooking times.
- Users were given SUS after completing all the tasks, maximum users said it was easy to use and they would recommend this app to friends/family.
- The overall SUS score was between 87–75 which means users rated the app between average and excellent.
Future recommendations:
- Pescatarians' diet and other specific diets were not a part of this app.
- Could add a filter to include or exclude gluten-free options
- Could add a feature to select ingredients and the app would suggest what recipe you can cook.
- Linking shopping list materials to the availability in the nearby grocery stores and prices of all the ingredients.
Please comment below as to what others think would you recommend for the future! Thanks for reading!
I am new to UX Design, wireframing, and prototyping. It’s my first attempt at a design article, if you liked it, please feel free to *clap clap*. All feedbacks/comments are welcome.
References:
Competitor analysis — https://blog.hubspot.com/marketing/competitive-analysis-kit
Usability Testing — https://www.usability.gov/how-to-and-tools/methods/reporting-usability-test-results.html
Please sign up for a membership if you want to become a Medium member and enjoy reading articles without any limits. Medium will share a portion with me for any members who sign up using the above link! Thanks.
