MyFitnessPal: A UX Case Study

Mel Smith Habibian
Tradecraft
Published in
7 min readMar 13, 2017

--

I’m passionate about products and services that enable individuals to live healthier lives. I conducted a usability study as a way to dive deeper into the world of behavior change, and as an exercise to help me improve as a designer.

Overview

My goals were to:

  1. Understand and identify usability issues in the MyFitnessPal iOS application through user research
  2. Create and validate potential design solutions
  3. Communicate my thinking and process
  4. Learn more about the most popular health tracking application

I used a variety of design techniques to categorize and improve user pain points and was able to demonstrate a significant increase in comprehension and task completion. You can find a comparison of the current application and my design solutions towards the end of this article.

Why MyFitnessPal?

With over 165 million users, MyFitnessPal felt like a solid starting point to help me understand how a product can help individuals create and maintain new health habits.

According to B. J. Fogg’s Behavior Model, a customer adopts a new behavior based on a combination of their motivation and ability to complete a task. When a customer opens the MyFitnessPal application for the first time, they have a heightened level of motivation to improve their health, but may not have experience with health tracking. I focused on this critical, new user segment.

In David Jones’ podcast on mobile engagement, he interviews former MyFitnessPal product manager, Nick Crocker, who states, “If (MyFitnessPal) didn’t get you to log food on the first day, the chances you’d log a food on the second day were very low.” It is difficult to influence a customer’s motivation. Therefore, MyFitnessPal should focus on minimizing friction and increasing the customer’s ability to complete certain tasks.

Empathize

“Yes, I’ll have a free teriyaki sample, and would you like to test my app?!”

The first step was to conduct guerilla usability tests as a way to uncover user pain points. I headed to the Westfield mall in San Francisco to conduct testing with 5 wonderful strangers on their lunch break. I asked individuals to perform tasks related to food tracking and progress, and asked that they verbalize their thoughts throughout the test.

Amazingly, 3 out of 5 users had used MyFitnessPal in the past. You go, MyFitnessPal! Fortunately for my testing purposes, MyFitnessPal has released updated versions of the app so these users were not familiar with the new interface.

User demographic from usability test

Based off my usability testing, I wrote a job story using the Jobs to be Done framework. This helped me wrap my head around customers’ situations, motivations and expected outcomes when hiring the application to achieve their health goals.

Most individuals that I tested had focused on their health regimen early in the year. The spike in motivation in the New Year is also known as the Fresh Start Effect, and I used this as the “scenario” in which someone might download the app.

Job story to help highlight a user’s motivation and expected outcome

Analyze

The next step was to review and sort my insights. First, I used affinity mapping (grouping ideas based on similarities) to identify common pain points.

Affinity mapping to identify pain points

Next, I created a 2x2 matrix to understand what issues might be both important to the business* and to the user.

Paint point categories organized in 2x2 matrix

I used empathy mapping (grouping ideas based on a user’s actions and emotions) to dig deep and understand what was happening for users when they experienced each pain point. What did they say and how did they act? Were they frustrated with themselves or the application?

Empathy mapping to dig deep into what the user was feeling

“Ugh! Why do I keep tapping “Create a Food” instead of using the search to find a food item?”

Define

Organizing my insights helped me narrow it down to two major pain points.

Pain point 1: Individuals are confused and not confident about how to search for and add a new food item.

Hypothesis: Emphasizing the search function on the food tracking page would allow users to identify the search action swiftly and confidently. I would know this is true when users were able to locate search during testing.

Pain point 2: Individuals have trouble understanding their food progress.

Hypothesis: Moving food progress information to the “Progress” tab would allow users to easily locate and understand their progress towards their nutritional goals. I would know this is true when users were able to locate food progress during testing.

Ideate

Now that I identified two major pain points, I created task flows to understand exactly where the user flow was breaking down and further analyzed the existing app screens where customers experienced trouble.

I sketched several potential solutions and conducted comprehension tests with colleagues who fit the user testing demographic and job story. I incorporated their feedback before creating hi-fidelity mockups. I moved forward with one solution for validation.

Lo-fidelity Wireframes

Prototype and Validate

Next, I jumped into Sketch and InVision to craft my prototype. I tested version 1 of my prototype on 5 new individuals.

Version 1 — The good news: individuals were able to confidently locate and understand their food tracking progress.

Version 1 — The bad news: searching for and adding a new food item was still extremely confusing.

How I felt after my first round of validation (Source: oatmeal.tumblr.com)

After testing my first prototype, I found that the changes I had made were not significant enough to draw the user’s attention to search. In fact, search was competing with twelve other possible actions on the “Add Food” screen creating a very high cognitive load for the user.

List of the twelve actions users can currently take on the “Add Food” screen in the MyFitnessPal application

At this stage, my objective was to make search as clear as possible for new users while keeping the other core functions on this screen intact. In my research, I found that a new user may not yet understand what “multi-add” will do, or what the location icon does, so how might we reorganize and reconsider hierarchical importance of actions on this screen?

I sketched, prototyped, and tested an additional five iterations until users were able to successfully and efficiently enter their meal items.

Six versions of my prototype throughout the validation process

Here is a recap of the pain points I identified from user research, my proposed design solutions, and the success rates before and after implementing the new design.

Conclusion

TL;DR: Through user research, I discovered that users expressed confusion and frustration when trying to add a food item to the MyFitnessPal tracker and also had trouble understanding their health progress. My suggested design solutions aim to match users’ mental models (who associate nutritional goals with “Progress”) and reduce cognitive load (reconsider hierarchy on the “Add Food” screen) which increases a user’s ability to complete the task at hand. Improving the user experience for these tasks would mean users are more easily able to add food items, understand their success, and create and maintain healthier habits and lives. For MyFitnessPal, this would mean an increase in new user engagement and retention leading to a higher customer lifetime value.

I learned just how integral research and validation was to my design process, and to test, empathize, and test again.

Additionally, I relearned that your customers love to tell you about themselves — their struggles, achievements, and hopes — as I experienced in my previous job at Omada Health where I spoke with users everyday. There is a sea of wonderful insights out there just waiting for someone to ask, “tell me more...” :-)

*Note: I do not work for, nor am I affiliated with MyFitnessPal.

Thank you for reading! If you any feedback or would like to say hello, please shoot me a message at melisalynnsmith@gmail.com, or find me on Twitter or LinkedIn. :-)

A special thanks to Yassine Bentaieb, Sina Habibian, Zac Halbert, Robert Lewis, and Michael Tea.

--

--

Mel Smith Habibian
Tradecraft

Product designer making the complex simple. Currently @MetaLab | melsmihab.com