An unsolicited UX/UI redesign to improve access to primary features and its overall interface design.
Overview
Team
Independent Project
Role
UX Research
UX/UI Design
Tools
Figma
Illustrator
Photoshop
For most of us, life already requires a balancing act. In addition, as the world reels under the perils of the pandemic, keeping fit and eating healthy have become a top priority. I, along with most people I know turned to MyFitnessPal apps as a means to start. Soon, I found myself using MyFitnessPal to track my daily food intake, calorie, and log activity. However, despite using the app religiously, I have encountered a few problems while using the app. So, I decided to take this opportunity to redesign its interface and improve the user experience in any way I could.
Through usability testing, I discovered that many users shared the same issues with its interface design while navigating within the app to find relevant features that they wanted to use. Based on my research findings, I redesigned MyFitnessPal’s core screens, cleaned up features and information hierarchy to improve access to critical information and its overall user experience.
Disclaimer: I am not affiliated with MyFitnessPal in any capacity.
01 // Understand
User Research
Talking to Users
To begin the process, I went through the app and crafted several scenarios to test with real users. I conducted usability tests in person, with 3 current and first time users of the app and asked them to perform tasks related to general usage of MyFitnessPal:
Food logging
View caloric nutrients
Search for food
Track progress
Main Takeaways
Affinity Mapping
Using affinity mapping, I then grouped my findings and observations by similarities and organized them to glean insights to several key issues common amongst participants.
Affinity Map
2x2 Matrix
I created a 2x2 matrix to help me prioritize each key pain point and made assumptions about which problems are most important to the users and MyFitnessPals.
2x2 Matrix
Defining The Problem
Based on my results, I decided to focus on the key pain points that are most important to both the business and user.
The primary function of the app is hidden away on a secondary screen: tracking daily food intake and macronutrient overview
Discoverability issue with new and relevant features within the app
Lack of option to view detailed information
Users found the food logging process to be inefficient
All users found the overall interface design to be boring and unappealing
02 // Ideate
Persona
I created a persona to put a face on MyFitnessPal users and to guide my design decisions and priorities. This persona is roughly based on the findings and insights from the users I talked to, and it includes various aspects of their behaviors and motivations to keep in mind throughout the redesign process.
User Persona
Restructure
Before starting the wireframing work, the app required restructuring in order to support the redesign. I began the process by re-imagining the bottom navigation to correspond with the redesign of the app.
Home
The home page will combine with information from Diary’s tab to focus on providing users an overview of their daily food intake and a breakdown of macronutrients.
Progress
The existing progress page shows the users’ weight loss progress with very little information on other nutrient consumptions that can provide insights to help users to reach their goal.
Discovery
I removed the blog feed from the Home tab and dedicated a place that allows users to discover new blog content, recipes, and work out routines that were hidden under More tab. This tab will highlight house sponsored contents, which will help fulfill important business needs.
Quick Add
The floating action button remains on the bottom navigation bar as a quick way to log data such as exercise, water consumption, and weight.
Profile
The original More tab was confusing and inefficient as it prevented users from accessing important features and critical information. Newly added Profile tab allows users to easily update personal information, goals, and settings.
03 // Design
Wireframes
I researched MyFitnessPal’s competitors and other apps with similar functionality for inspiration. I quickly sketched out potential solutions and layouts on paper before focusing on design details.
Lo-Fi Sketches
UX Suggestions & UI Redesign
Home Screen
Pain Points:
1. The primary function of the app is hidden away on a secondary screen: tracking daily food intake and macronutrient overview.
2. All users found the overall interface design to be boring and unappealing.
Progress Screen
Pain Points:
3. Lack of option to view detailed information.
5. All users found the overall interface design to be boring and unappealing.
Quick Add & Food Searching Screen
Pain Points:
4. Users found the food logging process to be inefficient
5. All users found the overall interface design to be boring and unappealing.
Discovery Screen
Pain Points:
2. Discoverability issue with new and relevant features within the app
5. All users found the overall interface design to be boring and unappealing.
04 // Final Mockup Screens
Reflection // Opportunities
This type of solo project provides the perfect opportunity for UX/UI designers like me to hone my design skills and to experience the challenges associated with redesigning projects. Even a single design decision is seldom as simple as they appear to be on the surface.
Despite the short timeframe for this project, I was able to glean enough information from talking to users and to understand their basic needs and frustrations for the redesign. I learned to interpret the user and business goals and to incorporate them throughout my design process. I’m especially proud of the restructuring of the bottom navigation and IA and the Discovery screen, which helps prioritize the accessibility of important information and features.
My next steps for the project would include turning the wireframes into a functioning prototype and conduct usability testing to measure the effectiveness of the redesign and its impact on the user experience.
Thanks for your time - Have a great day!
