Wholesome. UX Design for Meal Prep App — A UX Case Study

Trevorlon Jainarain

Published in

TrevorlonJainarain

6 min readFeb 22, 2019

My role: UX Designer | Timeframe | 1 Week

Project Overview

Amber Heard once said: “You feel better when you’re eating food that retains nutritional value”. Eating a clean and healthy diet is a major problem in today’s fast pace society, even in an age of advance technology. People are struggling to keep up with all the demands of our culture, causing their health and nutrition to take a backseat.

I designed a meal prep app that will allow users to effortlessly outline their weekly meals, grocery shopping list, access to amazing recipes, and most importantly eat a healthy and balance diet. The app is very is simple, intuitive and will allow people to take back control of their health and meal plan.

Limitations, Parameters, Resources, and Materials

I was given the opportunity to create a innovative meal prep app. I created my designs using the research I attained through user interviews in my target audience. I wanted to get to know the ‘why’ behind people failing to maintain their diets and specific pain-points they encounter with meal planning. I applied the UX Principles below in creating this app.

Initial Problem Statement

Our current fast culture creates a challenge for people to keep track of prepping meals and eating the nutritious meals.

Michelle is journalist with very little time after work to properly prepare a meal.

How can Michelle conveniently meal prep and maintain a nutritious diet with a busy schedule?

How did I confirm my initial assumptions?

Through my research I learned that people are looking for convenient ways to eat a more nutritious meal. One trend that I discovered were that people had a major issue meal prepping because they often felt overwhelmed by the overall process. But the biggest pain point I found was the inconsistency of eating a daily wholesome nutritious meal.

User Interviews

I conducted five user interviews. Using my questions as a guide, I focused on learning how people plan their meals, nutrition, and grocery shopping. There were moments when I had to probe further, to receive more information, or clearer understanding. Some of the key questions asked were:

When was the last time you cooked or meal prepped?
How do you feel about spending time in the kitchen?
When was the last time you felt good about your health and nutrition?

The answers provided to these questions gave me valuable insights on the user’s behaviors, pain points and needs. I then proceeded to create an affinity map using the research data from where I was able to find and group common themes.

My research concluded that people want to eat healthier and wish to meal prep but find particular roadblocks that prevent them from acheiving their dietary goals.

What do I have up my sleeve…

Upon research and defining what the users needs I came up with my first prototype to address the problem. Wholesome is an app that provides access to nutritiously weekly meal prep with an organized shopping list.

There are certain Minimum Viable Product features I knew needed to be included:

Meal Plan Page
Editable Daily Plan for Breakfast, Lunch and Dinner
Weekly Grocery Store List
Recipes Page

WholeSome 1.0

While the initial/MVP concept contained all the necessary features, it needed to be functional. This product lacked simplicity and needed more refinement.

Usability Tests and Resulting Iterations

In order to build the best product we have to see how our product interacts with humans otherwise we are not following UX protocols. I conducted 5 interviews and gave my testers 3 scenarios and task to complete on the app.

This is the moment of truth where I was able to observed how the users interacted with the app. I asked my testers to complete the following task below.

Scenarios and Tasks
1. It’s Monday and you are ecstatic to start your new healthy diet and meal prep plan. You need to get Monday’s Menu and Lunch recipe.
Open the Wholesome App and find Monday’s Recipes.
2. You just planned your meal prep with Wholesome and you need to get groceries for the meal prep.
Open the Wholesome app and find the Shopping List.
3. It’s Sunday and you are in the mood for steak. You need to get a steak recipe from the app to start.
Open the Wholesome App and find a steak Recipe.

Testing: What I learnt

Without these scenarios and task I wouldn’t have been able to iterate and make Wholesome more effective. Testing the prototype gave me some insights on how the user thinks. For the most part my design was on the mark, but there was some small flaws that needed to be improved upon. One tester pointed out the unnecessary backspace on the “Meal Plan” page. I also changed the “List” tab on the navigation to “Shopping list” because of our finding Usability test.

Reimagined Wholesome 2.0

The first update I made to Wholesome was renaming the list icon to Shopping List. This change will help clarify what “list” the icon is referring to.

I also made some major changes to the Meal Plan Page by switching out the toggle days and added a scrollable screen. This allowed me to have a bigger description with pictures of meal and added an edit button which would give the user the ability to edit their meal choices.

Prototype

View the prototype.

Reflection

I’m thrilled to be able to deliver a very functional working prototype in a very limited timeframe. I was very unsure at the initial stages of this project but I put my head down and worked my butt off down to the very last minute to complete this project.

My wireframes and prototypes where very solid and users were able to use it without any major issues. I’m very pleased that I was able to identify the pain points and behavior of users. I believe there is room for improvement across the board.

One area I would have done differently is my research. Research is the foundation of what we do as UX designers, while I am happy with the data I received I do believe that I can ask better questions to get more insight.