MyFitnessPal Redesign for WatchOS
As a regular user of MyFitnessPal app on my phone, I installed it on my Apple Watch to make tracking my food info easily. However, while the UX “works”, the overall design of the app didn’t work for me. I set out to redesign the User Interface to make it more appealing while having a consistent design language with the mobile app. The result was a simple and intuitive design with better efficiency while performing tasks.
Duration
3 weeks
Individual
UI/UX Research, Visual Design
Team and Contribution
Problem
MyFitnessPal's watchOS app lacks intuitive navigation and offers limited functionality.
Overview of the Redesign
I planned for an end-to-end visual and usability refresh to address dated UI paradigms and make the design modern and overall experience interactive.
Current User Flow
Redesigned User Flow
Highlights
Visual Design Overhaul
01
Streamlined the user interface with minimal design and interactive elements to make it user-friendly and consistent with mobile app.
Quick Actions
02
Added a quick add button to allow users to seamlessly and quickly add their calories without having to scroll through screens.
Data at a glance
03
Implemented intuitive interactions for easy navigation, allowing users to access more features and data with simple taps.
Who are the users?
I crafted 2 user personas and stories that helped me understand their needs and goals. Research revealed the users’ needs were similar even if they had different goals.
Research revealed that users of a general calorie tracking app are mostly people who are athletes, fitness enthusiasts, or just people who have a specific goal for their weight. The important theme here was these people needed details and information that will help them achieve their goal(s).
As an athlete and personal trainer, I ato be able to get detailed breakdown of my calories, and my workout so so I can make informed decisions throughout the day.
As someone who is trying to gain muscle, I want to be able to seamlessly log and monitor my calories, so I can hit my goals daily.
Understanding their Needs
Interviews with 6 participants revealed daily calorie breakdown and calories burned were the top features they cared about in a calorie-tracking app.
The interview questions aimed at finding general thoughts about what are participants’ top priorities, their tracking habits, and their preferences for a general calorie tracking app.
Other findings show that:
Meal logging is the most used feature of MyFitnessPal mobile app
‘Fitness’ is the most used app for step count on watchOS
Logging water is not something users associate with a calorie tracking app
Comparison with other apps like LifeSum, YAZIO, and Lose It! revealed an over-saturated market competing with identical feature sets and designs. The analysis revealed that these apps offer similar features, information, and design patterns like:
Market Analysis
01
Horizontally scrolling layout
02
Calorie and Step overview
LifeSum
Lose It!
YAZIO
No interactivity
03
LifeSum
Lose It!
YAZIO
Hypothesis
Redesigning to prioritize frequently accessed features will let users complete tasks more efficiently, increasing user engagement, satisfaction, and retention rates.
Final Outcome
I reduced the hierarchy by prioritizing easier access through interactive elements like buttons.
I avoided adding any extra features in order to keep the app simple as per Apple’s design guidelines.
I split the information available on the current home screen to two screens which give further access to more information if the user needs.
While this did not reduce the overall number of screens, it was easier to access information without scrolling through all the other screens.
Minimum depth of hierarchy
Current user flow: user has to scroll 4 times to check their step count
Redesigned user flow: User can access steps and other information in the exercise screen through single interaction
I streamlined the navigation by adding interactive elements that can show more information and action within a single interaction.
These interactions replaced the existing horizontal swipe gestures used for navigation across the app.
This led to a simpler, and more intuitive design.
One-tap interaction
I made sure the design is consistent with the mobile app.
This included using the same color palette, similar icons, and an overall familiar feel.
The language used in the app is also consistent with the mobile app.
Design consistency across devices
I designed widgets to help users keep track of their calories and steps from the home screen, without having to open the app.
Widgets
One tap interaction to view breakdown of calorie consumption through the day and calories burned through exercise, step count, etc.
One tap interaction to view additional nutrient information other than macros
Prototyping and Testing
In order to test the hypothesis, I did a quick user testing with the existing design and the redesigned app.
01
100% task success rate on both the designs
03
Increased user satisfaction on the redesigned app
02
Increased efficiency on the redesigned app
Current User Interface
Results
Redesigned User Interface
This was a personal project for which I gave myself a timeline of 3 weeks. The entire process was completed within this timeframe.
One of the difficult parts of this project was collecting data since not many of the people I knew used the app. This resulted in me conducting interviews and asking general fitness goal related questions instead of doing a contextual inquiry or app specific questions.
Designing for this platform forced me to change the approach of how I design apps compared to designing for other platforms.
This redesign was limited by the features included in the mobile app to make it consistent. There is potential for more features like real-time step counting and logging exercise time directly into the app if integrated with other apps on the watch or phone.