2 months
Native Mobile App / Product Design
Product Designer
Figma, Adobe XD, Adobe Illustrator, Adobe Photoshop
1. Finding healthy recipes that match the ingredients you have in your fridge
2. Dieters find it difficult to come up with unique combinations of healthy foods to make another healthy dish (that isn't repetitive)
Problem statement: How might we make finding healthy recipes easier so that health-conscious users can continuously be motivated to eat healthy?
Develop a native mobile app that finds healthy recipes based on what users have in their fridge, freezer, and pantry. MVP:
1. Users are able to list their current fridge/freezer/pantry ingredients
2. Tasty diet finds and lists healthy recipes in 3 categories: “no extra needed”, “1 extra needed”, and “2+ extra needed.”
3. Users can edit their diet preferences and allergies in the settings tab and star recipes.
1. Constraining features and narrowing down solutions
2. Delays in user testing and getting feedback for final design iterations
Those on a weight-loss journey and who are health-conscious
1. User research & discovery
2. Conceptualize & develop solutions to pain points
3. Designing and developing brand identity
4. Produce lo & hi-fi wireframes and prototypes
5. Conduct usability testing
6. Produce final designs based on user feedback
I used the double diamond method to conceptualize, develop, design, and create Tasty Diet from start to finish.
One of the main challenges I faced was constraining my features- what are the core strengths tasty diet will have, and what are some "good to haves" to implement later? I've determined this through competitive analysis and through using an effort/impact matrix after user research.
The 80/20 rule has become popular when it comes to weight management, as it states that weight loss is the result of 80% diet and 20% exercise. That is, controlling your diet and eating healthy is vital. But as many dieters will know, often times meals will turn out to be the same thing every time - chicken breast, salad, and sweet potato. When it comes to dieting, what you cook up will be mainly healthy ingredients. But in the long run, how you can pair it with other ingredients to make a tasty but still healthy dish is more important. I could eat sweet pumpkin and boiled eggs separately, or I can make a pumpkin egg slut. The ingredients are the same, but they are two completely different dishes.
What ends up happening is that dieters will get bored of what they’re eating, and sometimes the less motivated will go back to their unhealthy habits. As a result, what’s important for these dieters is to find recipes that are both healthy and tasty, so that they 1. can still eat healthy with healthy ingredients, but 2. make it tasty and “fun” through unique combinations.
However, while there are many fitness and diet apps that provide healthy recipes, it is often hard to find recipes that are customized to your own fridge. Often times I would be able to find healthy recipes with no problem, but not be able to make it in the end because I wouldn’t have some ingredients.
Finding recipes is no challenge. But finding recipes that exactly match what you have is one. And for the college student who is on a budget to a working businessman who has no time to go to the store for that 1 ingredient, a customized recipe finder might be the answer.
Every product development begins with user research and discovery. I was curious how people felt about current fitness/diet and recipe finders. So I sent out a survey to 20 dieters (M = 10, F= 10) currently on a weight loss journey about their experience with making healthy food.
of users find their meals boring and/or repetitive
of users can find healthy recipes easily
of users find it sometimes challenging to find a recipe with existing ingredients they have
After affinity mapping and grouping user research into themes, we focused on 3 main pain points that were commonly said amongst users.
Dieting often involves eating the same thing every day, which gets boring and ultimately increases chances of losing motivation in the long run.
Users find it difficult to creatively combine healthy ingredients to make another healthy dish.
Even if users can find a healthy dish, often times this search process is a trial-by-error until they find a dish that calls for ingredients that users already have.
Given these pain points and user values, I also created our two personas, which will also serve as our ICP (Ideal Customer Profile).
Based on our insights and the exploration of our problem, I came up with the following problem statement:
Based on user pain points, I've decided to make a native mobile app that lets you list the ingredients you currently have, and gives you healthy recipes under 500 calories based on the ingredients you list. Using an effort/impact matrix, I did a feature prioritization and came up with 3 core features in this app:
List and be able to edit what you have in your fridge, freezer, and pantry
Receive recipes that you know for sure that you'll have the ingredients to. No more questioning "Will I have all the ingredients to this dish?"
Personalize your recipes by editing your preferences in terms of allergies, calories filter, and foods that you don't like
As always, I like to ideate first with paper/pencil or just drawing some quick sketches on my iPad for lo-fi wireframes. Then, I went ahead and converted my paper wireframes into digital low-fidelity wireframes.
Before designing the app, I tackled the visual aspects. I wanted this app to be simple and clean, so I searched for some existing food/diet/fitness/recipe apps to see how they were designed. I also wanted to design a logo that involved some cute but simple graphics, so I gathered my inspiration from different graphic logos and illustrations.
This app is called “Tasty Diet”, two words that seem too good to be true when combined (but dieting can be, and should be easy and tasty!) I played with a lot of typefaces and colors and ended up with this logo. The two main colors are yellow (the color associated with playfulness and happiness) and green (the color associated with healthy).
I then created a design system including tasty diet's logo, colors, typography, buttons, and other UI elements.
On the right shows what a user would go through when navigating through the app.
Using the design system and user flow, I created my high-fidelity wireframes. At this stage, I also created some micro interactions that are fun pleasant moments for the user.
Using the high-fidelity prototype, I conducted usability testing with 8 users. Writing a research plan made my goals clearer for what I wanted to learn through testing, and it also ensured an unbiased process for all participants.
1. Figure out if users can go through onboarding process smoothly
2. Figure out if users can navigate the app easily
3. Figure out if users can filter and edit their preferences easily
1.Can users go through the onboarding process successfully?
2. Can users easily filter and edit their preferences?
3. Can users understand what this app is about?
1. Time on task: how much time users spend going through the onboarding process
2. Conversion rate: % of users who can successfully filter recipes according to their diet preferences
1. Moderated usability study (through zoom)
2. Location: US (remote)
3. Each session lasts for 30 minutes
1. Age: 18-30 with a fair distribution of gender
2. English-speaking participants
3. health-conscious users
Here are some key learnings from participants after testing. They were extremely helpful in iterating on designs and guiding my final prototype version.
Work on finding recipes more easily - for example, being able to save recipes that users use often, including a filtering system
Be more clear about copy and make sure it's straightforward and self explanatory throughout app
Put editing preferences all in one place so that users can predict easily where to go if they wanted to change their food and allergy settings (previously scattered)
First-time users can input their name and make any diet preference and allergy settings. They can also skip the entire process and go straight to listing their ingredients. Existing users are automatically taken to the list overview.
Users list the ingredients that they have in their fridge (chilled stuff), freezer (frozen stuff), and pantry (anything not in the fridge and freezer). They can list everything in one category (and the finding algorithm would still work), but I thought it was a good organization tool for users to separate their list into 3 main categories.
After listing everything, clicking “find tasty menus” takes them to a recipe page customized to the ingredients they listed.
On the recipe overview page, there are three categories: “no extra needed”, “1 extra needed”, and “2+ extra needed.” In the “no extra needed”, one can make the recipe with the ingredients they have without having to buy anything additionally.
On the specific recipe page, the ingredients list is also specified as “must-haves” and “optional.” I included this feature because if ingredients are all “necessary”, there is a high chance that the recipe won’t show up in the “no extra needed” category if the user doesn’t specify one optional ingredient in their list page.
Thanks for reading this far! One limitation that I can think of at this stage is the amount of effort users have dedicate when listing their ingredients. Although the app doesn’t require them to input everything, the more they input, the better and more accurate recipe results they’ll get.
Are users willing to do this instead of looking for recipes through trial-by-error? This is something we’ll have to research to improve user experience. I also thought that the feedback on entering personal stats to get more personalized recipes was a great idea. Trying to lose weight? We’ll give you a recipe with fewer carbs. Trying to gain muscle? We’ll find something with more protein.
Although the user can specify their diet preferences in which they can indicate low carbs/ no sugar/ gluten-free etc., the current recipe suggestions are based on the same portion suggestions (2000 kcal per day diet).
1. Develop app so that users can enter their weight, BMI, height, and other important stats to give them a recommended nutrition intake and serving portions.
2. Add more filtering options, such as categorizing recipes by country/regions (i.e. Western/Asian).
3. A big stretch, but include a smart image-recognition AI so that users can take a picture of the inside of their fridge to recognize what ingredients they have automatically instead of manual input.
