MyFitnessPal

PROTOTYPE

DESIGN BRIEF

OBJECTIVE

This conceptual redesign aims to create a better social experience and a more accessible display of nutritional information for myfitnesspal mobile users.

PRODUCT

MyFitnessPal is a mobile application and website for tracking weight, nutrition and exercise.

PROBLEM

MyFitnessPal offers many great features that are hidden due to poor information architecture.

Nutritional tracking tools are hidden in the diary
The social experience is hidden within the more tab and is difficult to navigate

SOLUTION

This project aims to improve the mobile experience by bringing nutritional data visualizations to the front page and creating a separate tab for the social experience.

SCOPE

MyFitnessPal is accessible through a website or as a downloaded application. The product design varies by channel. This project aims to improve the iOS mobile application for users and focuses on the nutritional and social experiences.

TOOLS

Sketch, InVision, Illustrator

PROCESS

IDENTIFYING USERS

In order to decide what features to improve on, I researched the different types of MyFitnessPal users. I surveyed current users to find out how and why they use the application and categorized them based on their responses.

USER ARCHETYPES

I created three user archetypes to define the different types of mobile application users.

EXERCISER

The Exerciser is a user who is either looking to gain or lose weight. This user’s primary objective is to track progress and exercise.

DIETER

The Dieter is the user who’s main goal is to lose weight. This is a user who has the motivation and is willing to put in the effort to achieve their goal. This user is primarily using the application to track their progress and nutrition.

ATTEMPTER

The Attempter is the average MyFitnessPal user. This is a user who may not consistently use the application and is looking for motivation to achieve their goals.

USER PERSONAS

I created a user persona for each archetype so I could put a face to the people I am designing for. For this project, Amanda was the primary persona.

DEFINING PROBLEMS

Keeping my primary persona, Amanda, in mind; I performed an extensive tear down of the current MyFitnessPal iOS mobile application. In doing so, I distinguished three main problems and possible solutions.

DISCOVERY

Performing an extensive tear down of the existing MyFitnessPal application allowed me to determine initial problems with using the app.

NUTRITION EXPERIENCE

SOCIAL EXPERIENCE

REMOTE USABILITY TESTING

3 participants were asked to complete the following tasks related to using the application’s nutrition and social features:

View your protein consumption for today’s breakfast
Check what percentage of today’s calories was consumed during lunch
View today’s calcium intake and increase goal to %150
Update your profile by changing your profile picture
Post a progress picture to the newsfeed
View your achievements and join a new challenge

KEY FINDINGS

Participants initially struggled to edit their profile picture
Participants did not recognize the newsfeed and struggled to locate social features
Participants were unable to find their achievements and possible did not recognize or interpret the icon
Participants were unaware of key nutrition tracking features

IDENTIFYING PROBLEMS & POSSIBLE SOLUTIONS

Nutritional tracking tools are hidden in the diary

A front page featuring the most used features such as the diary and data visualizations will encourage users to track their health and nutrition regularly.

The social experience is hidden within the more tab and is difficult to navigate

A designated social tab will bring the social feed currently on the home page and the social features currently hidden in the more tab to a more centralized and easily accessible location.

INITIAL IDEAS

LO-FI WIREFRAMES

HOME

I created a homepage containing the most used nutrition features as interactive modules. On the top of the page there is a drop down menu where the user can select a date for which to view and edit information.

The calories module displays the calories remaining as well as progress towards steps and fitness goals. By swiping right users can view their daily calories broken down by meals.

The Diary module allows users to view and enter or edit their diary information. Food, Exercise, Water and Notes are included here.

The Macros module gives users a view of their daily macronutrient goals. By swiping through, users can view their Fat, Carbohydrate and Protein goals broken down by meals.

In the Nutrients module users can view all their remaining nutrient goals. This swipe-able module saves space while still giving a detailed report on nutrient goals. Clicking on a nutrient allows a user to view the daily intake broken down by meals.

SOCIAL

I created a social tab to serve as a main hub for all of the social and motivational tools and features that myfitnesspal offers.

The navigation bar contains links to messages and the user profile.

At the top of the page is a profile preview which includes a profile picture, name and information, progress and streak.

The social feed consists of myfitnesspal blog posts and user posts. Users can post pictures or status updates to the feed.

The user profile contains links to profile settings, friends, friend requests, challenges, and awards. Users can also post and view their posts from their profile.

Social features were removed from the more tab and brought into the new centralized social tab.

My Exercises was moved from the App Settings menu and brought into the main More menu.

The Apps & Devices category was combined with the Our Other Apps category.

USER TESTING

A/B TESTING

A lo-fi prototype of the current mfp application was tested against a similar lo-fi prototype of the new design.

Users were asked to complete three tasks:

1. View and export nutritional data

2. View achievements and join a challenge

3. Edit profile

KEY FINDINGS

Compared to the current design, the redesign was favored for viewing and exporting nutritional data.

Participants were able to easily find the export icons. One participant asked which information to export and “is there a way to easily export all information, or do I need to export each module individually?”
Participants immediately looked for achievements and challenges in the social tab and quickly found it in the profile.
Participants mistook the social feed for their profile.

VISUAL DESIGN

DESIGN ITERATIONS

I consolidated the export icons into one export icon in the navigation bar.

I changed the profile icon on the social feed to a profile picture in order to distinguish the profile icon from the tab bar.

I redesigned the user profile and friend profiles to create a consistent design that allows the user to view their profile as a visitor would. I changed the wording from lbs lost to Progress in order to accommodate differentiating user needs and goals.

After I had completed designing the UX components, I began to edit the User Interface. I wanted the app to have a clean but bold feel.

I rounded the content boxes and used gradients to create a more transparent feel.

FINAL PRODUCT

PROTOTYPE

The home tab provides a detailed nutritional experience that is easy to navigate.

The Today drop down menu allows users to select a date for which they would like to view nutritional information for.

The Calories page serves as the front page of the application. This page contains goal progress, calories consumed by meal, and the diary.

The Macronutrients page provides the user with an overview of macronutrients. Progress charts for carbohydrates, protein, and fat break down user consumption by meal.

Nutrients are listed on a separate page with data for daily user intake, goals and progress.

The new social tab brings the social feed, user profile, friends, messages, challenges and achievements to a central experience that is easy to access.