MyFitnessPal

Redesign

December 2020

new home.png

Overview

In order to grow my confidence with Adobe XD, express my creativity, and cultivate my own design style, I decided to redesign a few pages of the MyFitnessPal application. 

MyFitnessPal has been the leader of food and weight tracking applications for years. However, its outdated and unintuitive design makes it susceptible to falling behind its competitors. Additionally, MyFitnessPal is lacking the customization that is vital when we are involved in the subject of unique individual users' bodies. Allowing for more customization by the user makes the application much safer, healthier, and ethical.

 

In order to keep MyFitnessPal as competitive as possible, I set out to redesign and reorganize some of its pages to ensure it was as user-friendly and lovely to use. 

Sketch

Scan 8.jpeg

Before & After: 

Home

IMG_4362.PNG
smartmockups_kl3zzv0i.png
smartmockups_kl3zygfd.png

Progress circle 

for visual understanding of 

calorie consumption

Easy to access nutrient

breakdown

Feed

now on seconary screen

Profile & progress

Settings

My main objective for the home page was to change the layout from the blogging page to a page that is aimed towards food and macronutrient tracking.

Additionally, I changed the navigation bar to reflect this change. I also changed the confusing "progress" and "more" button to more easily understood options. 

Perhaps most importantly, I added the option to customize the user's caloric intake. The way MyFitnessPal is set up currently allows little in the form of calorie customization. Because each user has a different body with different needs/goals, it is important to give the user agency over their own caloric goals and not have a predetermined number. 

Progress

progress pagepng.png
smartmockups_khrz8gya.png

Visual of percent

of journey completed

See nutrition breakdown over time to see what macros you are consuming too much or little of

For the "progress" page, I wanted it to feel a little bit more coherent. I changed the graph currently in use to another progress circle to mimic the home page. Next, because a main feature of MyFitnessPal is macronutrient tracking, the new interface will display macronutrient consumption across time to inform the user of their consmption.  

UI Decisions

In terms of the user interface design, I wanted the application to have less of a cold and disconnected feel. I chose colors that would promote calmness and comfort due to MyFitnessPal's sensitive focus on food and weight tracking. I aimed for an interface that was inviting and encouraging to users to keep going on their journey, regardless of the bumps in the road!

Moodboard

Screen Shot 2020-11-21 at 3.14.54 PM.png
Screen Shot 2020-11-21 at 3.16.37 PM.png

Reflection & Future Development

At the end of the day, this was a project to get the creative juices flowing and develop more skills with Adobe XD. 

In the future, I'd like to do more in-depth user research and testing to see if my designs resonated and worked for other MyFitnessPal users.