Meal Planner feature added to Walmart’s application
Add a feature to an existing product, UX/UI, UX research, Figma
Background
Walmart’s current application and website offers recipes through tasty and sidechef. I noticed that they do not offer any time of meal planner, only a spot to save recipes.
I wanted to provide a way for users to add these recipes to a meal plan so it would be easy to access and find and plan their weeks. Through secondary research, I was able to see that a meal planning feature would be one that users would be interested in and benefit from.
problem:
Among economic co-op and developmental countries, the US is the most obese with a rate of 36%. With the amount of fast food available and the hustle culture that a lot of Americans live in, it can be hard to take time to grocery shop and make a meal. Let alone, stick with a meal plan when you’re tired at the end of the day.
research goal:
I want to understand the current trends and pain points associated with meal planning.
research methodoligies:
Secondary research
User surveys to discover trends and pain points
Competitive analysis
User surveys
10 people surveyed
All participants have done some sort of meal planning
All 10 participants plan for more than just themselves. Possibly a partner and/or their children.
key insights from research
4/10
spend 1-2 hours grocery shopping a week
5/10
meal plan once a week
7/10
spend less than 30 minutes planning their meals
Competitive Analysis
After completing user surveys, I was ready to see what was currently available to help users with meal planning. I compared Mealime and Yummly. Like Walmart, both of these apps connect to a grocery store and allow you to add ingredients to a cart directly from the recipe page.
Mealime
Menu type
important for recommending meal ideas to users
Meal preferences
Allergies
important for recommending meal ideas to users
Serving size
helpful for planning out as much users need for the week
Add a recipe
Adding own recipe
users can add & save their own recipes to generate shopping list
Meal Planner
Preference choice
Different menu types
Users can have a personalized meal plan
Reminder alarm
Users can set reminder
to plan their meals
Yummly
Progress tracker
Users can see the status
of their set up for their account
Setting up profile
Horizontal scrolling
Users can scroll through to see all options of category
Skip CTA
Users can skip if they
don’t have a preference
Filter tabs
Users can easily view recipes they have added by using the tabs.
Date slider
Users can navigate with
1 click forward or backwards to other days.
Reminder alarm
Homepage
Recommended for you
Suggested meals. Easier to meal plan if they choose one of those.
Add a recipe
Users can add recipes from browsing recipes or adding recipes they have saved.
Meal Planner
Bottom sheet
Prompts users to complete an action.
Personas
Ava represents the types of users who want to save time with their meal planning & grocery shopping. This type of user wants to spend more time doing other things and focus less on the planning and shopping. This type of user needs to be able to plan meals during little bits of free time throughout their day.
Sarah represents the types of users who are new to cooking and want budget-friendly recipes. This type of user wants recommendations for different recipes to try. This type of user isn’t familiar with meal planning.
“As a user, I want help to stay organized and committed to the meals that I plan for and grocery shop for. If not, I’m wasting food, money, and my time.”
How might we help busy users in efficiently managing their meal planning within Walmart's application to empower them to make quick decisions and stay organized,ultimately promoting a stress-free and convenient shopping experience?
Features set & Solutions
Home Screen
The home screen holds the calendar, recipes for the specific day being viewed, and the next weeks recipes. Most users noted that they spend less than 30 minutes meal planning. I wanted them to quickly see their plan.
Solution: By including the calendar and weekly recipes on the home screen, users have quick access to the most important feature of the meal planner.
Calendar
It was pretty obvious to me that the meal planner would need some sort of calendar because it wouldn’t be much of a plan without one! Users told me that they wanted to be more organized when meal planning. From my surveys, I learned that users typically plan for 1 week at a time versus a full month.
Solution: Since the is calendar set up as a slider it’s easy for the users to go to the current week or the next week with minimal clicking and without having to navigate a full month of planning. When scheduling their meals they can do the same thing.
Edit meal planner
With a small amount of time set aside for meal planning, users need an efficient way to edit their plans. Removing a recipe is super easy, with just 1 click. Changing the date of a recipe on the plan is familiar to users because this same UI they saw when scheduling their meals.
Solution: 1 click options for removing a recipe and familiar scheduling to change the date of a recipe makes it easy for users to edit their meal plans.
Low Fidelity
Mid Fidelity
High Fidelity
I like to begin my process with very rough low fidelity sketches. I find that it is the quickest way for me to brainstorm different ideas. From there, I move to mid fidelity to add more detail and focus on user scenarios. Lastly, I add the styles to the design and test the interactions with a high fidelity prototype.
Home screen
Calendar
Edit meal plan
Testing
Moderated Usability Testing
5 users participated
Usability testing was completed over video chat and in-person.
Succes Metrics
How does the overall task feel?
Is it easy to use, intuitive, and what they would imagine a meal planning feature to be for a grocery store?
Testing outcomes
5/5
completed all 3 task flows
5/5
ranked ease of use a 4 or 5 on a scale of 1-5
2/5
said the calendar feature wasn’t as intuitive and others they have experienced
Priority Revisions
Updated the home screen and created visual hierarchy so the calendar and recipes of the selected date show first.
Added the ellipses under the dates that have recipes on the meal plan. Highlighted the current and viewed date.
Changing the wording of “browse recipes” to “browse all recipes.”
Revised the wording “add to meal plan” to “change date.”
Complete user interviews instead of only surveys. Due to time constraints and trying to meet a deadline for my course, I chose to do surveys for this project. In the past, I have found the user interviews really guide the direction and features for the product.