A design challenge to expand past counting calories
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
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.
But living a healthy lifestyle is not just about losing weight. Increasingly, members are demanding more ways to stay healthier beyond counting calories.
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.
Design an experience that helps new users reach their health and fitness goals without counting calories.
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.
The 30-Day Challenge gives an overview of the workouts by the day, guiding users from a high-level towards their fitness goals.
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.
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.
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
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.
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.
AssumptionsAssume 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.
- The design should be quick, and easy to navigate.
- The design should provide tips and guidance.
- The design should make it rewarding for users to come back and continually use the app again.
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.
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.
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.
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.
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.
- User opens MyFitnessPal
- Selects 30 Day Challenge
- Selects areas of focus
- Workout frequency
- Fitness goals
- 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.
- Jessica opens MyFitnessPal
- Selects 30 Day Challenge
- Selects the daily workout
- Analyzes the workout breakdown
- Starts workout
- Finish workout
- Logs workout as completed
Brainstorming initial concepts that would reflect Jessica’s goals, as well as overall requirements that would lead me into initial wireframing.
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.
These concepts received positive feedback by users, therefore would make it into a round of mid-fidelity.
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.
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.
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.
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.
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.
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
- Designing for physical disabilities
Flush out particular features
- Replacing exercises in workout breakdown
- Stretches & winding down?
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 (?)
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.