PlanWell

Meal prep made easy, from plan to plate

Overview

I designed a minimum viable product (MVP) for a new app called PlanWell. This meal planning app automatically generates personalized meal plans based on users' dietary preferences, goals, and lifestyles. It also helps manage nutritional intake and organize meal preparation schedules.

Problem Space

Meal prepping has many benefits, but it can be challenging due to time investment, lack of variety, and the need for guidance and support, as well as managing grocery budgets and finding motivation.

Role
User Research
UX/UI Design
Visual Design
Prototyping
User Testing

Timeline
6 Weeks

Year
2024

My Design Process

Research

User Interviews
Competitive Analysis


→

Strategy

Affinity Mapping
Personas
User Flow

→

Design

Lo-Fi Wireframes
Mid-fi Wireframes
Hi-fi Wireframes

→

Testing

Usability Testing
Hi-fi Prototype

Iteration

Research Goal

Research

Research Statistics

User Interviews

As I was starting from scratch, I wanted to begin by understanding the challenges and motivational factors that affect individuals' consistency in meal prepping.

Total Research Duration
The research phase spanned two weeks, involving 20 hours of interviews and a competitive analysis.

Participants
I conducted five interviews with people between the ages of 21 and 38. Each interview lasted 30-45 minutes.

During my research, I interviewed individuals who are health conscious and those who are meal prepping or have tried meal prepping in the last six months. Here’s what I learned:

Participants find it challenging to prepare meals because of their busy schedules.

“After my three 12-hour night shifts (as a nurse), I sleep all day, making it difficult to find time and energy to meal prep once I wake up.”

Participants' meals lack variety due to their preference for quick recipes.

“Although my meal prep isn't the most varied, I don't want to spend much time on it, so I choose simple, quick recipes.”

Competitive Analysis

I analyzed three popular meal-planning apps to identify market gaps. I assessed the features offered by each app through research. Although most competitors had comparable functions, "Eat This Much" distinguished itself with its distinctive and advanced features.

Strategy

Affinity Mapping

I had a lot of information to work with, so I found affinity mapping really helpful for organizing everything. By visually grouping related ideas, I was able to identify patterns and create 8 themes, with four of them having subcategories.

Personas

Two personas were created from patterns discovered in the affinity mapping: a weightlifter needing variety in his meals and a college student looking to manage her weight with quick and easy recipes.

Click to enlarge image

HMW Statement

How might we offer quick, varied, one-hour or less recipes for busy professionals that seamlessly fit into their schedules and aid consistent meal prepping despite time constraints?

Solution

Provide customized meal plans with quick and varied recipes to save time and offer convenient options.

Site Map

To visualize the app's structure, I created a sitemap. This aided me in developing user flows and ensured well-organized navigation and layout without overcomplicating things.

Click to enlarge image

User Flow

The user flow consists of three tasks:

  • Login & Onboarding Process

  • Generate a Week Meal Plan & Change the dinner option

  • View the calendar and see the Recipes for Prep Day

Design

Lo-Fi Wireframes

This step allowed me to swiftly explore various layouts, especially when using pen and paper. It prevented me from getting caught up in the details and let my imagination run wild.

Mid-Fi Wireframes

To conduct usability testing early in the process, I determined that mid-fidelity wireframes would be necessary to enable testers to engage with a design that closely resembles the actual product, resulting in more precise usability feedback.

Visual Identity

In the logo design, I incorporated a leaf into the top of the "n" to create a carrot, tying the wordmark to nutrition. The same icon can also represent a lotus flower, symbolizing wellness.

For the color scheme, I chose calming colors like Aqua Green, Eucalyptus, and Turquoise for their refreshing qualities in meal preparation. I included Flame, Xanthous, and Coral to add warmth to signify excitement and creativity. I chose Proxima Nova as the font for its readability on various devices and screen sizes.

UI Kit

Creating a UI kit has been a game changer for improving my workflow. By developing a set of consistent design elements and components, I've adapted to new features and platforms without starting from scratch each time. This has saved time and made it much easier to maintain and expand the app in the long run.

Hi-Fi Wireframes

After conducting initial user testing and making revisions, I refined the visual identity and then integrated everything into this high-fidelity wireframe.

Testing

Usability Test Goals

  • Identify areas of confusion or frustration that users experience during their journey.

  • Evaluate how well the design elements, such as layout, buttons, and icons, work.

  • Collect feedback for working on iterations.

Key Findings

I conducted two rounds of testing, with 5 participants in each round. Here are the key findings from the first round of testing:

  • 40% found the amount of text on the meal categories overwhelming, mainly the "Edit Meal" and "Change" buttons.

  • 20% mentioned that they would like to compare the original meal and the alternative option they selected in detail.

  • 20% thought the "Fri 6" row was the header because it was unlike the others.

  • 20% mentioned that they want to change the schedule of the meals. How would they do that?

Second round iterations: Having two buttons "Edit" and "Change" close in meaning confused users. Combining the buttons into one directs the user's attention to a clear action.

Iterations

Combine “Edit” & “Change” into one button

The “Edit Meal” Page

  • Adding a checkbox: Because we now have a single button for editing meals, I need to add a checkbox on this page to allow users to select multiple meals they want to change. This will enable users to change two or three meals simultaneously.

  • Remove button: I removed the "Choose This Meal" button to eliminate confusion and guide users directly to the desired action.

  • Adding tags: I replaced the "Choose This Meal" button with tags indicating the meal type. Tags help users make better decisions and easily find meals that match their preferences.

Redesign details page & Comparison Chart

  • Redesign details page: I made changes to address the confusion. I moved the comparison chart to the bottom of the page and kept the selected meal's calories and macros at the top for quick decision-making.

  • Comparison chart: I added arrows to the comparison chart to visually show users the changes in calories and macros. This will help users quickly identify differences when comparing multiple items and make faster, more informed choices.

Schedule 2 or more servings in a single day & Change “Next” to “Confirm”

  • Schedule servings: When users select meal prep days, plus and minus buttons appear to adjust serving sizes easily, making quantity changes quick and efficient.

  • Change button text: By using the word "Confirm," it clearly indicates that this is the final step, and the user is about to complete the process. "Next" suggests that there are more steps, which could confuse or mislead users.

Final Designs

Here are the final designs for PlanWell. After a month and a half of hard work and dedication, I'm excited to present the culmination of my efforts: the minimum viable product.

The Results

The Impact

Personal Takeaways

What’s Next?

All participants expressed satisfaction with the app, noting its potential to help them stay motivated and consistent in their healthy eating journey. One person mentioned that having a schedule for preparing meals would help her stick to a routine.

"The meal scheduling feature would keep me organized during the week, and I would finally stick to my nutrition plan without last-minute stress."

This experience taught me the importance of prioritizing accessibility in all my projects. When designing onboarding screens, I realized it's crucial not to rely solely on colors to indicate selections but also to incorporate a more physical change. While challenging, incorporating accessibility from the start is essential, and I'm committed to doing so in all future designs.

  • Continue to add new recipes that are more culturally diverse.

  • Explore voice control for hands-free cooking to increase efficiency.