Eat Well | Mobile App Design Case Study

Eat Well App Cover Image with Fruit and Flowers
Eat Well App Cover Image with Fruit and Flowers

Background

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.

Contributors
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

[Research]

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
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
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?

[Definition]

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 starts the affinity diagram
Cindy starting the affinitization process

Insights

  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.

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
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
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.

[Ideation]

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

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
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
Eat Well Site Map
Site Map of Primary Features

[Prototype]

Sketches

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
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
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.

Styling

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
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
Onboarding GIF
Onboarding
Scan and view nutrition GIF
Scan and view nutrition GIF
Scan

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
Wireflow Prototype
Webflow Prototype

View the Webflow Prototype

Future Development

  • Automated grocery lists based on personal dietary needs and preferences

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.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store