Eat Well | Mobile App Design Case Study

Mel Perry
8 min readDec 30, 2019
Eat Well App Cover Image with Fruit and Flowers


One in three consumers are following a specific diet or eating pattern. 80% of consumers say there is conflicting information about what foods to eat or avoid*.

My project partners and I realized that each of us were restricting our diets in some way for health reasons, and had little resources to help us make better choices for our diets. We decided to conduct research to see if others were experiencing similar issues.

The Problem

Through research and analysis, we confirmed that a large portion of people are limiting their diets. As consumers become more health conscious, they want to know what exactly they are putting in their bodies. Nutrition labels and confusing ingredients make it difficult to truly know.

The Solution

To create an aid that helps individuals make quick decisions about foods they could eat based on their unique diet.

Melanie Perry — UX/UI Designer + Front-End Developer
Haley Ugwuibe — UX Designer
Cindy Guo — UX/UI Designer

My Roles
User research
User interface
User testing
Front-End Development

Scope & Constraints
3 weeks
$20 budget

The Process


Competitor Analysis

We discovered a lot of apps in beta or that had very narrowed targeting. For example, we found an app specifically for people with food allergies. We determined our biggest competitor to be ShopWell, but also learned a lot from Food Intolerances.

ShopWell had a good amount of usage and positive reviews. Users could update their dietary preferences and scan items to find nutritional information. Foods were given a score based on expert knowledge, age, gender, and preferences. The lower the score, the more users should avoid that food. ShopWell also had the ability to create shopping lists.

Food Intolerances was an indirect competitor catering to those following Low FODMap, gluten-free, or diets for Irritable Bowel Syndrome, however, the nutrition database was vast and informative.

The competitor analysis was very important since we were building this app from the ground up and wanted to develop a strong value proposition.

Eat Well Competitior Analysis
Primary competitors based on competitor analysis

User Interviews & Surveys

We conducted 4 in-depth interviews and received 57 survey responses, distributed primarily through social media.

Important quotes from in-depth interviews
In-depth interview quotes — significant findings

81% of our survey respondents were restricting their diets in some way.

42% were regularly checking nutritional labels.

69% did not feel fully aware of the ingredients they were eating.

There was a correlation between survey results and our in-depth interviews. We found that those with health issues struggled the most with the uncertainty. Even if they researched nutritional ingredients the best they could, they were still afraid to eat foods and unsure of how their bodies would react.

During one of our interviews, a user mentioned she completely stopped grocery shopping and started ordering gluten-free, home delivery meals. She knew she could trust the ingredients.

Many questions arose from these interviews:

  1. How could we make grocery shopping easier for those restricting their diets, especially for those with health concerns?
  2. How could we provide more insight into how ingredients will affect their bodies to help build confidence and remove fear of eating?


Affinity Diagram

An affinity diagram helped us generate ideas and narrow our focus. After our interviews and thinking about how we could help these people, we were moving in too many directions. Through the diagram, we learned the major problems/health issues our users were dealing with and their current nutrition research process. More importantly, we learned how they preferred to research nutritional information.

Cindy starts the affinity diagram
Cindy starting the affinitization process


  1. Most people are very busy and do not have the time to research every ingredient in their food. This is especially true while grocery shopping.
  2. Some users are eating the same foods over and over again because of fear of feeling sick.
  3. Users do not understand or trust nutrition labels.
  4. Users trust online reviews or reviews from friends.

This provided us with problems to solve.

The User

Ursula has a health condition and wants to use the app to start feeling normal again.

Ursula is our primary user with a health condition
Primary User

Blake is Ursula’s friend. She trusts Ursula’s opinion around health and fitness because Ursula has tried everything to feel better. Blake doesn’t have a health condition, but focuses on living a healthy lifestyle.

Blake is our secondary user desiring to live a healthy lifestyle
Secondary User

Value Proposition

Eat Well helps those with special dietary needs eat better and feel better without the need to do a ton of research on complicated ingredients.

Why we’re better: We educate individuals on hidden ingredients they may not realize are poor choices for their unique diet, send personalized grocery lists with acceptable foods, and help them discover reviews of food reactions from others in their community.

Why we’re believable: We’re a transparent, supportive health community enabling those who want to feel better and live healthier lifestyles.


I Like. I Wish. What If?

We compiled a list of possible features using the I Like, I Wish, What If ideation method.

  1. Personalized to show only information about a specific user’s diet; ability to create a personalized profile with diet restrictions
  2. Scan barcodes on food packaging and quickly show whether food is good or bad for their diet
  3. Provide pre-generated, “safe” grocery lists based on their unique diet
  4. Ability for users to create custom grocery lists and receive food suggestions
  5. Ability to leave comments after trying new foods as a way to track their symptoms and reactions or read reviews from those with similar health issues

We couldn’t include all of these features in 3 weeks, so we had to choose what could serve as the best solution possible for our users.

We used the I Like, I Wish, What If method for ideation
Miro Digitized I Like, I Wish, What If Ideation

Information Architecture

We based our site map off of the primary features within the app. These five features would later become the static navigation.

Eat Well Site Map
Site Map of Primary Features



Cindy and I designed the UI while Haley helped with strategy and ensuring our designs were fulfilling our promise to users.

From the beginning, we wanted include rounded shapes and buttons, static navigation, personalization throughout the entire app experience, and labels for everything. This app had the potential to contain an overwhelming amount of information, but we needed to educate the user within seconds of scanning or searching a food item.

Eat Well Sketches
From L-R: scan and search nutritional info, grocery lists, onboarding personalization, home screen

Wireframes + Testing (and making hard decisions)

With the limited amount of time, we eliminated the auto-generated grocery lists feature. It would be a part of future development so we could focus on the primary features — personalization, scan and search, view nutritional information, leave reviews, and building grocery lists.

Also at this point in the project, we decided it would be best to not to tell users which foods are good and bad for them, but rather provide them with all the information to help them make their own decision.

So instead, we used a caution icon and pointed out ingredients that could irritate them based on their personal profile.

Eat Well Wireframes
From L-R: onboarding personalization, scan, nutritional information/reviews, grocery lists, home screen

After testing our sketches and wireframes, we learned our onboarding process was overwhelming. We simplified onboarding.


I designed our styles and Cindy added the final touches.

We wanted to promote health and positivity which is why we selected green colors. The orange accents added a sense of energy. The Quicksand font family felt friendly and when paired with Roboto, allowed us to communicate directly and in an accessible way.

I feel most proud of our style guide and the meaning behind every element selected.

Style Guide — greens with orange accents, friendly fonts
Eat Well Style Guide

Hi-Fi Prototype + Testing

We received a lot of positive testing feedback, but needed to make our shapes consistent, enlarge our buttons, and adjust some of our hierarchy so it was clear and easy to understand. So we did.

Onboarding GIF
Scan and view nutrition GIF

View prototype in Adobe XD

[Front-End Development]

I brought our design to life using Webflow. This was completed the day before project presentations.

Wireflow Prototype
Webflow Prototype

View the Webflow Prototype

Future Development

  • Automated grocery lists based on personal dietary needs and preferences
  • Allow users to input information for unknown items to grow food database
  • Enhance the scan feature by allowing users to scan a list of ingredients with needing a barcode
  • Expand Eat Well outside the U.S. with the addition of international foods
  • Partner with food brands or grocery stores to market their products within our app / shop feature

What We Learned

This project had a lot of requirements with little time to iterate. To fully implement this, we’d need much more testing. Testing and listening to the user is vitally important when building an app dealing with a user’s health.

We learned how important information architecture is with an informational app such as this. The goal was to educate the user within seconds.

This project was very rushed and I felt strongly one of biggest differentiators would have been auto-generated grocery lists. I would go back and add that in. I’m still very proud of the work we achieved within three weeks. There is a definite need for this type of app with the potential to help many people.



Mel Perry

Writer, designer, dog and cat mom, West Virginian, mountain lover