MyFitnessPal App Redesign

A More Efficient Health Tracker

Matthew Jang
Aug 8, 2017 · 6 min read

Recently, I have decided to redesign the default iOS MyFitnessPal application. This is my take on adjusting the MyFitnessPal application to gear it towards simplicity and efficiency for everyday users to help them think less, or not at all.

The Problem

The MyFitnessPal app has been instrumental in my journey of staying healthy physically. That is, it has helped me keep track of what I eat, how many calories I am burning, and how much water I am drinking (if at all). That is not to say, however, that it has been the perfect application in assisting my health. I definitely came across frustrations in using the application, especially when I am on the run or at the gym trying to record the food I ate for breakfast before I forget. Here’s why:

1. The Home page is a mess at first glance. When a user first opens the application, the first page that pops up is the home page, and rightfully so. It is a hodgepodge of many (different) things, such as the calorie counter, advertisements, blogs, and so on. My first reaction was, “Woah, what is going on here?”, which means there are too many things going on. The ideas aren’t bad — but the way they are structured is. Regardless of how old you are, what job you have, or where you live, your purpose in downloading this application was to keep track of your calories, which is a function of the meals and workouts you record into the app. The current home page, however, distracts the user from that goal — which leads me to the second point.

Home Page

2. The purpose of the application is not very evident. As I have mentioned, the main goals of this application are to help the user keep track of calories, water & food consumption, and exercise. It does so through a “logging” system, kind of like a diary. The current diary page in the application works, but I think it can be more efficient so that the user does not have to struggle in figuring out what is where. That is, if you take a look at the diary page, you would have to scroll down to get a full gauge. That may sound lazy, but once a user adds a ton of information throughout the day, the scrolling may become unnecessarily tedious (I want to consider the worst-case scenario). I want all pertinent information to be readily accessible.

Diary Page (Have to scroll down for second image)

3. Logging process is frustrating. I don’t know about you, but I have had a lot of struggle trying to find the food that I just ate in MyFitnessPal’s food library. Many times, I was unable to find a specific food, and when I did, the nutrition facts were off. The app does give you the option of creating or scanning your own food, but that becomes tedious when time is short (worse case: someone eats new types of food everyday while traveling + does not know their nutrition facts). This may not specifically be a design challenge, but definitely had an impact on my user experience with the app.

Research + The Process

MyFitnessPal app has more than 170 million users and counting. That’s more than half the population of the United States. That’s crazy! This simply means that the app is doing something right. There is something that this app offers, that users want or need. In the AppStore, the app has 4.5/5 stars. But, after reading through them, I realized that the reviews with 4 or 5 stars are less useful than those with 1 or 2 stars. That is, I believe that constructive feedback comes from those who did not have the best experience with the app. Most of the complaints had to do with either technical and/or interface related issues. My goal is to offer a redesign that will increase the ever-so-large number of users, or, perhaps, bring back old users who left with a bad experience.

I took the process onto paper. I had two main goals: 1) redesign the front/home page so that the users can see the purpose of the app instantly (i.e. the calorie count + diary), and 2) create a new tab/page that only contains the blog pages to keep the original spirit of the app alive while changing the UI of the blog posts. The biggest change, of course, would be the home page, as I am practically taking a block of Legos, and separating them into their individual blocks of different colors.

Although a bit messy, the above illustration shows three compartments of the application in the order of most important to least. The first compartment is the “Diary” tab, which contains the calorie counter for the day, as well as the meals and exercise. The second compartment is the “Progress” tab, which, like the one already incorporated in the MyFitnessPal application, shows a graph of the progress that the user is making. And lastly, the third compartment is the “Blog” tab, which is a page dedicated to just blogs so that users who want to read the blogs can go there without having it distract them from the diary tab.

I would imagine the tabs to look something like this:

Final Design

Based on the sketches above, I have decided to separate the blog posts from the diary tab. Accordingly, the tabs changed, listed (in order) as Diary, Progress, +, Blog, and Settings. Moreover, the diary tab can be selected in two different views — one for “Meals”, and the other for “Exercise”.

My final designs are as follows:

Main Home Page (Diary)

This is the first screen that shows when the user opens the app. The user can easily identify the purpose of the app, and are able to see their progress and status from several days back to now.

Upon clicking a certain day (such as the ongoing Today tab), the user would be led to another diary page such as:

Diary (Meals Page)

This is the “Meals Page” of the diary tab. It specifically contains the meals input, as well as the calories counter.

On the other side of the token is the exercise page that the user can access to record their workout activities:

Diary (Exercise Page)

Last but not least is the “Blog Page”, which the original application included in the Home Page. Again, I have dedicated an entire tab/page to the app’s blogs to keep the original spirit alive:

Blog Page

Takeaway

This was an exciting project for several reasons. It was my first ever UX project. Although it was daunting at first, I was very happy to see the end result, especially because I did it all by myself. It was a simple project, but I hope this is just a first step out of many throughout my design journey. It was a great opportunity for me to critically and empathetically think about and redesign an application that played an important role in my life, and in many others as well. It broadened my scope of human-centered design, and motivated me to keep on keeping on. Thanks!

Matthew Jang

Written by

Student at UC Berkeley studying Cognitive Science. UX/UI Designer (matthewjang.com)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade