Jason Wong
Product Designer

MyFitnessPal

A design challenge to expand past counting calories

Background

I did this project as part of a Product Design interview for Under Armour - MyFitnessPal. My intention in publishing this piece is to demonstrate my process. 

Timeframe: 1 week

Tools: Figma, Principle


The Context

Overview:

For over 15 years, MyFitnessPal has been making users better through nutrition. With one of the largest food databases, our users can track everything from their daily water intake to sodium, and have collectively lost over 200 million pounds. 

The Problem:

But living a healthy lifestyle is not just about losing weight. Increasingly, members are demanding more ways to stay healthier beyond counting calories. 

The User:

Making a change in your lifestyle can be tough. After they sign up, many new users are intimidated and overwhelmed by how much they believe they need to do to look and feel the way they want to.

Common goals: Improving diet and being more active.

The Task:

Design an experience that helps new users reach their health and fitness goals without counting calories.

Solution


I designed the 30-Day Challenge, a feature to be added upon MyFitnessPal that empowers users to tackle the physical fitness aspect of living a healthier lifestyle. This enables users to quickly set their goals, providing a set schedule and workout breakdown – guiding them every step of the way while preventing feelings of intimidation and being overwhelmed. 

Tailored Schedule

The 30-Day Challenge gives an overview of the workouts by the day, guiding users from a high-level towards their fitness goals.

Workout Breakdown

The breakdown satisfies the user goal of peace-of-mind heading into the workout, providing options to switch out exercises. Just the right amount of customization. 

Visual Learning

The workout format is based on user insight, that learning new fitness exercises are visual-based. Giving user's feedback with tips that they are on the right path.

My Approach

I approached this task in five steps:

1. Understanding Context - Problem and Goal, Context, Assumptions

2. Understanding Users - User interviews, Persona, Story, Story Board

3. Ideation & Brainstorming - Heuristic and Competitive Eval, User Flow, Sketches

4. Design - Wireframes, Interactions, Prototype, User Feedback

5. Next Steps/Final Considerations 

Process
Under Armour - MyFitnessPal

The Problem and Goal

The journey to living a healthy lifestyle can be quite fulfilling, yet so overwhelming. With an abundance of diets, exercises, and fads that fluctuate frequently – members need a way to stay healthier, beyond counting calories. 

The goal is to design an experience that takes away intimidation and the feeling of being overwhelmed so users can focus on physical health. 

Context

I decided to design for a native iOS app, having it integrated into the current MFP platform due to:

  • The Allina Health study that states that the majority of mobile users download 0 apps per month
  • Hypothesizing that this new experience will be able to use what is currently available on MyFitnessPal, add on a new experience/feature, and integrate within other Under Armour apps.

Assumptions

Assume that users that would use a mobile fitness app are technologically savvy and familiar with existing patterns around wellness/fitness apps. 
  • Conduct a competitive analysis of familiar fitness apps.
Assume that members primarily “google search” fitness plans or workouts.
  • The design should be quick, and easy to navigate. 
Assume that a user that sets big goals wants guidance on how to achieve it
  • The design should provide tips and guidance.
Assume that a business goal is retention and increase of user activity 
  • The design should make it rewarding for users to come back and continually use the app again.

Under Armour - MyFitnessPal

User Research

I interviewed 6 users I knew that had fitness goals, have used/use MFP, and wanted to live a healthier lifestyle.

My assumptions helped guide my questions. Such as:

Can you walk me through your process of when finding and implementing a workout into your routine? 

How do you keep motivated towards your fitness goals?


Through the interview process, I was able to find trends from user insights to help shape a User Persona, User Stories, and a Story Board.

Under Armour - MyFitnessPal
Under Armour - MyFitnessPal
Under Armour - MyFitnessPal
Under Armour - MyFitnessPal
Under Armour - MyFitnessPal
Under Armour - MyFitnessPal

Jessica's Story Board

Illustrating Jessica’s story helped me empathize and map out interactions in the experience as well as assist in establishing the user flow.

Under Armour - MyFitnessPal

Heuristic Evaluation

Taking a look at MyFitnessPal, Under Armour, MapMyFitness, MapMyWalk, MapMyRide, MapMyRun, and Endomondo gave me an inventory of current capabilities the Under Armour umbrella has/does not have.

Competitive Analysis

I did a quick competitive analysis of current fitness apps. This gave me a mental note of existing mobile patterns, strengths and weaknesses to begin brainstorming designs for users like Jessica.

Requirements

Based on Jessica’s goals and needs, this app should be:

  • A Visual Step-by-step
  • Show progress within a workout
  • Must be able to choose focuses
  • Log her progress towards goals 

User Flow (Onboarding)

The Onboarding flow was designed to map out how Jessica would list her goals and the app would customize a plan for her.

  1. User opens MyFitnessPal
  2. Selects 30 Day Challenge
  3. Selects areas of focus
    1. Workout frequency
    2. Fitness goals
    3. Workout intensity

User Flow (Workout)

The Workout flow was designed to map out how Jessica would be visually guided through the workout, based on her focuses.

  1. Jessica opens MyFitnessPal
  2. Selects 30 Day Challenge
  3. Selects the daily workout
  4. Analyzes the workout breakdown
  5. Starts workout
  6. Finish workout
  7. Logs workout as completed 

Brainstorming

Brainstorming initial concepts that would reflect Jessica’s goals, as well as overall requirements that would lead me into initial wireframing.

Under Armour - MyFitnessPal

Initial Wireframing

Under Armour - MyFitnessPal
Under Armour - MyFitnessPal

Concept Testing

I conducted concept tests with users to analyze and base my decision on user feedback.

Moving forward I would converge different positive aspects of the concepts to align with the feedback given.

Under Armour - MyFitnessPal

These concepts received positive feedback by users, therefore would make it into a round of mid-fidelity.

Final Wireframes

I created a quick prototype in Figma with the mid-fidelity wireframes and tested with users. Based off of user insight that the visual aspect was key – I iterated with a focus of visual fidelity and details. Interactions made within Principle. 

Under Armour - MyFitnessPal

Workout Dashboard

The top navigation includes:

  • Filters - to adjust Jessica’s settings that were set in onboarding
  • 30 Day Dashboard - To allow Jessica to see the progress they have made so far, dots under the day to give the user an indicator that they will have a workout on those days, and rest on others
  • Day Previews - Where Jessica is able to click into the day’s workout

This home screen satisfies Jessica’s goal of being guided from a high level to work towards her fitness goals.

Under Armour - MyFitnessPal

Workout Breakdown

The workout breakdown includes:

  • To-do list - Allows Jessica a deeper level of understanding on the workout at hand.
  • Options - Upon clicking the options next to each exercise, Jessica is able to substitute different exercises she prefers to do - that is targeting the same body parts.

This workout breakdown satisfies Jessica’s goal of peace of mind heading into a workout that she is doing the right exercises towards her fitness goals.

Under Armour - MyFitnessPal

UI Design

The Exercise Guide includes:

  • Exercise Info - To allow Jessica to know which exercise she is on, how many are left, how long to do the exercise, and most importantly – how to do the exercise with the video playing.
  • Exercise Tips - To give additional guidance during the workout. Pairing this with the exercise video playing gives users the confidence to perform this exercise.

This Exercise Guide satisfies Jessica’s goal of being guided from a macro level to finish the workout and have confidence in knowing what to do.

Under Armour - MyFitnessPal

Completed Workout

The Completed Workout view includes:

  • Daily status - Confirmation that Jessica has accomplished today's workout to treat this challenge like a game.

This view satisfies Jessica’s goal of knowing her progress in her fitness goals. She understands that change in her body will take time, day by day.

Under Armour - MyFitnessPal

Next Steps

Continue usability testing

  • Keeping in mind my goal: Design an experience that helps new users (that are often overwhelmed and intimidated) reach their health and fitness goals without counting calories.
  • Expanding on how the 30-day challenge can span past fitness, and into diet challenges 


Edge cases

  • Designing for physical disabilities


Flush out particular features

  • Filters
  • Replacing exercises in workout breakdown
  • Stretches & winding down?

Considerations

Collaborate with the team how we could integrate the “30 Day Challenge” into other UA apps

  • Integrate Jessica’s progress into MapMyFitness (?)
  • How would we encourage Jessica to use other apps (?)

Final Thoughts

I was surprised that users I interviewed didn’t want much customization in their workout. Their overall goals were: Show me how to do it, tell me what I need to do, and make it fun.

Do fitness apps design for a change in mentality? When users like Jessica get more advanced? I’d definitely do more research on that. 

My scope for this design assignment was to design for the existing mindset of a beginner hopping into the crazy, intricate world of fitness.