Home
Frank Reynoso's Art and Design Portfolio

Google UX/UI Course Project: Nutrition Coaching App

A nutrition coaching app for all user types looking to meet specific nutrition and health goals.

The Problem:

Users, like Miguel - a busy bartender - and Marie - a school teacher, need nutritional suggestions to meet their personal desired fitness and health goals.
 

The Goal:

To help users make better meal and snacking nutritious choices and for improving health through chosen health goals.

User Research:

Summary

The primary users are for all individuals looking to choose healthier nutrition options to establish better nutritional habits and to meet personal health goals.
 

Pain Points

After interviewing individuals that would find the app useful, a few pain points were identified.

1

Most phones already come with a native health app such as Apple Health and Samsung Health

2

Users want an app that can work offline as well as online

3

Users need to be able to log meals that are deemed "unhealthy" simply for meal logging purposes

4

Users need live text for language translation purposes

User Persona: Miguel

Bartender Miguel

Miguel - "Good Health is Wealth!"

Age: 28
Education: Bartender
Hometown: Los Angeles
Family: Single
Occupation: Bartender

Problem Statement

Miguel needs a reliable way to consistently choose healthier meals and snacks.
 

Goals
 
Frustrations
 
  • Starting a healthier nutritious based diet routine
     
  • Improved fitness health

  • Be better informed on nutrition information figures
  • Struggling to choose healthier meals to eat
     
  • Missing weight target goals
     
  • Not knowing the amount of calories, fats, sugars, etc he is consuming

Miguel's Passions

Miguel is a big time foodie, but doesn’t pay attention to the nutritional value of food and has struggled with weight management and so he is committed to making dietary nutritional changes to improve his quality of health and is looking for an app to help him meet his personal goals.

User Persona: Marie

Teacher Marielle

Marie - "Foodie Adventurer!"

Age: 32
Education: B.A. Liberal Arts
Hometown: Los Angeles
Family: Single
Occupation: School Teacher

Problem Statement

Marie likes to dine out with her friends to try new foods, but they meals are not always healthy in nutritional value.
 

Goals
 
Frustrations
 
  • Establishing healthier nutritional habits

  • Healthier overall
  • Restaurants that don't easily display full nutrition information besides calorie count
     
  • Finding more locations with healthier nutritious foods

Marie's Passions

Marie loves to go out for dining with her friends but would like to come up with ideas for healthier dining options.



User Journey Map

Action Ready for a meal Open App Find suggested healthy meals Reads about Nutrition Info Logs the meal
Task List An hour before a meal time, Miguel/Mariel decide to use the app to help them decide on a suggested nutritionally healthy meal
Signs into the recipe app Reviews the list of recommended meals Reads the nutritional information and makes edits to the recommended meal Logs the meal choice they will be having
Feeling Adjective Feels good and invigorated that they will be choosing a healthy nutritional meal Feels good about using the app Feels happy to find some good meal suggestions Likes that the meal is detailed and can view all the nutritional information Feels good that they picked a healthy meal to have
Improvement Opportunities Add a weekly scheduled calendar if the user decides to plan out their meal choices in advance        

Accessibility Considerations

In designing the app, these were some of the accessibility considerations that were noted as features that would be helpful to the user.

1

Language Translation:
The inclusion of live text is important so that language translation can be performed by the device

2

Offline Access:
Users need to ability to access and log meals even if that app is offline

3

Screen Reader:
Live text is should be used for reading by the device

Initiating the Design

Site Map Layout

As seen below, this is the app site map showing the sections/pages needed for the app.

Recipe App Sitemap
 

Wireframes on Paper

My initial designs as seen below, are variations of how users would move through the nutrition app as they begin from logging in or setting up an account to landing on the main dashboard, logging meals and viewing their progress goals on a timeline.

Paper Wireframes
 
Paper Wireframes
 
Paper Wireframes
 

Digital Wireframes

After narrowing down a few of the sketched wireframes, I decided to develop the app as seen below, again with an initial sign-up process and then a main dashboard for the user to land on after signing in.

Initial Sign-up
Digital Wireframes

Dashboard and Meal Selection (Via Search or AI) and Logging
Digital Wireframes
Digital Wireframes

Dashboard and Progress Checker
Digital Wireframes
 

With the app, a user would be able to view their progress and data with a breakdown by month, week and day.

Refining the Design

Usability Testing: Findings

I conducted an unmoderated usability test with the digital wireframes and had some positive feedback about the app.

  1. Users found the app easy to navigate through
     
  2. Users wanted their nutrition logging tied to a specific health goal
     
  3. Users like the idea of having a selection of diet plan types to choose from

With testing and initial feedback complete, it was time to start creating mockups and hi-fidelity designs.

Mockups

After the user process steps of the app was set in the wireframing phase, it was time to move onto the visual look of the app.
 

Initial Sign-up
Digital Wireframes

Dashboard and Meal Selection (Via Search or AI) and Logging
Digital Wireframes
Digital Wireframes

Dashboard and Progress Checker
Digital Wireframes
 

Prototype

Once the imagery, buttons, colors, and fonts were set, the mockup was ready for it's prototype setup. The prototype can be viewed and interacted with from the links below.
 

Hi-Fidelity Prototype
Digital Wireframe Live Sample

Prototype Live Sample

Completion and Launch!

With the completion and launch of the nutrition app, user feedback will be welcome as part of the normal iterative process and will be used to enhance the app.