Myfitnesspal diary redesign
Tools used:
Figma
UXPressia
Canva
Team:
1 Designer/Researcher
My role:
Designer
Researcher
The Design Process
1
INTERVIEW
2
PERSONAS
3
JOURNEY MAP
4
REDESIGN
5
PROTOTYPE
The problem
MyFitnessPal is a highly popular mobile and web-based application known for its comprehensive fitness and nutrition tracking capabilities. It aids individuals in effectively managing their diet and exercise routines. Widely utilized by people of all ages seeking to enhance their overall health, MyFitnessPal has gained significant popularity. However, the current diary page within the app leaves room for improvement in terms of user experience. Thus, the primary objective of this project is to enhance MyFitnessPal by making it more user-friendly and intuitive. I also aim to enhance the verified food item feature by exclusively including verified items, thus allowing users to place further trust in MyFitnessPal.
The SOLUTION
To enhance the Diary experience and the verified food item feature, I started by conducting interviews to gather additional insights into users’ preferences and dislikes. With the information gathered from these interviews, I developed a journey map to visualize the overall user experience within MyFitnessPal’s interface. My goal was to design a more visually appealing user experience for the Diary page, while also prioritizing the inclusion of verified food items by default. This would eliminate the need for users to manually filter and select only verified items, saving them valuable time and effort.
INTERVIEWS & PERSONAS
I conducted several interviews to gather feedback on users’ experiences, likes, and dislikes about MyFitnessPal. Based on the findings, I have created two distinct personas, Julia and Ben, to provide a clearer representation of the users’ experiences.
Both Julia and Ben rely on MyFitnessPal to maintain their health and fitness goals. While they appreciate the functionality of the application, they encounter certain areas that need improvement for a better user experience.
CURRENT JOURNEY MAP
The customer journey map below illustrates the current user experience with MyFitnessPal’s interface. While MyFitnessPal offers many impressive functionalities, its current interface lacks engagement. The visually plain and repetitive design may make users less interested in interacting with the application, leading to a potential loss of motivation. Moreover, the absence of engaging features makes the application perceived as outdated. The inconsistency of verified items may also lead to users mistrusting the application. If this negative experience persists, users are likely MyFitnessPal in favor of alternative nutrition tracking applications.
REDESIGN TOUCHPOINT
MyFitnessPal has definitely experienced significant growth over the years, becoming very popular. However, its design has not kept pace with modern trends and innovations. The current interface appears plain and repetitive, which gives the impression of an outdated application, leading to a lack of user engagement.
To address this issue, MyFitnessPal should consider revamping its design to provide a fresh and visually appealing user experience. By incorporating modern design principles and trends, the app can attract and retain users more effectively. Introducing a clean interface with a modern aesthetic would make the app feel more up-to-date and engaging.
In addition to the overall design, one specific area that requires improvement is the food item lookup feature. When users choose to add a food item, they are directed to a page where they can search for the item and scan it to find the correct match. However, a significant drawback of this page is the inconsistency of verified food items. MyFitnessPal should prioritize the inclusion of verified food items in the search results by default. This would save users the extra step of having to manually filter and select only verified items.
By updating its design and addressing the issues with the food item lookup feature, MyFitnessPal can rejuvenate the user experience and maintain its position as a leading fitness and nutrition app.
In-Depth Redesign
Calories Remaining
In the redesign, I have introduced completion bars to indicate the progress users have made toward their calorie-intake goals. This visual representation helps users quickly see how close they are to reaching their goals.
On the left, in the current version, users had to go through additional steps to access this feature, making it less intuitive and potentially causing frustration. However, in the new design on the right, I have made sure to provide this information upfront, allowing users to see their calories remaining and progress towards their goals immediately. This improvement enhances the user experience by providing quick and convenient access to important information.
Diary Experience Interface
In the new design, you can see that it has a modern and trendy appearance. The interface has been updated with a clean and visually appealing redesigned layout.
One important addition to the redesign is the use of pictorials. By incorporating pictorials, users can experience a more engaging and interactive interaction with the application. Pictorials can add a touch of fun and make the overall user experience more enjoyable.
Overall, the redesign aims to create a visually appealing and user-friendly Diary experience while incorporating elements like pictorials to further enhance user engagement and interest.
Add Food Button
I have redesigned the button to make it more visually distinct and recognizable as a button.
To ensure that users can quickly identify it as a button, I made two significant changes. First, I changed the background color to a distinct shade, differentiating it from the background This change draws attention to the button and signals its interactive nature.
Secondly, I added rounded edges to the button. This design choice aligns with common button design patterns and further reinforces its button-like appearance. Rounded edges are often associated with clickable elements, making it easier for users to understand its purpose without any additional cognitive effort.
By making these modifications, the redesigned button is more visually prominent and clearly recognizable as an interactive element, enabling users to intuitively understand its functionality.
For the verified food items, in the current state (left,) you’ll notice that many items lack a green checkmark, indicating that their macronutrient information may not be accurate or verified.
To address this concern and ensure the reliability of the information provided, I have implemented a redesign that only allows verified food items. By restricting the selection of verified items, users can have confidence in the accuracy of the macronutrient data presented in the application
This new design aims to provide users with a trustworthy and reliable source of nutritional information, promoting a more informed and effective tracking of their diet.
Verified Food Items
Verified Only Button
By exclusively allowing verified items, the need for the “verified only” option becomes useless and, as a result, can be removed from the application.
With the implementation of verified items as the standard, there is no longer a requirement for users to manually filter or select the “verified only” option. The verification process ensures that all food items available in the application meet the required standards for accuracy and reliability.
Removing the “verified only” option improves the user experience, simplifies the interface, and eliminates any confusion or potential mistakes that may come from using non-verified items. Users can trust that all the available food items provide accurate macronutrient information, creating a more trustworthy experience within the application.
Redesigned Prototype
To showcase the new design, I have created a prototype that incorporates the redesigned Diary interface and prioritizes the inclusion of verified food items in the search results by default.
RESULTS
In conclusion, the redesign of MyFitnessPal aims to provide users with a more modern, intuitive, and trustworthy experience.
By revamping the design, MyFitnessPal would not only attract but also retain numerous users. By prioritizing verified food items by default, users would save time and develop trust in MyFitnessPal. These enhancements will attract new users while retaining existing ones, positively impacting their health and well-being.