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