Nutrition App
Work-in-progress
A personal project to coach nutrition
literacy to beginners, so users can make
healthier lifestyle choices.
________________________________________
Note: This case study is redesigning MyFitnessPal app's user experience.
| The Challenge
Apps like MyFitnessPal place the focus on calories when helping users to maintain their health. However, the app doesn’t emphasize
how different calories are critical to create energy for human health. By focusing on the calories’ numbers over the meaning of their value, beginners drop MyFitness Pal app because they become intimidated by calorie counting. Thus, they miss their opportunity to learn skills on building a positive relationship with food.
Below are examples of user feedback from App Store's reviews.
| Research
After conducting research within the fitness community (including personal trainers), most inexperienced clients search on the app for food with lowest number of calories to get their ‘fastest’ results. While suddenly cutting down calories may achieve a short-term goal, this common practice is not sustainable. MyFitnessPal misses the opportunity to coach users on how to incorporate protein into their calories to keep themselves satisfied longer. Thereby users can build a healthy and balanced lifestyle.
Core pain points
-
Setting unrealistic calorie goals.
-
Difficult to read and interpret calories' data.
-
Nutrition facts overwhelm users.
Opportunities
-
Educate users to read calories to keep themselves feeling full longer - nutrition literacy.
-
Reprioritize calorie values to be more empathetic to users.
| Early Discovery Process
I conducted preliminary interviews with 6 people from the fitness community before creating my persona below.
"I take too long to calorie count... my food is getting cold!"
Charlie Smith
Beginner
About:
-
Age: 30
-
Occupation: Teacher
-
Status: Single
-
Salary: $75,000.00
Lifestyle:
-
Always on-the-go.
- Spin class 2X/week.
- Enjoys Friday night with girlfriends.
- Running errands over the weekends.
- Loves concerts.
Goals:
-
Learn how to meal prep.
-
Get informed about her nutrition.
-
Make smarter choices
with her food. -
Track her progress.
Frustrations:
-
Hates calorie counting.
-
Gets discouraged easily with food anxiety & gives up easily (yo-yoing)
-
Not sure if she's eating enough or too much.
| Creating User Stories
My solution is to develop an app that rearranges the hierarchy of information and has a 'compare food' functionality.
Based on the core pain point priorities, I created 3 user stories to solve the following:
After identifying the requirements for all 3 user stories, I prioritized on #2 story. My rationale for selecting the 'Searching food for smarter choices' was to achieve an initial quick win. #2 user story would require smaller UX effort compared to the rest, yet it would bring big results by softly conditioning our users to start becoming nutrition literate.
Below are my notes for creating the user stories and scope of UX effort:
| Ideation process
The platform for MVP1’s priority will start with iOS. MVP2 would later prioritize on the iOSPad experience. Prioritizing on MVP1’s iOS
is a quick win and would satisfy the needs of the on-the-go personas. By standardizing the UX design pattern on a smaller screen first, the design templates are more versatile for scaling up on larger devices for future MVP road maps.
Below are screenshots from MyFitnessPal app:
Annotations for improvement on MyFitnessPal App
1
'Time' text field is defaulted to be locked without explanation. Located at the prized top of the screen, this placement should be reserved for more critical information to users.
By having carbs and fat displayed before protein, users will naturally put the two first values with higher importance than the protein's data.
1
While ad revenues are easy ways for an app to generate profit, the size and placement of the ad is too brazen and shifts focus from more useful information to its users.
Users must expand the dropdown, then scroll through their screen to view the protein amount.
Protein (one of the app's most critical details)
is defaulted to be hidden off the screen.
Note: By identifying MyFitnessPal app's room for opportunity to refine their
experience, the process helped me conceptualize areas for improvement.
(As seen directly above from my notes.)
Conclusion of the initial process:
I came to the realization that a compare food functionality would be the simplest UX solution to create nutrition awareness.
| Low-fidelity Wireframes
After compiling my ideation notes with my research, I created low-fidelity wireframes on Figma for iOS mobile.
Annotations For 'Nutrition' and 'Search Food' to Compare
Nutrition Screen
1
Search Food Screen
'Back' text button takes the users back to the search screen.
Users can adjust their serving size, number of servings and organize the food into their meal of choice.
1
Protein value is displayed immediately after
total calorie total.
Nutrition facts is displayed higher on the screen compared to MyFitnessPal. Keeping the UX consistent to #3, protein value is displayed right after total calories to support food literacy.
'Compare' button allows users to search for another food to compare their first choice.
When users select 'Compare' button (from #5 point), users land on a standard search screen to look up their 2nd choice of food. Once users make their selection, they will land on the 'Compare food' functionality screen (as seen in below's annotation).
Annotations For 'Compare Food' Wireframe
When users select the 'Compare food' text button on the 'Nutrition' screen, they will search for another food to compare with. Once they have selected their second food from the 'Search' screen, the wireframe below will be displayed afterwards.
1
'Back' text button takes the users back to the search screen.
The condensed card component keeps details brief, which allows the two nutrition cards to be displayed together. Users can compare quickly on the palm of their hand.
By minimizing the number of text fields from MyFitnessPal app and keeping data value as read-only, the two cards' values are easier to compare and digest.
While MyFitnessPal app's layout for the core values are easy to read, I made a small refinement to have protein data displayed first. Passively nudging users to be more aware on picking food with higher protein.
Once users are ready to proceed with their choice, they select the primary button to add their food to their food diary. This action would trigger a popup for users to confirm their pick.
| Low-fidelity Prototype
Before proceeding forward with the UI Design, I conducted short usability interviews to ensure the UX functionality made sense to users.
Description: The usability prototype above shows a user searching for 2 foods to compare the protein and calorie values. When the user selects their choice, they add the selection into their food diary. The user will see a green checkmark with an overlay as a success message.
| Users' Feedback
After completing my usability testing, users were generally satisfied with the 'Compare food' functionality as it helped them understand being nutrition literate. Below are samples of users' feedback collected from the above prototype.
Positive feedback
-
Global search bar is clear.
-
Compare button placement is clear.
-
Users like the 'Compare food' card layout - clear.
-
On the 'Compare food' card,
users would like to have a button
to add more food to compare on
the screen. (Note: Deprioritized for future scope.)
Areas of improvement
-
Content for 'Compare' button is not clear. Users asked what is the button comparing.
-
Users weren't sure how the newly searched food and their first searched food would be compared. Expected 'Search screen' to have a checkbox next to search result's items to select from.
-
After selecting the 2nd item to compare, users expected a message to let them know what's going on next.
Overall trend from feedback
-
Content had to be more clear to provide a set of expectations.
-
Simplify the steps for searching
to compare food process.
| Iterations From User Feedback
Once I condensed my usability data, I prioritized my refinement based on MVP1's scope. As a result, I invested time on making sure the 'Search to compare' functionality was streamlined and the content was clear to users first.
Since the original scope only included 2 food choices to compare in the user story, the feedback to compare more than 2 choices was deprioritized for a future scope.
Annotations For Refined 'Search screen' Flow
Nutrition Screen
1
Search Food Screen
Search Food Screen
Added 'Compare food' text button right below the search field. Inspired by Google Flights, I added filter bubbles for smarter filtering.
Defaulted to display the most popular searched food in order to be more personable to users.
Once users select the 'Compare food' text button, the verbiage would dynamically change to 'Done' and checkboxes would be turned on.
If the users select 'Done', this would change the content back to 'Compare food'.
Users would be able to select 2 foods to compare nutrition facts. If users enter a new food on the search field, the checkboxes will still be displayed.
As mentioned on #3, the checkboxes would be hidden when users select the 'Done' text button to stop the compare food experience.
Once two checkboxes are selected, the user will select 'Compare food' to trigger a popup to confirm their choices.
Similar to #3 and #4, the 'Compare button' can be hidden when the users select 'Done' to stop the 'Compare food' experience.
The popup helps guide users to understand the next set of expectations on the user flow to compare food.
If the user selects the 'Back' button, the popup overlay will disappear and they will stay on their current screen.
| Iterated Prototype with User Feedback
Below is the refined version of the proof of concept prototype with users' feedback:
Description: The refined prototype above shows a user on the search screen to select two food choices with checkboxes. Once a user selects 'Compare food' from the search screen, a confirmation popup overlay is triggered. When the user selects 'Next' on the popup, the user flow will land on the 'Compare food' screen. The user will make their selection to add to their Food Diary and a success message overlay will be displayed, so users will know they are on their happy path.
| Next steps
As this project is a work-in-progress, my next steps would be the following:
-
Start building UI library components.
-
Develop the branding for the app project.
-
Create high-fidelity mockups based on wireframe prototype (Search to compare).
-
After completing user story #2 (searching food for smarter choices), start ideation process
for user story #1 (learn how to calculate calories).
-
Complete MVP1's last user story #3 (adding food diary to app).
If you have any questions or want to discuss this project further, feel free to contact me.