myfitnesspal | case study & redesign
Polishing the user experience and motion of a calorie tracking & fitness app through user pain points and requests.
Timeline: 1 Week (September 2025)
This project is not affiliated with MyFitnessPal in any way. This is a personal project done for practice and experience.
(breakdown pictured below)
Tools
Role
Figma
After Effects
Lottie/BodyMovin
Motion Design
Wireframing
Proto-typing
User Research
UI/UX
In addition to my focus areas, I wanted to acknowledge user pain points to further aid in my redesign. MyFitnessPal has had very controversial UI/UX updates, but users cited these aspects of the mobile app as pain points the most:
1: “Cluttered, outdated, and sometimes unintuitive UI.”
2: “The diary doesn’t have a consistent design language compared to other app parts.”
3: “I can’t find the progress section/You shouldn’t have to scroll to find weight; it should be its own tab.”
Through researching user behavior and pain points, it’s become apparent that the vast majority of MyFitnessPal users primarily use the Calories Counter, Weight Logging, and Food Database/Diary features.
//Design Drafts
Considering user pain points and my focus areas, I created SUPER simple wireframes to guide the final design and intended motion. The wireframes highlight what I tried to change to improve the overall User Experience.
The dashboard was re-designed with the hierarchy of importance in mind. Users had expressed frustration with the macros tab being buried behind multiple clicks, so it is now accessible directly from the dashboard. The diary and “More” tabs also lacked a consistent design language with the rest of the app, creating an outdated feel. In my wireframes, I worked to establish a more unified design system across these elements. Finally, the progress tab now replaces the “Meal Planning” tab, addressing user concerns about its previous placement.
Side-by-side comparison will be shown in the final design(s).
Effective motion design should reinforce design systems. In the case of MyFitnessPal, I as a motion designer, need to reinforce and reward the user with satisfying motion and animations parallel to the app’s intended design. The current motion design within the app is somewhat effective. Some examples of motion within the app are:
//Design Drafts
motion drafts
1: In place of the fade/scale up when swapping tabs, we’ll use a cascading slide and fade upwards to guide the viewer’s eyes from top to bottom.
This supports the wireframes, showing the viewer the most important things to them first, based on user reports.
It’s imperative that the speed of the animation is quick enough to not interfere with the user. This addition is just to add responsiveness to the app, not slow the user down.
(specific-secondary animation)
While keeping in mind the motion identity already present in MyFitnessPal, we can draft some motion design improvements to further improve the user experience.
(general animation)
areas of focus
The three aspects I chose to hone in on were:
//User Research
USER PAIN POINTS
basic LO-FI wireframes
(dashboard)
//Design Drafts
(diary)
motion
(progress)
Simple but clean fade and slight scale up upon switching tabs.
2: To add more interactive animation, I opted to add an animated number counter and progress bar for more visual interest and interactivity.
The idea is that for important information that the user influences, like macros, calories, and exercise. A sliding numerical value (a Lottie-compatible animation) will be implemented to show the user’s progress towards their daily targets.
This change is a secondary animation to the global slide up upon swapping tabs, pictured above.
(UI pop-up animation)
REDESIGN
Much simpler, users see the most important information first.
(more)
Awesome shape morph animation from a plus to a checkmark. But poor “Food Logged” Animation.
3: Improve the food logging system. The original “Food Logged!” notification has some wonky overshoot. It just appears without a transition and disappears with a hard cut.
This rendition should better fit the motion design identity I’m trying to build for my redesign and assist the overall motion and UI achieve a more “modern” feel.
//Final Design
Here’s the side-by-side comparison for each re-designed UI panel compared to their original states.
ui redesign
(yes there really is that much on the dashboard, and these appear upon scrolling)
ORIGINAL
//Context
Why?
I’ve been an avid user of MyFitnessPal for around four years, and the UI/UX design has always been an issue for me and many others. Often, I’ll open the app after a few weeks and be greeted with a completely new UI, and I’ll find myself googling where to find that one particular tab that houses what I want to see.
MyFitnessPal is a huge app, but at its core, its main purpose is calorie tracking. That’s why I think it’s essential that everything related to calorie tracking and personal progress is easy to see, understand, and celebrate.
The app needs to be responsive but satisfying to use. Right now, MyFitnessPal is a functional app, but it feels mundane and lacks motion. Weight loss can be hard, and it’s important to celebrate every little win, and MyFitnessPal could do that better.
//Scope