How Might We Design a Way for Health and Fitness Enthusiasts to Prepare a Grocery List for Meal Prepping an Entire Week of Meals? A UX Case Study

Background:

Over the course of a week-long UX Design Sprint, Carley Calfee and Janice Choe were tasked with developing a phone to enable fitness enthusiasts to create a grocery list for a week’s worth of meal prep. Working through the University of Virginia’s Forge Launch academy, we were developed a case study using the following steps:

Problem statement: “How might we design a way for health and fitness enthusiasts to prepare a grocery list for meal prepping an entire week of meals?”

When first taking the time to think about our challenge, we had no idea what preferences fitness enthusiasts would want to have when it came to a meal prepping app. In order to fix this gap in our knowledge, we set out to learn from fitness enthusiasts which features they themselves would prefer if they were to download a meal prepping app.

Research:

Interviews and Surveys

In order to do our research to discover our users’ needs, we conducted 5 directed interviews in total and sent out a survey to 25 different people. From our interviews we were able to better understand respondents’ current meal planning routines as well as key features that users wanted implemented in their app.

From our directed interviews and survey respondents, our main takeaways were that users care about:

• Nutrition
• Ease of planning meals
• Ease of preparing specific recipes
• Cost per recipe
• Ability to find tasty recipes

Additionally, we also discovered the frequency with which users planned their meals, whether or not users already used grocery lists, and users’ likes and dislikes about meal prepping.

“[Meal prepping] helps me prep my meals and prevents me from buying unnecessary items”

User persona

For our user persona, we created a fictional user based on our interviews named Fitness Freddy. He is a young twenty-something fitness enthusiast, who works out 5 to 6 times per week. He avidly tracks his calories and macros because he wants to maintain his fitness goals. When it comes to planning meals, he cares about nutrition, cost, and ease of preparation. Freddy hopes to increase squat gains by 10% by the end of the summer and cut down on body fat while gaining muscle. He, however, is sometimes frustrated by his inability to reach his target goal of macros on a given day and the lack of healthy substitutes for foods on other meal prep apps. He enjoys how meal prepping frees up time in his week but dislikes how the actual process of meal prepping is tedious and time-consuming.

Journey mapping:

We created a user journey map in which Fitness Freddy needed to plan a grocery list for an entire week of meal prepping. In this process, Freddy realizes he needs to go grocery shopping soon. He is a bit stressed about the prospect of meal prepping due to his busy schedule. He then looks up recipes online that look tasty and nutritious and is excited by all the new food he could have in the coming week. After looking at the ingredients list, macros, and cost per serving, Freddy decides on a meal he likes. He sighs as he pulls out a calculator and notebook, dreading the arduous task of manually calculating the portion sizes necessary to hit his desired macros and how many ingredients he has to buy to prepare an entire week’s worth of meal prep. Finally, he writes down his compiled grocery list on his phone and heads to the store.

Design Concepts:

Based on the various user research that we conducted, we centered FitPrep’s design around three major concepts.

1. Control
2. Empowering users to take control of their meal prep, by equipping them with the nutritional and cooking information they need.
3. Efficiency
4. Giving users a simplified process that allows them to make grocery lists without the extra brainpower.
5. Variety
6. Offering users recipes and meal plans that allow them to enjoy the food they prep.

Marketing

Style guide

In the above style guide, we compiled the colors, fonts, and button types that we used throughout the entire website. Additionally, we designed a logo that incorporated both elements from the color palette, as well as an illustrated representation of the core purpose behind the app, which involves meal planning.

HTML/CSS Page

After spending some time learning the fundamentals of HTML and CSS, we coded a landing page which would be used to promote the app to users who looked it up online.

Wireframe and Mockup

When creating our wireframe, we sought to include the following features:

Onboarding:

• Ability to input information that will be used in the user profile and in providing diet recommendations

Home Page:

• Ability to track macros
• Ability to see what recipes you will eat today
• Water intake tracker

Explore Recipes

• The ability to find and import new recipes both in-app and through outside purchases
• The ability to save favorite recipes
• Individual recipes
• Recipe Ingredients
• Macros
• Steps to make
• Prep time
• Servings

Calendar

• Ability to plan your meals throughout the week by tracking them on a week-long calendar

Grocery list and pantry

• Pantry — the ability to input food that you already have at home
• The grocery list — the ability to export ingredients from recipes you plan for the week to the list of grocery items you need to buy

Export

• Exports grocery list to Instacart

Prototype

Reflection:

Designing FitPrep was our second project in Forge’s three-week Launch Academy. This project, being our first app that we designed completely from scratch, was an incredible learning experience that allowed us to design with the users’ needs in mind first and foremost. Additionally, we learned the fundamentals of coding with HTML and CSS, which was both a challenge and a pleasure to learn. We are super excited to continue learning more UX skills as we continue to work in the future!