Hero image of the case study showing some screens of the redesign

mobile app

MyFitnessPal Redesign

2019

CLIENT

Self Initiated

MyFitnessPal is an app that allows you to track your calories from food as well as those you burn through exercise - pair it with Fitbit and the two are a powerhouse in helping you reach your fitness goals.

As a user myself - and someone who uses the app every single day - I was able to identify some of the pain points of the current app that I would love to see improved. As someone who knows about nutrition and fitness, one of those areas is the visibility and understanding of calories, micro and macronutrients on a whole, and for each individual meal.

I took the initiative to redesign some of the features with the aim to educate the user through more clearly defined sections & visual representations to help dispel the myths around diet and nutrition.

Separating The Social & Article Feeds

One of the first problems I recognised was how the two main public engagement features were merged into a single place, despite both having severely different uses. I decided to separate them into two tabs to avoid cognitive overload and reduce confusion.
‍
Placing the social and article feeds on separate pages more clearly define their purpose; one is to be taken further away from the app experience (articles) whilst the other is for social engagement with friends.

This gives the user more of a choice on what data they want to see i.e competitive / social vs education / wellness.

Distinguishing User & Friend Status

Using a combination of brand colours and strokes, user posted status updates (blue on white) are clearly distinguishable from friend status updates (white on blue).
‍
Furthermore, automatic updates for friend achievements are visually different and are slightly more ambiguous - “lost 4lbs” vs “4lbs closer to goal weight”.

Visually Representing Nutrition

Visually representing the percentage of carb, fat and protein is reflective of many dietary practices. Users can more easily visualise the more nutrient-dense food items they’re adding which overtime will provide a reference for users to understand what is in their food.
‍
This is further supported by the coloured bar below each header which represents the macronutrients per meal.

Reducing Suggestive Colour

There’s a lot of misinformation around fitness and nutrition and I wanted to communicate the differences clearly without assigning negative connotations to that colour. For instance, MyFitnessPal assigns red for fat which supports the incorrect impression that fats are bad, when that’s not true.
‍
For this redesign, I reduced suggestive colour by using colours that more accurately support their meaning.
‍
Carbs are least important - we use carbs primarily for energy but we can live perfectly well eating no carbs at all.
‍
Fats being essential (mono and poly unsaturated) but to be wary of non-healthy fats (saturated, trans).
‍
Protein is the most important in that it’s satiating, it’s vital for recovery and a vital nutrient in keeping our body healthy.

A more detailed view in how the visual representation of how nutrition is displayed

User Metrics

Something that I think is always useful is to allow users to know how well they're performing throughout the day; namely through nutrition.

There are three core ways we can do this to not only provide information and data but also encouragement. Furthermore, this appeals to many different user archetypes.

One would be to display the total calories and macronutrients (useful for body builders, athletes, fitness enthusiasts). Another would be to show the calories they have remaining; useful for those intending to lose / maintain weight. Whilst the final one covers their overall journey from the start of their app usage.

NAvigation

Simplifying the navigation by removing the supportive text reduces unnecessary visual noise. Editing the icons to be simpler and more streamlined to stay in keeping with the overall aesthetic.
‍
The central plus button is essential as it allows the user to quickly engage with the app features i.e add status updates, weight, food etc without having to navigation to diary.