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.
Before & After:
for visual understanding of
Easy to access nutrient
now on seconary screen
Profile & progress
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.
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.
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!
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.