MyFitnessPal Redesign

An App Redesign Project

The Basics

Company
MyFitnessPal

My Role
Product Designer, UI/UX Designer, User Researcher, Data architect

What is Fitnesspal?

MyFitnessPal is a smartphone app and website that tracks diet and exercise to determine optimal caloric intake and nutrients for the users’ goals and uses gamification elements to motivate users.

The Challenges

I’m a huge fan of Fitness Pal. I use this app on an everyday basis. So the app has been instrumental in my ongoing health and fitness journey. Helping me to simplify and plan a healthy lifestyle around my own everyday life, and avoiding getting lost in fad diets, and miss my goals.

The more I used this app the more inconvenience I felt. In other words: I get frustrated. So I decide to redesign this app.

  1. The change data architecture of homepage
  2. Redesign breakdown of caloric and macronutrient tracking
  3. Modify the apps navigation bar
  4. Simplify the customization of changing food weight

Before I start redesign I made a small survey to make sure this app did have problems. I asked these individuals to perform tasks related to the general usage of MyFitnessPal such as food logging, change the weight of food and checking their caloric breakdown.  I randomly asked 5 people to finish the following tasks:

  1. Add your first food.
  2. Find the breakdown of the nutrients.
  3. Add 4 foods in one time.
  4. how do you like the home page?
user-testing-progress-bar

Persona

I created a persona based on my key findings and takeaways from the users I spoke with.

Sitemap

Of being able to log and track food more quickly and easily her is an overview of the new sitemap.

sitemap-01

Hi-fi wireframe

I created a hi-fidelity mockup of the home screen in adobe xd.

Increase Sign-ups for Premium Membership

It’s important to show the CTA there where are the most suffer points.

premium-membership-01

Prototype

Slide between different macros

Change food weight directly on startpage

Minimize calorie progress bar