Weekly Meal Prep

Mobile Application

Personal project
My role: Product design

The WeeklyMealPrep app is a good choice for people who want to spend less time in the kitchen. This app helps you not only prepare meals for a whole week but also gives you a way to reach your nutrition goals.

Background Information

I was inspired to create this app after having conversation with my friends when we shared our cooking routines. I realized that making meals for dinner every night was a challenge to most of us while we usually have a hectic schedule and commonly coming home late after work. There were several times I found myself staring into the fridge searching for cooking inspiration, but after a long day at work, the creativity was not on top. The idea of preparing meals for a whole week ahead of schedule seems a benefit for most people in this case. It’s especially good for busy people when it comes to time-matter and healthy eating plans.

...

Process

User research > User Persona > Ideate > Wireframe > Visual Design > User Test > Final Prototype

User research

The survey

I started this user research with the assumption that the target users will be young people. They are students or professional working persons who live in big cities and have an active life. I developed a survey with Google Forms then distributed it among multiple groups of the working profession on Facebook and Whatsapp.

The purpose was to define:

1. Users' cooking habits
2. What motivates them to cook at home on daily basis
3. The pain points if have during their cooking process.

The online survey includes 8 questions and had completed by 108 people that provided me the quantitative data needed to validate my assumptions.

Keys findings:

• Users occupation and their cooking habit.
  More than 70% of people who did the survey are office staff and students in the range of 25-35 years old. They usually spend 20-40 hours or more per week working and studying. But they still try to cook meals from several times to once a day per week.


• Motivations.
  Around 85% of them enjoy cooking at home for some reasons: cost-saving, healthy meals, having dinner with family, etc.
  Here are some of their thoughts about it:
  - "It's safe and hygiene. I also can customize the ingredients based on my taste."
  - "It's healthy and saving a lot. I feel pleasure while cooking and enjoying the food I cooked."
  - "Very interesting! I enjoy my cooking time and also able to share that inspiration with my friends."
  - "It’s better and safer than eating out, besides I can improve my cooking skills."
  - "It's cost-effective and I can cook authentic dishes which I could not easily find in the nearby restaurants."


• Pain points.
  Throughout the cooking process, the most common problems that people face are:
  - It takes a lot of time to plan, shop, prepare, and cook --> 48%
  - They don't have much time for cooking --> 44%
  - Some of them don't know what to cook & how to cook --> 13-19%

User Interviews

To get more qualitative insights about people home cooking process, I conducted user interview with three people based on the following questions:

1. What's your typical weekday like?
2. Can you describe your food preparation and cooking process?
3. How do you create a meal plan?
4. What does your grocery shopping list look like?

Besides, I observed two people, one male, one female while they perform their daily activities. The goal is to understand their natural behavior without interrupting them or affecting their routine.

The takeaways:

• All of the people who participated in the interviews and observation sessions go to work 30-40hrs per week so they prefer to spend 3-4hrs on the weekend to plan and shop grocery for the upcoming week.
• 3/5 do meal preparation and cook right after they get home from the grocery stores. 2/5 do meal preparation, keep it well in the fridge, and cook later on weekdays.
• Some of them use the "Note" - one of the mobile applications to create grocery lists, while, others use a piece of paper to do it. These shopping lists are about to keep them stay on track and avoid wasting food.
• To prepare meals for a week, people tend to pick around three major protein dishes to start. Then combine each of them with veggies, fruit, etc. to balance their meals.
• They google cooking instructions or watch tutorial videos on Youtube if they want to try new recipes.

Ideate

Sitemap

I created sitemap to see how the navigation of the app should be structured. I wanted to identify where content will be placed in order to get the overview of screens as well as the relationship between them in a system.

Skeching the ideas

During the early stages of the design process, I drew paper wireframes and reviewed them several times before going to computer works. By this way, issues are caught earlier. I learnt that I was in started identifying minor and larger issues much sooner than I thought about it before.

Wireframe

Mid-fidelity Wireframe

When paper wireframing was relatively good, I started to transfer these sketches to mid-fidelity of the layouts, using the 8x8 grid system to maintain consistency of elements and balance the design's hierarchy.
At the same time, I created user flows to make sure I did not forget any steps that it takes for a user to complete a task.

Overall, the design tries to do two things:
1) First, helps users create a meal plan then based on that meal plan, they can generate the corresponding Gocery List to shop ingredients.
2) Second, helps users get more cooking inspiration as well as provides them more helpful recipes to follow.

Hi-fidelity Wireframe

In an attempt to attract as many users as possible, I took my time to create a strong visual design, making sure that the visuals are as good as possible. I worked on a style guide, typography, icons and food images.

Usability testing

I took these layouts and tested with 3 users, asking them to complete 2 tasks:

1. From RECIPE screen, create a meal plan for a week that includes main corses, salad, fruit or dessert then generate the appropriate grocery list for ingredients shopping.
2. From SHOPPING LIST screen, create a new grocery shopping list in case you had a ready Meal Plan in your mind already.

By watching them navigate the app, also listening their concerns, I realized there are two common things made them quite confuse.

Problem #1: Users did not pay attention much to Generate Ingredients feature.
When users finished adding dishes to create a Meal Plan, at MEAL PLAN DETAILS screen, instead of Generate Ingredients right away in order to quickly create Grocery Shopping List, most of them have a tendency to switch to GROCERY to pick the essential ingredients. It meant the action [Generate Ingredients] was ignored. Users did not pay attention much to that fucntion. As they said, since it's too small to catch the eyes.

=> Solution: Move [Generate Ingredients] to the bottom of screen and transformed it to an actionable button. This way, users were instructed what's the next step was supposed to do.

Problem #2: Users were confuse about which shopping list was the one they had just created.
After finished creating a grocery shopping list, users didn't know exactly wether the list they had just created was saved sucessfully or not? Since there wasn't different at all from the old items with the new one. The layout was just basically black and white and the new one just looks the same as others.

=> Solution: Use indication colors to distinguish the items in the list. Besides, highlighted the one that has been creating, unless users tap to see it.

Final prototype

...

Conclusions

It was really rewarding to create a solution to a problem on my own. I got to navigate almost all of the UX process solo and learn my strengths and weaknesses along the way. Understanding the UX process through a user-centered lens has given me a great amount of information needed to design apps with the user in mind by understanding the motivations and desires of them.