Lemonade
Creative Meal Prep
Mobile App
Lemonade Creative Meal Prep Mobile App
We designed an app that helps people prepare their meals efficiently, easily, and joyfully.
TIME LINE
MY ROLE
DELIVERABLES
TOOL
5 weeks
Group Project
Research
Ideation
Wireframes
Visual design
Animation
Illustrations
Research
Stories
Wireframes
Animation
High-Fi Flows
Prototypes
Figma
After Effects
Illustrator
Paper and pen
BACKGROUND
54% of Americans
are cooking more than they were before the pandemic.
A study done by Hunter, a food and beverage marketing communications firm
The Covid-19 crisis is changing everyone’s life at once.
When you cook at home...
Have you ever...
looked through the pantry and fridge but don’t know what to cook with?
Have you ever...
tried meal prep again and again, but you just can’t turn it into a consistent habit?
Have you ever...
felt cooking has become a bigger part of your life since you started working from home with the COVID-19 crisis?
PROBLEM
Why are people struggling with cooking even with recipes?
We conducted competitive research of other meal prep apps and talked with 30 interviewees. We got the following key insights:
-
The recommended recipes don't match the ingredients in their kitchen.
-
They don't like to go outside frequently to buy food.
-
During cooking, they feel annoyed by swiping the screen back and forth with fingers to check the recipe.
OPPORTUNITY
How might we help people prepare a meal more efficiently?
Because:
Recipes don't match the ingredients
Swiping the phone screen during cook
Don't like buy food frequently
People need:
Customized
No Mess
Save Time
SOLUTION OVERVIEW
Scenario
I think people need a recipe app that will always recommend the recipes matching what they have in fridge.
Food Manager & Hands-free Cooking Mode
PART ONE
"What's in My Fridge?"
Make use of what you have in the "fridge" to do meal planning and save time.
By adding ingredients at hand, people can get customized recipes without searching hectically through apps or going out to shop for the missing ingredients.
This directly solves the problem found in the research:
Ingredients were no match for the recipes.
PART TWO
Hands-Free Cooking Mode
Start Cooking Mode features a voice assistant that allows users easily to control the reading of recipes during cooking without causing a mess on the screen.
This directly addresses the other problem highlighted in the research: People feel annoyed by swiping the screen to check recipes during cooking.
DESIGN DETAILS
Lemonade
Lemonade provides a set of features that aim to make meal prep efficient and easy. It creates some tools such as "What's in My Fridge", hands-free Cooking Mode, preference settings to help users find recipes based on ingredients they already have and personal preferences and make recipe-reading nice and easy. By offering personalized recipes, it can help users waste less food and eat fantastic meals. Once getting into the habit of using Lemonade, people will find cooking more joyful.
Why "Fridge" works?
01
Personalized Recipes
Start by adding to the "fridge" the ingredients users already have on hand. After available ingredients are added, Lemonade will suggest a variety of recipes based on the food in the "fridge" and users' personal preferences.
​
Also, with one click, users will clearly know how many ingredients are left at home. These ideas will help users waste less and save more.
Typeahead Search
Customized
Save Time
02
We learned from some other recipe apps and found that using typeahead search and canned ingredients list will allow quicker access to target words and save time.
Design Tips
Use truncation
In the ingredients list, the words will be set a maximum of 2 lines long.
04. A negative space is a key for a good design
In the final version of "What's in my fridge", we removed the fridge illustration after opening it. By doing this, we could add more breathing space in the UI and relax the overall interaction of the user's experience with the UI.
After iteration
If users input some words not to be included in the typeahead searching list, there is a message that will show that "No results found". Users can continue to complete the word inputting, and just tab the 'Done' button, users can input manually.
01. Think of an edge case for the food list
Use truncation when showing the drop-down food suggestions.
When text is too long to fit in the layout, we shorten it and replace the missing part with ellipses. This is a very important part because these designs will allow developers to know how to code in all situations.
Before iteration
03. Design for "Not found"
02. Avoid dropdown list when there are more than 10 options
A long dropdown list that requires scrolling makes it hard for users to choose their choice. I designed this list to be limited to 10 options, The more words users typing the target word will close and the options range becomes smaller.
Food Management
"My Fridge" lists tracks the freshness of each ingredient. With this feature, it can help maximize each food freshness and make diet more healthy and reduce food waste.
Save Money
03
Design Tips
Why create My Fridge List
After
After two iterations, we designed this fridge list with vertical scrolling interaction which can most effectively and clear display food and its expiration date.
Before
Change position of the button on the home page
We changed the hover button on the bottom to a fixed button on the top. The change in the size and location of the button aims to draw users' attention and increase the click-through rates. This is very important. Inputting the available food at home and personal preference could allow our app to show more personalized and easy-to-cook recipes for users.
According to the interview result, we found many people will stock up food once a week or longer. However, they just put all the ingredients inside the fridge. Sometimes some food left in the fridge is forgotten to eat, and some of the ingredients easily expire. To avoid food waste, we designed this Fridge List section under the "What's in my fridge" function.
Why "Cooking Mode" works?
01
Voice Assistant & Timer
With voice assistant, people can go back-and-forth of recipe cards by simply saying "next" or "back". This feature, along with Timer, allows people to focus on cooking rather than how to unlock their phones with food-coated fingers or checking time.
​
The app includes a progress bar on top of each recipe card after entering into Cooking Mode. This will help people to know where they are when following the recipe.
No Mess
02
Feedback & Update
After cooking, people will be asked to give a rating on this recipe. Their feedback will weigh in recipe recommendations next time.
​
People will be asked to remove the ingredients that were consumed this time from "What's in My Fridge" list so that they will get updated personalized recipes next time.
Customized
Noisy environment
After iteration
Multiple selection and deletion
Presenting a list of selectable options which allow users to make multiple selections and save their time. However, one of the biggest constraints on mobile is screen size. So that I may design this section in a horizontal swiping action.
​
Also, we use the line in the middle of the text to show the removed ingredient. Testers mentioned this design can clearly express a consumed food.
Go to the next step manually by tap the arrow icon
Before iteration
I was concerned that when users cook in a pretty noisy environment, it is difficult to use the voice assistant. So in the iteration, I designed an arrow tab that will allow users to go to the next step manually.
Design Tips
Customized Meals
Onboarding: know your favorites
People can choose their preferences when they log into the app for the first time. Lemonade will recommend the recipes which are tailored to that user. This will save time on browsing or searching various recipes.
User Profile & Cooking Alarm
The Other Features
User Profile & Preference
You can review your favorite recipes on the Profile page. You can also change your preference any time later.
Creating Lemonade
"I feel cooking should be fun and relaxing. Why do I feel so struggling whenever I stand in the kitchen?"
One Team Member
Defining the Problem
After the interview, we created Affinity diagrams, this visualized structure helped to extract the users' pain points and core needs, which are valuable insights.
Learn From Others
We studied some other meal prep apps.
Some of the apps have customized recipes for users such as vegetarian and vegan. Others have a large scope that even includes selling their own kitchen products.
​
Among all these features, there are still missing pieces: saving time and money for meal prep -- people's core needs to be reflected in our research.
Information Architecture
We created Information Architecture to visualize the architecture, features, and hierarchy of our app. The flow chart helps us collaborate more fluently and supported us to complete the prototyping.
.png)
Research Works
There are more researches about Lemonade, see more research documents please click the button 👇
Reflection
Collaboration is power
Creating Lemonade was a great experience. It allows me to learn from one another and spark various ideas through discussion.
Narrowing down scope is important
The important point that I learned is to focus on the user's pain point and solutions based on the research. The more deeply extracted the more focus on.
Increase working efficiency
Only have 5 weeks to deliver this project was also a nice constraint that demonstrated to me the ability to work smart and quickly.
Next Steps
1. If given more time I would have a further iteration on the prototype’s user experience as we were never allowed to conduct user testing in this final version. Overall it was a very rewarding experience, and I appreciated that my idea finally became a great project. Thanks for the cooperation from my teammates.
2. Create a weekly meal plan based on the ingredients people have and freshness to save more time and keep a more healthy diet.
THANK YOU
OTHER PROJECTS
