Meal Box
Your time saver for healthy meal prep
Background:
Why I created this app? With a fast-paced lifestyle, meal preparation (later as meal prep) becomes more and more common. There are always frustrating moments when always cook the same meals; spend too much time finding quick and delicious ideas; miss some ingredients while cooking; bought too many products than needed, etc. Meal box is a meal prepping assist tool that help you avoid the difficuties above, and makes your meal prep process more efficient.
Project type:
Self-directed


Role:
Product designer


‍
Duration:
10 weeks
Aug-Oct 2022
‍
Tools:
Figma
Adobe Illustrator
- OVERVIEW -
Prompt
It is a pain preparing meals
This issue came about when I was at a very tiring period of making my meal preparation. When I raised the topic up during our lunch hour, I didn't expect many of my colleagues have the same problem. Many of us bring lunch instead of eating outside to save expense on meals, but we all suffered some frustration like always having the same food and spending too much time searching for recipes, etc.
Initial problem statement
What if I create an app that helps people make quick and healthy meals?
Solution
This case study is my journey on how I used the design process to explore this initial question.I was inspired by a Youtuber Downshiftology, who shares recipes and tips for simple and healthy living. It have helped me make my lunch packing more efficient. Then I was thinking wouldn't it be nice to have an app that could focus on these quick meal recipes?

1

Main feature 1
Easy recipes finish less than 30 mines
The Chef's recipes is a collection of easily cook meal combinations that can be finished within 30 minutes or less, and they are also healthy and nutritious balanced.

2

Main feature 2
DIY your own meal box
Like packaging your lunch box, DIY your mealbox allows user to create their own meal combination. After choosing a first meal, system will suggest the rest based on nutrition balance and efficient cooking time.

3

Main feature 3
Automatic grocery lists
Meal plans and grocery list are connected. It automatically generates a shopping list based on your meal plans, and it's easy to transfer the list to online groceries and place order for delivery/ pickup.
Design approach
- RESEARCH -
I started the project having a vague idea that I hope to help people make meal preparation more efficient and less painful. The research helped me to better define my project scope and gave me a better clue of the potential features of the product.
Understand the existing market
Competitive Analysis
How existing products help solve the problem?
I first looked into the market to examine whether existing products can help people better prepare their food. I picked the highest rated apps from Apple AppStore and from Google search results. Besides, I asked my colleagues what apps do they often use for their meal preparation. Here are the few I looked into:
Key findings
  • Existing meal preparation apps are either too intelligent (recipes automatically generated weekly) or too customized (user need to add each meal for their daily meal plan calendar) to decide on their meal plans.
  • Apps like Whisk and Yummly require user to manually plan meal by meal, and layout in meal plan calendar. User need to plan out what to eat for each meal, which is overwhelmed for busy crowds and it takes time and effort.
  • Mealime is the most flexible app in terms of building a meal plan, but the filter function is too week to help user find their ideal meals.
  • Some apps target body-goal-oriented users who aim to keep fit, loose weight, etc) . They generate weekly meal plans based on users' goal, and the meal plans primarily help user to track calories and control food intake.
  • People use tools like Youtube or Yummly to find recipes. If they clearly know what to make, these tools role as 'cooking dictionaries' to help find recipes quickly. However, if they do not know, it takes time browsing and find the 'right' recipe.
Opportunities
• Based on the research, it's clear that users don't need another recipe app, since they already has some mature tools, like Yummly and Youtube. Instead, they are struggling in find the "right" recipe, that can help then get the meals done quickly and easily. For the other meal plan apps, I think it is more suitable for users who have adequate time to do planning for each meal.
• As a result, this research motivated me to create a tool that is tailored to busy schedule users, to assist them be more efficient with their meal preparations and save time in the whole process.
‍
Re-define project scope
Design for busy meal-preppers
Therefore, I decided to focus mainly on busy meal-preppers. Here I wrote down the description of my potential users:
Due to the potential users that I can approach in my network in a limited timeframe, my focus in this project concentrates on students and young professionals.
There have some common characteristics:
  • They cook instead of ordering take-out to save budgets.
  • They try to avoid cooking every day. Instead, they prepare meals ahead of time for a short or period of time in order to save time on other things.
Refined Problem statement
For people with busy schedule, How might we optimize the meal prepping process and make healthy, quick meals more efficient?
Understand the users
User interview
Empathize with users
To understand how users currently do meal preparation, what goals they try to achieve, and identify their painpoints, I conducted user interviews with five people. During the interview, I kept the questions open enough for participants to elaborate on their meal prep experience, especially I asked them to recall their meal prep process and provide as many details as possible. I also follow up with questions while they are describing the process, from which I could spot their main pain points.
Key findings
Motivation
  • save money instead of eating outside or order takeout
  • be efficient and save cooking time than cook everyday
  • manage daily caloric intake


    ‍
Frustration
  • spend too much time in cooking
  • spend too much time deciding what to make
  • Always cook the same food
  • getting lost in grocery store
  • bought too many ingredients than needed
Expectations
  • the whole process can be efficient and timesaving
  • meals can be quick and easy to make, but also delicious
  • meals are healthy and be able to get a balanced nutritious intake

    ‍
Learn from the current user journey
Existing user journey
Figure out the problems of current flow
To better guide the design and empathize with the users, I further synthesized the interview result of user's meal preparation process. I developed a user journey map to visualize how user usually go through their meal-prepping process, understand their feelings, and identify their pain points.
Key findings
What's wrong with current user journey:
Users always start with excitement and motivation, however, the emotion become negative as it progressed.
People's frustrations come from making decisions, spend too much time on looking for the recipes, and cooking
It is obvious from the mapping that there are a lot of back-and-forths in the meal preperation process, which is the main reason that making the process time-consuming and tiring.
- IDEATION -
Redefine user flow
New user flow: simplify iterative user journey
From the study of existing user journey, I found the biggest problem that influences user experience includes a lot of back-and-forth. Thus, I propose to have a clear and linear process to make it more efficient. To avoid those repetitives, I proposed to make all decisions clear and ahead of cooking, so the whole process becomes one central task:
Sketch & lo-fi wireframe
Quickly visualize ideas
Diving into the design phase, I kept in mind everything I had learnt from the research phase so far - the target audience, their pain points, and the new user flows. I started sketching these ideas on paper. It allows me to quickly visualize my concepts, and effectively do layout iterations.
Next step, I translated my rough sketches to digital wireframes using Figma.
- design -
In this phase, my emphasis was put on visual consistency and how my interface and interaction could make the core concepts come true.
User flow 1 - Choose from chef recommendation
User flow
High-fidelity design
Evaluation & iterations
Main changes after usability testing
During the moderate usability test, I noticed that most users stared at the first page for a long time and making no decisions. I encouraged the users to move on by asking " can you tell me what you are looking at now and what are you looking for?" What didn’t meet my expectations was that my idea of including all relevant information on the home page left users overwhelming.
From the usability test, I learned that user prefer to read images than texts, and would read texts only when they cannot tell what the major ingredients are from the image. Thus, I enlarged the main images and minimized texts in the second iteration.
User flow 2 - DIY your mealbox
This part is what distinguishes my product from other existing apps. Unlike other products that users can only choose existing recipes/combinations to realize the process from selection to purchase by the app, this feature allows you to build up your own meal combination based on your preference.
For the first iteration, my initial thoughts was to keep user's habit: collect recipes first, then make plans to assemble them in meal boxes. I created prototype in Figma to get feedbacks from the potential users. However, the first idea doesn't result in a very positive feedback.
Iteration 1 - user flow
Iteration 1 - high fidelity design
Usability test
Why this is not working?
This original thoughts was intended to maintain user's habits: collecting dishes first, then users can combine them in any way into meal boxes. However, during the usability testing, what surprised me was that, users all felt glad during the phase of choosing meals, but when it comes to the assembling meal box phase, most of them felt confused and don't know what to do when meals are more than meal box .
Iteration 2 - user flow
Why this works better？
After usability testing, I adjusted the order of making decisions. The goal was to make it very clear and intuitive: user should think about how many dishes to include in one meal box first and choose a meal box, then browse and choose dishes accordingly. After each dish selection, the dish will visually fill into the meal box, which is a clear reference for user to see how they want to combine the dishes for each meal.
Refined high-fidelity design
Bonus Design
Onboarding
Onboarding is the first interface that introduce MealBox to new users.  To help user quickly understand what this app can do and get acquainted with the functionality of the product in just a few seconds, I created some interesting, informative illustrations with keywords being highlited.
Visual Design
Visual
When deciding the visual style of the app, I kept in mind that the goal of MealBox is to easeout people’s pain of meal preping, make it less painful but enjoyable., and make the meal prepping process as easy as playing a game. Therefore, I created the mood board with the keywords delightful and fun. To keep the page concise and easy to read with bright colors, I use flat design and minimalism style.
- REFLECTION -
01 The Importance of narrowing down scope
It was my first time working on a UX project. With such a excitement, I had numerous ideas and would hope to resolve all user's pain points. However, I realized the difficulties of realizing these ideal functions all at once. As I progressed, I started to narrow down the scope and concentrate on the main intuitive experience for the users. This focus allowed me to pay attention to even the smallest details. Ultimately, this refinement process resulted in a successful outcome and proved to be a valuable lesson in the importance of narrowing one's scope to drive a project forward.
02 The Importance of testing earlier and test with a lot of users
There was a challenging I faced during the design - how to balance the limited time I had with the limited potential users I could reach. I ultimately decided to skip low-fidelity for user testing and move directly to high-fidelity prototypes testing, because I wanted to avoid influencing user decisions with pre-existing knowledge of the app's functionality. However, after conducting hi-fi testing, one entire user flow had to be changed. If I had more time, I would start user testing in an early phase, and would conduct another round of user testing to further simplify steps as needed.
03 Do than perfect Attitude
I have always found it hard to make decisions, especially design decisions that would potentially influence way more people than I could imagine. This time I practiced forcing myself to use not just what I learnd from the user, but also instincts as a designer, to quickly get the ball rolling. It is always the iterative process that brings a design to a better state, and I just have to start somewhere.

Nice to see you here!

This website is best viewed on desktop

Made with passion © Yang AN 2023