MyFitnesspal redesign
Client
Myfitnesspal
Role
UX / Researcher
Tools
Figma, Surveyhero
Duration
80 Hours
Background
MyFitnesspal is one the most popular calorie counting tools on the market with the largest known food database for its users. Founded in 2005 by Albert Lee and Mike Lee, MyFitnesspal’s popularity as a calorie counting app grew throughout the years, and in 2015, Under Armour acquired the company.
The initial goal of this project was to seamlessly create a feature for MyFitnesspal that will blend in with the app’s UI and functionality. After doing brief desktop research on the application, I came to the conclusion that an additional feature isn’t what the app needs. Users are overwhelmed with the the amount of features available to them and unaware of some; implementing a new feature would only add to the already long list.
Objective
The objective of this redesign is to identify user pain points with the current app appearance, layout, and usability. As a user of the application since 2012, I’ve seen MyFitnesspal go through many changes. I’ve been able to notice my own pain points, but not those of others. I plan on finding a solution to user pain points and attempt to restructure the app in a way that satisfies both user and business needs.
Challenges
- Maintain consistency of UI design
- Improve on information architecture of the current app (Android)
- Find a balance between business and user needs
Solutions
- Bring important user information to the forefront
- Re-design app pages with improved IA
- Identify dark UI patterns and seamlessly incorporate business goals in the app
PHASE 1: DISCOVER
Research Goals
- Understand user pain points with MyFitnesspal
- Observe user flow / task flow
- Understand what users are looking for when they first enter the app
- Collect data on most used and least used features
Desktop / Market Research
I conducted desktop and market research to identify MyFitnesspal’s main competitors and to understand user’s perspectives and use of MyFitnesspal. When categorizing MyFitnesspal as an app for weight loss, its main competitors appeared to be Weight Watchers, Lifesum, Loseit!, and Noom. Compared to its competitors, MyFitnesspal has the largest food database, with over 12 million options listed. However, the competing apps offer a community based experience for its users that attempt to aid and support them on their journey. There is also a common consensus amongst app review sites that users report enjoying competitor app interfaces more than MyFitnesspal’s.
I read through several review platforms and noticed that many pain points began to surface after Under Armour bought the company. The majority of users categorize MyFitnesspal as a calorie counting app / weight loss tool, and have always thought of it as that. User concerns predominantly focus around a cluttered interface, the app losing focus with its original mission, and not having necessary information readily available.
User Research
I created a survey consisting of 20 questions that focused on user habits, feature categorization, and open ended questions to gather both quantitative and qualitative data. A total of 10 users participated and all users were recruited from Instagram. The survey was open to both experienced and inexperienced calorie counters / app users to reduce the bias of gathering data only on users who were associated with the app before Under Armour took over. My focus moving forward after reviewing survey results is to understand how the app’s information architecture affects usability. A key issue that survey users have is accessibility to their user diary and the amount of dark UI throughout the app experience. I will touch on this point later on.
PHASE 2: DEFINE
Information Architecture and Task Flow
To get a better understanding of MyFitnesspal’s app organization, I created two deliverables, MyFitnesspal’s current site IA and my proposed IA. What stood out to me the most is the amount of access points available for the same page. I believe that MyFitnesspal might take this route because it gives users more options when trying to navigate to a certain page, not limiting them to one pathway. My proposed app IA focuses on the opposite. From collected research data, many users don’t know how to access specific pages or features due to unclear access points. The most accessible way might not be the most efficient. Not only does MyFitnesspal’s current IA affect users, but the business as well. Tucked away in its extensive drop down menu are new features like “Plans” and “Workout Routines”. When questioned about those features, users stated that they primarily don’t use them because they seem out of place.
Where multiple access points affect users the most is when completing the task of adding food to their diary. There are three ways you can search for a food to add to your diary in the app, with all methods leading to the same end screen, but taking varying amount of time. Below you can find task flows for logging a food in on the native app and the proposed task flow.
CURRENT APP FLOW – TASK: ADD A MUFFIN TO DIARY (BREAKFAST)
PROPOSED APP FLOW – TASK: ADD A MUFFIN TO DIARY (BREAKFAST)
When thinking about a more efficient method for adding food, its important to keep in mind the users’ intended use of the app: logging in food to track calories, nutrition, and possibly weight management. With a sticky bottom nav that has a dedicated ‘+’ button for diary entries, users will have a clear and direct path to complete tasks under the main function of the app. Once users tap on the ‘+’ button, they are directed to the ‘add to diary’ page where they can add recent foods or search for new ones. Also within that page is the option to add to their water log and exercise log.
Add Your Heading Text Here
Before I began working on the app redesign, I wanted to identify the impact and viability of features in regards to user and business goals. I created a four quadrant chart and placed app features in the most appropriate section.
Dark UI
On almost every page within the app, there are prompts for users to go premium. A lot of features that should be included in the user’s calorie counting experience are only accessible to premium members. With these features locked, and considering the high monthly price for premium ($20), users are left feeling limited with what they can do on the app. Moving into the design phase, I will be addressing this issue by ‘unlocking’ features that should be included in the free user membership.
PHASE 3: DESIGN
As I move into the design phase, I aim to bring necessary user information to the homepage, create a smoother flow for making a diary entry, and apply more accessibility and empathy to how new app features should be presented to users. I started by collecting assets for a style tile, finding logos and some icons from public brand files. I matched the typeface to what I thought looked similar to MyFitnesspal’s, and found the rest of the icons on the Iconify Figma plugin. Below you can see the final UI kit.
I sketched 2 page designs while working on the app IA and features, mainly to get an idea of what the homepage would look like.
I focused my low-fidelity design efforts on the homepage redesign and the “add to diary” and “workout routines” pages. The homepage dash brings necessary tracking information in one place so that users can quickly access their diary entries and nutrient details. Although the workout/routines page very closely resembles the current app’s visual design, I think the IA changes will allow users to think of the feature as more useful and less confusing, specifically through the clear differentiation between free and paid plans. I decided to give the “+” button the dedicated function of adding to the user’s diary so that logging in food on the go becomes easier by requiring less taps.
Due to the short amount of time given for this project, I worked through the wireframes quickly but diligently. I wanted the prototype to be as realistic as possible for usability testing. I started by designing 4 basic pages for the app.
I found that designing the pages was a bit challenging due to the constraint of keeping the appearance as close to the original as possible. I found myself referencing screenshots of the app throughout the design process in order to keep visuals consistent. Users have already learned the MyFitnesspal app so I worked around designing wireframes that attempted to improve page structure while staying recognizable.
Usability Testing
I built out 8 more pages for the usability test, which included the specific food page, goals page, weight tab, and nutrition tab. A total of 3 participants were recruited for the usability test with 2 being experienced and proficient at the app, and 1 being a returning / sporadic user. All 3 participants were female, ages 25-30, and used the app primarily as a calorie counting and weight loss tool. Users were asked to complete 4 tasks on the prototype app while sharing their screen, afterwards users completed the same 4 tasks on their native mobile app. At the end of task completion, users were asked both multiple choice and open ended questions regarding their experience.
Likes
- Necessary information is presented clearly on homepage
- Organization of app features
- Learnable pathway to add diary items
Pain Points
- Some content language is confusing
- Colors of the homepage diagram are misleading
- Trouble learning simplified pathway
Results from usability testing were insightful and led me to believe that the redesign was on the right track. Because the UI is so similar, Users stated that they were inclined to navigate the prototype the same way they would the native app. Once users became accustomed to the design (and clicking within a phone shape on their computer screen), it was easy for users to find what they were looking for and to complete the given tasks quickly. From the testing I saw that users became comfortable with the single function of the ‘+’ button and stated that they would be more inclined to use the recipes and workout features of the app. Below you can see the final pages with some updates made from usability testing feedback.
HOMEPAGE FEATURES CALORIE / MACRO INFORMATION AND DIARY, WHAT USERS ARE LOOKING FOR WHEN ENTERING THE APP. USERS CAN SEE THE MACRO BREAKDOWN FOR EACH MEAL, A FEATURE PREVIOUSLY LOCKED IN PREMIUM.
‘ADD TO DIARY’ PAGE ALLOWS USERS TO LOG FOOD IN QUICKLY AND ADD TO EXERCISE AND WATER TABS. ONE TAP FROM HOMESCREEN BRINGS USERS DIRECTLY TO THIS PAGE.
REORGANIZATION OF THE WORKOUT PAGE IA WILL ALLOW USERS TO FEEL MORE COMFORTABLE NAVIGATING ROUTINES, FILTERING FREE AND PREMIUM OPTIONS.
APP Page Comparison
Left: Native app, Right: Redesign
Conclusion
Through usability testing it is clear that restructuring the app’s IA and how it presents information improves the user experience and helps to keep MyFitnesspal’s purpose / use at the forefront. While designing these pages, I kept thinking that there is a better way for the app to be structured where both user and business needs can be achieved. From my research, users do not use the status or community pages and feel as if the blog articles on the homepage get in the way of the app’s purpose. MyFitnesspal puts out great articles that can really benefit its users and should keep them in the app. I found that placing related articles in pages where users would expect them increased positive response to the posts. With increasing interest in workout routines, especially during a time where gyms and fitness facilities are closed, MyFitnesspal, and Under Armour can benefit from members using the workout routines page and its features more often.
I learned a lot about how to restructure IA from this app redesign and how to think clearly about what an app truly needs. In this case, MyFitnesspal and its users will benefit more from a redesign than a new feature. One of the most insightful comments a user made was that all app / sites require a learning curve, but what makes it easy or difficult to use is if the same mistakes aren’t repeated over and over when trying to complete a task. With an app as loved and useful as MyFitnesspal, it is incredibly important to value learnability and memorability of functions.