MyFitnessPal

App Case Study & Redesign
Dec 2023 - March 2024
Deliverables: App Prototype
Individual Project
Project Overview
The MyFitnessPal UX Remake project aims to revamp the popular fitness app by simplifying its user interface, enhancing personalization, and reducing ad intrusiveness. It introduces new features like an AI fitness coach and socialization tools, while addressing current user concerns like reintroducing a barcode scanner.

This will make the app more intuitive, user-friendly, and tailored to individual needs, significantly boosting user engagement and satisfaction. The impact of these improvements will not only enhance the user experience but also strengthen MyFitnessPal’s position in the competitive fitness app market..
My Contributions
Designer / Researcher
- Researched user pain points and analyzed the market
- Individually created wireframes and prototypes
- Conducted user tests to see how the product preforms
The Problem
MyFitnessPal, a leading fitness and nutrition tracking app with over 100 million downloads, struggles with an outdated, complex interface that makes its key features like nutrition and fitness tracking hard to use and underutilized. Main functionalities, including barcode scanning, are not user-friendly or intuitive, hindering quick, efficient access. The app's limited customization and underuse of technologies like AI, along with minimal social and motivational features, fail to fully engage users. Additionally, its inability to remember user preferences and frequent, intrusive ads further diminish user satisfaction and engagement.

The Solution
The redesign aims to modernize its interface, making it more intuitive and focused on key features like Calorie/Diet Tracking and Exercise Tracking. Simplifying the dashboard and integrating AI for personalized experiences, the app will offer customized meal and workout plans, better memory functions, and more social features like streaks and badges to boost community feel and user satisfaction. A balanced approach to ads will enhance user experience without affecting monetization. These improvements are set to make MyFitnessPal more user-friendly, feature-rich, and competitive, aiming to improve users' fitness outcomes and habits.

Prototype link: https://www.figma.com/proto/uTLR0hEqiO6OUn7rRCgNns/myfitnesspal-wireframe?page-id=0%3A1&type=design&node-id=13-22&viewport=461%2C175%2C0.18&t=g2rKzG4jPCrCPsRj-1&scaling=min-zoom&starting-point-node-id=13%3A22&mode=design
Below are some of the processes we went through, including creating storyboards, flowcharts, drafts, wireframes, and paper prototypes.
Project Brief
The current parking system NJIT has. As seen in the picture, it is really simple, only showing three information: the location, available spots, and total spots. But the availability is always incorrect, as seen in the picture, where there are negative spots.
Secondary Research
Problem scenario created for the persona Sarah. Sarah is a junior with a 40 minute commute daily. Her needs are to find spots efficiently, safe, and close to campus so she could get to classes on time. Her frustration is that she often have to go to multiple parking decks before she can find parking, or even resort to street parking. Which puts her car at risk, and makes her late to classes.
Primary Reseach
Activity scenario for Sarah. After implementing our solution, Sarah would be able to check for availability parking before she gets to the desks, ensuring efficiency, since she doesn't have to drive around the desks searching for spots anymore. She sees that there are spots available in the app, and she also sees lights indicating availability in the decks. She is able to find parking quickly and get to class on time.
Personas
Flowchart for the app, walking through the steps from logging in to finding spots and purchasing a pass. My teammate in management and computer mainly worked on this part, but I also helped and contributed.  
Journey Map & App User Flow
These are paper prototypes for the app based on the flowchart. Our team created a paper for each screen the users would need in the app, and drew basic functions and interfaces for the screens. Our team then found 5 people around the school, with 3 commuters, 1 dormer with a car on campus, and a professor. We took notes on their actions, and improved the flow.
Wireframing
After finishing testing for the paper prototype, I created the high fidelity prototype in Figma. Keeping in mind the problems the users have and improved them. Then we invited 5 different people to help us test and evaluate. Finally, I made final adjustments and improvements based on the feedbacks.
User Testing
After finishing testing for the paper prototype, I created the high fidelity prototype in Figma. Keeping in mind the problems the users have and improved them. Then we invited 5 different people to help us test and evaluate. Finally, I made final adjustments and improvements based on the feedbacks.
Final Prototype
After finishing testing for the paper prototype, I created the high fidelity prototype in Figma. Keeping in mind the problems the users have and improved them. Then we invited 5 different people to help us test and evaluate. Finally, I made final adjustments and improvements based on the feedbacks.
Wireframing