Case Study
Research | Mobile UX/UI Design
Background
MyFitnessPal was launched in 2005 with the goal of helping users track their diet and exercise. Tracking health and fitness can be a cumbersome task in a fast-paced world, but the database and ease of use behind MyFitnessPal is meant to make this process easier for users on whatever health journey they might be on.
MyFitnessPal continues to expand as people find themselves wanting to adopt healthier lifestyles in the wake of the pandemic, and with over 100 million users, appealing to and retaining users with useful features is of utmost importance.
Role
Mobile UX/UI Designer working to add a feature.
Evaluate how users currently use MyFitnessPal and their goals with the app
Identify missing niches for MyFitnessPal
Deliver a high-fidelity prototype of an original additional feature that satisfies user needs
Objectives
Timeline
80 hours over 5 weeks
Research
The main goals of my research were to identify the motivations to use a fitness/health app such as MFP (or similar), identify current frustrations or pain points in users’ fitness journeys while using an app, and identify user needs that are not being met but which could be with an additional feature.
I also wanted to learn how users track food and nutrition, learn what is the most important aspect of using a health tracking app, learn how users track their fitness and progress.
My main methodologies that I used in my research for this involved competitive analysis, secondary research, and user interviews.
Health tracking apps are a large business and there were a variety of apps to evaluate. For my competitive analysis, I honed in on three popular alternatives that I would see mentioned on health and fitness forums: LoseIt!, Cronometer, and Fooducate.
The analysis and key findings here presented a good basis of what users might be looking for as well as what features might be lacking within MyFitnessPal itself. While I had not honed in on a feature focus yet, it gave a good overview of what to think about.
Competitive Analysis
Secondary Research
MyFitnessPal functions as an app to track diet and exercise, using gamification to encourage users to stick to goals. It was founded by Albert and Mike Lee in 2005, and since then, has become one of the most popular health tracking apps.
Some of its major features include
Barcode scanning of food items
Ability to set macronutrient goals by gram
Nutrition analysis
Connection with fitness devices like Garmin or Fitbit
Recipes
MFP’s UI is relatively simple, though impeded by the number of clunky advertisements on various screens. Calorie tracking is considered the main feature, and features prominently at the top of the dashboard and food diary. A user can add food and exercise data relatively easily through searching through the database, and if a routine is consistent, the Quick Add feature allows a user to quickly “swipe” on foods to complete their diary for the day.
As the app has grown over the years, a number of features have been added, including nutrition tracking, adding one’s own recipes, setting reminders, or setting goals for certain aspects like “steps” or “measurements” to track health progress.
This chart shows a recent chart from Gallup in 2020, tracking who exactly uses fitness or health apps. High-income households, young adults and women are among the top users.
Some potential reasons to use a health app like MyFitnessPal might be to
Lose weight
Gain muscle
Maintain weight
Track nutrition and vitamin content of foods
Track steps or exercise
For my user interviews, I recruited a mix of four different participants for user interviews, all with various experience using either MyFitnessPal or a similar health app. I used a semi-scripted interview method, involving questions to get a feel of their habits with fitness and the app, why most people might want to use MyFitnessPal, and possible missing niches.
User Interviews
Key Findings - Goals and Needs
All users had the primary goal to lose weight rather than maintain or gain
Most users achieved this through calorie tracking, not nutrient tracking
Users primarily wanted to eat healthier through cooking at home and found recipe creation to be useful
All users varied in exercise needs, from avid fitness enthusiasts to those who prefer walks
Key Findings - Frustrations
For reinforcement of a goal, most users said they were not against negative reinforcement, or being told a food or meal plan was unhealthy
Many users would plan out their meals before eating with a meal prep or by tracking foods for the day and adjusting
Some users found breaks for special occasions helpful for keeping them motivated
Key Findings - Motivations
Users would lose track of their diet due to cravings for snacks or fast food
One user expressed dismay with there being a lack of Indian foods in the database, which could be difficult for recipe creation
One user expressed that calorie counting was not the best goal for them in retrospect, and focusing on holistic health would have been more useful
Define
Based on my research and user interviews, I formed a user persona focusing on the idea of someone who might be using the app to primarily lose weight. This was the main goal highlighted by most of my users, falling under an umbrella of general “aesthetic” goals that users might be using health tracking apps for. This persona primarily uses the app to track food and general fitness.
User Persona
Based on my research and brainstorming, I wanted to hone in on a filter feature that would go well with My Fitness Pal’s recipes. I noticed that many users who had the goal to lose weight or eat healthier would begin to start cooking at home more, or attempting to in order to avoid temptations. A pitfall with cooking at home is that it can be harder to measure calories or macros, so filtering through easy to find recipes could be an option to make this easier for users.
Task Flow
Design
A major part of the design process for this project was working within the limits of MFP’s standard UI design. While it made it easier to not focus on branding, I had to think of ways to incorporate a new feature into an existing task flow and design, without letting my own personal tastes take over.
These are some simple initial sketches showcasing the “New Feature” button/alert for users, as well as the next page bringing us to all recipes, along with a “Filter” button which should open up an overlay of various filters to browse through recipes easier.
Initial Low-Fidelity Sketches
The above sketch highlights various filters I was interested in incorporating, namely a slider for the calorie range, options for different ethnic cuisines, options for different diet plans, and options to exclude foods. I narrowed down to these filters based on what was easiest to incorporate in my time limit and what seemed to be most immediately useful to my user base.
For my mid-fidelity wireframes, I was mostly able to recreate my sketches while also incorporating the general design of the MFP app. While most of the filters were straightforward, the “Exclude Foods” filter was a bigger challenge to overcome, as I had to think of a way to communicate the concept of excluding an ingredient and making this known to the user.
Mid-Fidelity Wireframes
Filter Overlay
Exclude Foods
Dietary Needs
Recipes Page
Prototype and Testing
For the more completed prototype, I altered some aspects when I started to think of how to realistically make this clickable. This involved mainly switching the Calorie Slider to the “More Filters” section, as this would make it less complicated for the recipes to “update” after a user decides on their preferred caloric range. I’ve added wireframe screencaps and a video of the prototype in motion, depicting the task of a user using the filters and bookmarking a recipe.
High Fidelity Wireframes
For the testing phase, I recruited four users, all with varying levels of prior experience using health tracking apps. The main objectives behind my testing were to see how users interact with filters that have ranges (Calories), exclusions (Exclude Foods), and filtering in specific aspects (Cuisine). I also wanted to identify pain points in the filter process on MFP.
Testing and Key Takeaways
Overall, almost every user pointed out that it might be easier to use the calorie slider to type in calories instead. This was the main feature that should be altered.
One user pointed out there could be a confirm button added to some features.
Most users felt that the flow for all filters was quite straightforward
The “Cuisine” filter was the most popular, with most pointing out that filtering food by ethnic “style” would be useful in narrowing down choices
Conclusion and Next Steps
This was my first project where I had to add a feature rather than work to build an app or site fully. While this came with it’s own set of challenges, I found it insightful to be able to jump straight into the process of research and design and put all my efforts into smaller, subtler changes.
Given user feedback, most changes for filters were subtle. While I kept the calorie slider feature, I also added an ability for a user to manually type in the calorie range that they want. Additionally, I added a “Show Recipe Results” button if a user wishes to confirm all their choices for filters and see what recipes are effectively “filtered out”. I’ve showcased a before and after of the updated screen below.
Before
After
Continue with research and usability testing
Think about how to incorporate other filters that might be useful, such as “amount of time to cook” or “include these ingredients”
Test other task flows for different filters