MyFitnessPal Casestudy
the challenge
MyFitnessPal (MFP) is a popular app with a wide range of tools for tracking what you eat and how many calories you burn throughout an activity. But like a New Year’s Resolution, staying motivated to keep using it may be difficult. My challenge is to highlight opportunities where MFP can improve retention with existing users and through research, redesign at least one screen on the app.
The Goal
My role is lead product designer and researcher. This exercise is not affiliated with MyFitnessPal and was done as a personal project.
Research
User Interviews
First, I conducted interviews with current users of the MFP app. I pre-screened applicants, focusing on active users in order to focus on retention. I then followed up with five users. Key takeaways from the user interviews were as follows:
Users find the app easy to use, though had alot of features.
they were excited about new plans offered by MFP that highlight workout and nutrition plans but didn’t know they were available
They didnt found scrolling through articles tedious, oftentimes skipping this to input workout/meals instead.
Affinity Mapping
The survey helped me get an idea of who the customer is, their interests, and pain points. I took those results along with research on studies done for MFP, fitness tracking and the psychology behind weight loss/fitness as well as reviews of the app and grouped my findings using an affinity diagram to better understand pain points, locate gaps and sum up major insights. Below is my first iteration and then a cleaner version of the affinity map broken down into sub categories.
Define
User Persona
I built the below persona based on the demographics I pulled in my user interviews along with the more detailed information I pulled from research.
User Scenario and Task Flow
I then mapped out two scenarios focusing on the persona. From there I identified problems and proposed solutions.
Scenario: Anna is having an off day and feels that she might go over her limits for the day. she wants to check her progress for the week .
Scenario 2: Anna loves the support she gets from group classes. She’s been using MFP for a while but is the excitement is wearing off and she wants motivation.
Design Audit
In addition to a user task flow, I pointed out user experience redundancies and areas where the app could be more clear. To see full design audit click on image below.
.
Pain Point:
Getting access to support isn’t prioritized. The current app has multiple homepages, none of which highlight community, goal support or progress. The workout routines, nutrition plans and community forum are hidden and the blog posts. Rather, the user skips to inputting food/exercise items. Visualizing progress is difficult as user can only swipe from one day to the next to view calories over the week.
Solution:
Re-design home page as a clean, organized dashboard with tasks such as daily article and weigh-ins as well as links to popular community posts and recipes. Suggest workout plans and visualize progress over week showing macros and calories.
Separate the dashboard from the profile/settings to give each area a clear purpose and make it easy to use.
Pain Point:
Anna needs to stay motivated enough to continue using the app. She likes the streaks feature but isn’t motivated to use it. Oftentimes she turns off meal and exercise reminders but turning them on requires extra steps as the reminders tab is hidden.
Solution:
Add reminders settings to meals in diary so that user sees them rather than hiding them under the more tab. Further testing: push notifications should be tested in a way that adds value to the user’s day.
Prioritize streaks on main nav. Further testing: Use streaks to incentivize motivation something Apple Watch does well. Try “unlocking” certain premium features as a reward with longer streaks: workouts, recipes, discount codes for Underarmor gear etc. Badges or levels can be tested as well. Further testing required.
Ideate: Low-Fidelity Prototype
I took the feedback from my research to re-design the home screen as a dashboard. The biggest difference is the “tasks” portion which will highlight important articles, workouts, and plans. I addressed the lack of visibility with streaks by including it on this page. In place of multiple profile tabs, I redesigned the profile as a sliding menu from the left or a card that slides in from the bottom of the screen. The profile card gives the user a place to see message engagements with friends and notifications from MFP.
four options created for a new “dashboard” in place of “home tab
two options created for a profile screen
After going over the options with five users, I found that the tile method was an effective solution for a dashboard. It prioritizes streaks and offers motivation in the form of a few tasks a day that introduce the user to new recipes, workouts and plans while highlighting important blog posts.
User flow for viewing and adding a task from dashboard frame.
High Fidelity Prototype
I redesigned the app to feature a dashboard over it’s feed as a homepage. See versions below.
You can view the final clickable prototype here.
Version 1 of “Today” Dashboard. I used tiles to organize the information, highlighted streaks in the upper right corner, made progress visible in the header as well as friends for social networking. Tasks and Weekly Progress are new to the app. I changed the main nav on the bottom to include “Today”, “Community” (to highlight forum and groups for support), and “Plans” to highlight the new guided plans features. The second screen shows my changes after testing. Users missed the notification alerts so I brought them back as a notification bubble. The other feedback I got was that they would like to control what and how the tiles are organized. I included the breadcrumb menu next to the date that unlocks the tiles so they can be rearranged or changed. The third image shows the new profile menu.
I designed a new “diary page” that visualizes macros and calories together. This circle graph makes for a better tile image on the dashboard page and also reflects the appearance of the task tile to create unity throughout the app. The daily calorie goal will change with exercise allowing for more calories daily. The outer ring is for water consumption. when the user presses on the ring it shows current carbs, fats, protein, and water percentages. This A Version includes a slider to turn the reminders on/off.
Version B doesn’t have the water ring and includes an alarm bell in place of the on/off slider for the reminder. I wanted to test to see if water consumption was important to the user. The alarm is bright white when activated. I tested both versions. Four out of five users preferred the alarm bell over slider. The switch was confusing them. Some thought it was meant to turn off breakfast or lunch. With the bell version, it navigates them to the reminders page where they can change the time they want to set their reminders. The water ring was also confusing to users especially because it was difficult to find the right area to press on that didnt overlap with the macronutrients ring. five out of five users found said that keeping track of water was least important to them when compared to the food tracking and exercise tracking.
After testing the tasks screen, I found that users asked where they could add their own tasks. So I added a button on the bottom to give them that option. I also got the feedback “why are the images so small?” I think the smaller images made for a more cluttered UI which felt overwhelming to the user. I adjusted the size of the image tiles to make the experience less busy and overall less overwhelming. The last frame is a screen shot of the menu the “add a task” button brings up.
Conclusion
I found that this experience really helped me understand how important human interaction is when it comes to fitness and nutrition goals and how difficult it is to really capture that interaction while being sensitive to how personal nutrition and fitness are. Overall I learned the most important piece was making sure the user had the right tools available to them on their terms. The user wanted to add tasks and control what kind of information they found valuable yet they wanted to have more structure to their goals. So much of my redesign was a balance of giving them tools without being overwhelming and allowing them flexibility on how to use those tools. Striking that balance was the most difficult part of this project.
As I did this case study on my own, with no input from stakeholders or longterm engagement data, I had many limitations as well. I would want to test the tasks feature over time to see how it affects engagement and where we could improve on it. I would have had several meetings with stakeholders along the way to make sure we were aligned. If I had done this with MFP, I would have liked to have taken next steps in incentivizing streaks with fun and interesting perks like badges. I also would have tested notifications. There are some great way to motivate a user through notifications that add value to their day. I
When I tested the final prototype I found the following: 5/5 were interested in trying new tasks. 5/5 preferred the new interface to the old one on a whole. 4/5 were interested in incorporating their own tasks. 5/5 could navigate the new diary function with macros ring. 3/5 said they would be interested in trying the reminders out.
