UX Case Study

HealthyFull

All-in-One Mobile App to achieve all your Nutrition and Wellness Goals and create sustaining healthy habits.

Get Started

UX Case Study - HealthyFull Wellness App


- CASE SUMMARY -





My Role


The Problem

People want to live a healthy life and nutrition plays an important role for achieving that. However, there are a lot of misconceptions, misinformation, and confustions about what “healthy” really is.
People often don’t know to what extend food and nutrition affect their health.
Others believe they know, yet wonder why their goals fail.



The Solution

HealthyFull is an app that helps users be more knowledgeble about nutrition and wellness, and how food affects their health.
It allows them to easily monitor their caloric intake and dietary patterns to aid in weight and disease management. Also, it has the capacity to create behavior change, and more effective goalsetting.

- DESIGN PROCESS -





UX Design Process

- DISCOVER -





A great product experience starts with a good understanding of the users. In-depth questionnaires provide qualitative data about the target audience, such as their needs, wants, fears, motivations, and behavior.

In this phase the following stages are explored:


Preliminary Research

Frequently while listening to the everyday conversations of my peers, I've realized that there is a lot of misinformation and misconception about nutritional value of the food we consume - what we consider to be healthy, the daily intake of calories and caloric index of our meals.

People want to build healthy habits, and thereafter they expect reasonable results, but they get disappointed to realize why their plans are not working. Understanding the wellness, nutrition and our daily healthy habits seems to be more underestimated than we think.

This preliminary research provides a collection of statements, giving us a clear picture of the common and frequent misconceptions people face on daily basis.




UX Research - Preliminary Research




Demographic Research

As the previously gathered general info needs to be backed by facts, I dived into science and stats to help me determine what part of the population is mostly concerned with the topic discussed. A research conducted by IPSOS (the 3rd largest market research company in the world) on "Calories Survey" and the CDC on "National Health and Nutrition Examination Survey" confirmed the existing issue of nutrional misinformation and that we're "starved of information".

  • 77% want to lose weight, 64% regularly think about their weight, and 50% consider they are overweight.
  • 51% consume more calories vs. what they actually think they consume
  • 67% think the "Chrispy Chicken Salad" has less than 1,000 calories, and only 9% are aware it actually has 1,150 cal.
  • 63% consider the salad as a Healthy Option, and 48% think it's a Low-C alorie option



UX Research - Demographic Data




Questionnaire

Through 30 surveys and interviews, I was able to narow down the scope pertaining the habits, perspectives and challenges the potential users are facing, and to gain more data about possible solutions.

I used some of the question from IPSOS survey, but also added few others which were more relevant for the local target audiance. The responses matched the data from the global servey, meaning I was on the right track.



UX Research - Survey Questions




Competitive Analysis

At the same time I have carried out the Competitive Analysis in order to know the strengths and weaknesses of the competition, to look for improvements and how to stand out and differentiate myself from them.

While their adventage include larger databases, downloadable recipes, and support from large corporations (My Fitness Pal is under the umbrella name of UnderArmor), most of them are paying apps, not supporting wearable deviced, missing barcode scaner, and lacking social network of its own. So these are the missing puzzles on the market that HealthyFull can tackle.



UX Research - Competitive Analysis

- DEFINE -





In this phase in order to get more close to the user’s way of thinking and feeling, I've created the Persona, and depicted her indepth thoughts and feelings.



UX Design - Persona




Maria portrays an urban girl with a busy working schedule, aspiring to find balance in maintaining a healthy lifestyle. She believes she is well informed about her eating habits, but we discover her Pain Point throught the Empathy Map, as she realizes her misunderstandings and confusion.



UX Design - Empathy Map




Developing a User Journey Map was particularly crucial for identifying the pain points Maria might feel — and the emotional “roadblocks” or “barriers” that she might face — in the process of achieving her fitness goals.

In this fictional scenario, believing she makes healthy choices that helps her lose weight and stay fit, Maria orders a Chrispy Chicken Salad, only to find out that the salad contains 1,150 calories - a whooping 89% of her suggested Daily Calorie Intake in just one meal!
Her frustration motivates her to look for convenient solutions.



UX Design - User Journey Map




Those last elements were crutial in helping me define the Problem Statement:

"How might we build a convenient app that helps users achieve a state of nutritional balance in life and helps them uplift their motivations by monitoring and managing their nutritional value and calorie intake over time"

- IDEATE -





With the problem defined, I have started to focus on the solutions and functionalities that my Minimum Viable Product (MVP) should contain.

The solution is creating an app which helps users to stay on track with their nutrient intake, provides nutritional information, offers meal planning from an integrated recipe book, which also motivates the user.

According to the needs of the previously conducted research, the solution should provide the followig features:

  • Questionnaire during registration asking users about food preferences, allergies, dietary restrictions (ex. for diabetics different menus to be created), and daily routines
  • Calorie counter, giving users option to use food database and view calorie information
  • Database of ready recipes, and option for adding own recipes and custom grocery lists
  • Option for barcode scanning and uploading a photo of the meal for instant log
  • Track user's progress on an intuitive dashboard
  • Include educational content offering tips on nutrition and wellness
  • Enabling push notifications and reminders providing feedback on regular basis
  • Integration with other wearable devices for convenient tracking and measuring data
  • Social media integration for easy sharing with friends and improving accountability

UX Design - User Flow Diagram

Information Architecture and User Flow are crucial aspects of UX design. Without proper sorting, most users would be lost and confused when navigating through the app.


- DESIGN -





Working on a visual solutions of the app was about integrating the User Interface elements, yet my main focus remained on the functionality rather than it’s appearance.


Low-Fidelity Sketch Drawings

The simplicity of the Sketches and the Low-Fidelity wireframes allowed me to test ideas without diving into the details too quickly, but rather developing the user-cenrtric features.



Mid-Fidelity Wireframes



Finally, for the moment to "dress" the screens with carefully picked Style Guide, I opted for a color palette blending the colors Green and Blue - a Deep Water Sea shades.

  • Blue is the color of Tranquility and represents Calmness.
  • Green is the color of Nature and brings you back to Balance.
  • Orange is the accent color, as it reflects the vibe of Joy and Energy, it inspires to take action, hence to be used for the CTA (Call To Action) buttons.
Together they blend and promote Satisfaction and Inner Peace.




UI Style Guide


High Fidelity Wireframes illustrate the final version applying the UI concepts and all elements of the design solution.

It includes the following 4 sections:

1. Detailed Onboarding

including choice selection for food preferences, allergies, daily routines, and dietary restrictions (ex. for diabetics different menus to be created).


High-Fidelty Wireframes - App Onboarding Slides


2. Comprehensive Dashboard & Progress Tracking

including push notifications and reminders providing feedback on regular basis.


High Fidelity Wireframes - App Dashboard Slides


3. Convenient Daily Logs

including option for Barcode scanning, uploading a photo of the meal, and Favorite Items section for instant log.


High Fidelity Wireframes - App Login slides


4. Extensive Recipe Database

as well as option for adding their own recipes and custom grocery lists.


High Fidelity Wireframes - App Recipe Slides


The Final Interactive Prototype

See below how it all blends together interactively.

Click on the buttons to interact as if you are actually using the app.
(the blue highlights that appear on random clicks are suggested areas where to click to take you to the next frame)





- EVALUATE -





The prototype was presented and shared with 23 friends. In general, 90% were satisfied with the concept and design, and stated the app would be suitable and easy for them to use.
However, the following aspects were suggested to make the app more user friendly:

  • Explanations about the Diet Preferences section - not everyone was familiar with all the terminology
  • The app should be able to connect with Social Media in order to increase usability popularity and thus, motivation for more consistent and frequent use
  • Suggestions about Exercises and Workouts
  • More reminders and notifications



Reflections


Takeaways and What I’d Do Differently
Working fully through this project taught me the importance of trying to think intentionally about every element of the project and how it can contribute to the end result.

For example, the final screen when the Goal is Acommplished, the user should not end the App use. Hence, offering the options for setting New Goals for continued app engagement.
Also, some of the screens are rather "text-heavy" and instead I should focus on less text and more intuitve icons.