top of page
Top of Page
My Fitness Pal
Heuristic analysis & UI Redesign
The story begins...
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.
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.
Record an egg for breakfast in the food diary.
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.
Finding the egg
On this screen the articles, advertisements, and calorie counter all battle for the user's attention.
Aesthetic and Minimalistic design, Score: 2
Reduce the amount of elements on screen to decrease the cognitive load on the user
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.
Match between the system and the real world, Score: 3
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.
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.
Flexibility and efficiency of use, Score: 3
Reduce the number of user actions required, add new deletion pathways.
Designing for Usability
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.
Aesthetic and Minimalistic Design, Score: 2
Reduce the amount of elements on screen
Removed excess components
Decreased amount of text on screen
Simplified the calorie counter
Aesthetic and Minimalistic Design
Match between system and real world, Score: 3
De-clutter search history
Removed duplicate items
Corrected spelling mistakes
Flexibility & Effeciency of use, Score: 3
Simplify deletion taskflow, add multiple
pathways for item deletion
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.
Below are all of the wireframes we created as part of our UI redesign.
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.
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