top of page
Top of Page
My Fitness Pal
Heuristic analysis & UI Redesign
The story begins...
Project Overview
Nikita Parmar and I worked as a team to conduct a heuristic analysis and complete a UI redesign of the My FitnessPal app for Android. Our UI redesign of the app eliminates usability issues and streamlines a core tasflow by removing 3 steps.
Role: UX designer, UI designer
Project Length: 2 weeks
Tools: Figma, InVision
Setting the scene
Introduction to MyFitnessPal
MyFitnessPal is a mobile app and website that helps users keep track of their daily diet and exercise habits. It's currently one of the foremost Health care and Fitness mobile apps with a user base in the millions for both iOS and Android.
Despite MyFitnessPal's wild success, the user reviews for the app show that many are frustrated with its current design. Below I've included real reviews of the app from the Apple app store.
Eval Start
These user concerns clearly call for there to be a deeper look at the overall usability of the app, leading Nikita and I to complete a heuristic evaluation of the app's design.
Analyzing the problem
A tale of two taskflows
We began by comparing the iOS and Android versions of the app to see if there were any variations between the two. This comparison was done by completing two simple tasks in both the iOS and Android versions of the app.
Task #1
Record an egg for breakfast in the food diary.
Task #2
Remove the egg from the food diary.
In this process, we found that the Android version of the app had significantly more heuristic violations than the iOS version. The Android version of the app was then made the subject of our heuristic evaluation.
Current User Journey
This video shows the current user journey through the Android Version of MyFitnessPal. Here, the user is recording an egg for breakfast and then removing it.
Next, I'll be walking through the results of our heuristic evaluation for the screens that were found to have the most severe heuristic violations.
Home Page
Finding the egg
On this screen the articles, advertisements, and calorie counter all battle for the user's attention.
Heuristic Violation
Aesthetic and Minimalistic design, Score: 2
Recommendation
Reduce the amount of elements on screen to decrease the cognitive load on the user
Search History
Misspelled items
Duplicate items with inconsistent nutritional values
Inconsistent measurement system
This screen contained multiple spelling errors, repeat items, and inconsistent measurements making it extremely challenging for the user to find the correct item.
Heuristic Violation
Match between the system and the real world, Score: 3
Recommendation
De-cluttering these results will optimize the user's item search experience.
The pathway to deletion
We observed that Android version of the app had the most significant usability issues when it came to removing the egg from the food diary.
Food Diary
The user cannot swipe to delete
the desired item
There is no option to remove the item on the item's page.
The kebab menu does not have an item removal option.
We found that the only way that users are able to remove food items from this screen is by tapping the pen icon. This makes it extremely challenging for users to remove items from their food diary.
Heuristic Violation
Flexibility and efficiency of use, Score: 3
Recommendation
Reduce the number of user actions required, add new deletion pathways.
Designing for Usability
Process
Our goal in the UI redesign was to create a beautiful design that addressed the usability concerns that came to light during our heuristic analysis.
Home Page
Heuristic Violation
Aesthetic and Minimalistic Design, Score: 2
Reccomendation
Reduce the amount of elements on screen
Action Taken
-
Removed excess components
-
Decreased amount of text on screen
-
Simplified the calorie counter
Before Redesign
After Redesign
Before Redesign
1/2
Aesthetic and Minimalistic Design
2
action taken
Search History
Heuristic Violation
Match between system and real world, Score: 3
Reccomendation
De-clutter search history
Action Taken
-
Removed duplicate items
-
Corrected spelling mistakes
-
Standardized measurements
Before Redesign
After Redesign
Before Redesign
1/2
Food Diary
1/2
Heuristic Violation
Flexibility & Effeciency of use, Score: 3
Reccomendation
Simplify deletion taskflow, add multiple
pathways for item deletion
Action Taken
-
Reduced deletion taskflow by 3 steps
-
Added new deletion pathways
New deletion pathways in our redesign:
-
Left swipe to delete
-
Through the kebab menu
By doing this, we reduced the minimum number of user actions required to delete an item from 4 to 1.
Final Redesign
Last Looks
Below are all of the wireframes we created as part of our UI redesign.
Appendix
What are heuristics?
The concept of a heuristic is based on Jakob Nielsen's 10 general principles for interaction design.
Heuristics are considered the best practices to follow to ensure your final design is useable. The list
below delineates the heuristics that are most pertinent to this case study.
Aesthetic & Minimalist Design
The content and visual design use only the essentials, unnecessary elements are removed.
Flexibility & Efficiency of Use
The presence of shortcuts in the design, allowing users to speed up the intereaction.
Match between the system & the real world
The user is able to readily understand the meaning of any terminology used in the design.
Appendix
What is a heuristic evaluation?
During a heuristic evaluation, the design of interest is compared against the heuristics in order to determine its overall usability. The scoring system used in a heuristic evaluation is called a severity scale, shown below.
The higher the score on the severity scale, the more severe the usability issues is. While scores between the 1 to 2 range indicate a small usability concern, heuristic violations that score in the 3 to 4 range indicate that the current design is nearly impossible for the typical user to successfully operate.
bottom of page