REDESIGNING
MYFITNESSPAL App

User Research and UX/UI Design Case Study

DESIGN THINKING PROCESS

Design Thinking Process Diagram

RESEARCH

The goal of the research was to understand user experience and the pain points for MyFitnessPal and explore the design opportunities. This was achieved through running an online survey and conducting interviews with 5 participants (age 35+) who are new to diet/exercise managing app was conducted. Then the usability testing was conducted on MyFitnessPal app. To analyze the user feedback obtained during the research process, I used affinity mapping to categorize user feedback (pain points) from my research in order to find out where the problem exists:

Affinity Diagram

DEFINE

To further understand the problem, I created the persona based on the insights I gained through my user research:

Persona

Next, I created user journey mapping to gain insight into how the user interacts with the app. I also laid out user pain points collected during the user research. This helps to narrow down the problems.

Rob's journey mapping

IDEATE

Problem

- User don't want to see the text-heavy content
- User wants to search and add food/exercise quickly
- User wants to get a quick feedback after entering data

How might we ...

"make user feels less overwhelming when he sees the content?"
"create simple and easy way for user to search and edit food/exercise data?"
"provide user a proper feedback after entering data ?"​​​​​​​

Solution

- Use less text in the content; more icons and charts.
- Add other options to search food/exercise data; voice commands and scan (photo/barcode).
- Notify user when he/she submits data.

DESIGN

HOME

Home screen now displays weight, calorie intake, and steps (iOS only) data in daily, weekly, monthly, and yearly views. User can select what they want to see on the page in "Settings". I also created "NEWS" category and moved the feed in there.

BEFORE
AFTER
uphone

VOICE SEARCH

One of the pain points is adding food in the app. Unlike workout, we eat different food every day.
So in order to make the search and add process easier, I added voice command as an option.

BEFORE
AFTER
Voice  Search  Before and After
Voice  Search  Before and After

SCAN FOOD

Image search is another way to search data easily.
In addition to voice search, I added the food scanning feature so users can search food data by image or barcode.

BEFORE
AFTER
Voice  Search  Before and After
Scan Food Before and After

DIARY

When a user enters exercise data, "Diary" screen shows up. Communicating the achievement engages user to the app.

BEFORE
AFTER
Add to Diary Before and After
Add Exercise Before and After

CONCLUSION

Data is well presented when it is displayed in graphics. By adding chart to the interface, the app looks more engaging for the users.


NEXT STEPS

- Conduct user testing with the updated UI
- Iterate and refine the design based on the test result