UX Case Study | When MapMyFitness decides to enter the Home Workout market
How my team and I designed the concept of MapMyFitness first home workout platform in a 2-week design sprint.
Overview
This website design was developed in a 2-week design sprint as part of the User Experience Immersive course by General Assembly.
The main goal of this assignment was to explore the design process of creating the concept of the very first home workout platform for MapMyFitness, one of the fitness-related apps owned by Under Armour.
The following case study will take you through each step of my design process following the double diamond method: Discover, Define, Develop and Deliver.
The Brief
In light of the COVID-19 situation and the possibility of a second lockdown, the home fitness sector was undergoing a boom. MapMyFitness (MMF) has found an opportunity in this and would like to enable their users to take part in remote home workout videos. Connecting with their friends to encourage one another whilst enjoying a social experience during isolation.
Key Deliverables:
- Users should choose from a range of workouts;
- Users should see both the video and the people they’re working out with;
- Users should customize and control the experience (i.e change view/mute);
- MMF current assumption is that desktop would be best for this, as an app screen would be too small to see both the workout and their friends;
- Website should be responsive.
The Design Team
To start off on the right foot, we filled this Project Canvas in and it gave us a broader understanding of the project as a whole and what she should be focusing on over the next two weeks.
Discover
Competitive Analysis
What were Under Armour’s main competitors doing to stand out in the home workout segment?
To find answers, we researched nine competitors, grouped the data and ended up narrowing it down to the closest six ones. Here is what we found:
It became clear to us that we would incorporate in our design some of these highlighted features, and test their usability with users.
Screener Survey
Another question we asked ourselves.. How do people feel about working out from home? Do they like it? Or hate it? Are they open to this idea?
To find answers, we created a survey on Google Forms with 8 simple questions and sent it to a broad group of people in our social network.
A total of 36 people took our survey and these were the main findings:
Unsurprisingly the majority of them have used fitness apps before, as well as attended an exercise class (thanks to COVID). Interestingly though, most were unlikely to pay for this service and would prefer to do it alone. This supports our suggestion to Under Armour to establish an Ad Revenue business model.
User Interview
To investigate it further, our team conducted 16 interviews, having a good gender balance and within a broad age range varying from 24 to 60 years old.
Using Miro we grouped our insights from each interview and colour-coded them as a way to identify users.
Affinity Map
To spot trends and find patterns we created an Affinity Map, a great design tool to compile findings from multiple interviews.
My suggestion to my teammates was to create categories based on the interview questions and group insights related to them. We did it and next we summed up the overall insights per category.
We narrowed it down to a handful of key insights:
The biggest surprise was that most of the users we interviewed preferred to exercise with others, either a buddy or a group of people. Also, most preferred outdoor rather than indoor exercise.
This presented a challenge for our home workout platform as it would have to be engaging enough to keep people working out from home even if COVID-19 would not be a concern anymore.
The initial business assumption that users would prefer desktop as their favorite device was confirmed by our user research.
Persona
Based on research, we created two Personas: Darren and Susan. Darren aimed to cover the younger population that would use the website and Susan the growing aging population that are increasingly more aware of their mental and physical health.
Darren had been feeling more stressed since the beginning of lockdown and
attributed it, at least in part, to his lack of exercise and social interaction. He wanted to start working out again from the comfort of his own home and with his friends.
Susan had recently moved from London to the Cotswolds. She had lots of free time on her hands and lives alone. She missed doing exercise classes in person with her friends and was looking for an online alternative that is user-friendly and safe to do.
Problem Statement
“Darren needs a way to reduce stress and connect with others because he has been isolated at home due to lockdown.”
“Susan needs company and supervision when exercising from home because she has been feeling alone and afraid of getting injured.”
It is worth it mentioning that we focused our design on Darren as our main persona. Therefore in some of the next UX steps you might notice that we are only mentioning him. Nevertheless, Susan is benefiting from the overall design as well.
Experience Map
Next up our group sketched an Experience Map, which charted user needs, wants, expectations and explored their overall experience for a particular scenario.
The map below describes Darren’s experience after finishing a long day at work and trying to work out via Youtube videos:
Design Studio
After clearly understanding and empathizing with Darren’s disappointments and frustrations, we started brainstorming possible solutions making use of “How might we” tool:
- How might we retain the social element of working out within a virtual class environment?
- How might we encourage and motivate users to push themselves?
- How might we ensure our users are well educated about the exercises?
Reflecting on these HMWs, we did a Design Studio, a great ideation tool to give us a clue on the features we could have on our website to provide possible solutions.
Our group dot voted ideas and did a feature prioritization, choosing as a result these highlighted ones above, from which two were my suggestions:
- To have an “activity feed” where Darren can see what his friends were doing on the platform;
- To provide quick tutorial videos showing Susan how to do exercises maintaining a good form and avoiding injuries.
Develop
Sitemap
Since user research confirmed the assumption that users prefer using their laptop when working out, a Sitemap was needed to present the hierarchical structure of the website and the relationship between its pages.
I was responsible for doing this in our group and my first task was to look at the current MapMyFitness website, to understand what they already had and what we would need to incorporate.
User Flow
So the design you will see soon aimed to help Darren, cause he just had a long day at work and was looking forward to exercising with his friends through a live workout.
His workout was already booked on the platform and this is the flow we designed for him to follow and complete it:
Paper Prototype
These were some of the first screens sketched out on paper. It was important to do this so that our team would visualise what the experience would look like, before stating to digitise.
Testing Insights
We tested the paper prototype with eight users. On the image below you can see our user insights laid out on a Miro board.
Our main iteration based on user feedback was the inclusion of “Scheduled Workout” on the homepage that allowed for the exclusion of the second screen, shortening the user flow. Also we realized that the last Exit screen would not be needed because the user would simply close the browser.
Deliver
Mid-Fidelity Wireframes
Subsequently we used Figma for the first time to create digital wireframes and start making improvements from there, based on user testing.
We chose to work with Figma this time because Sketch does not allow live group collaboration as part of their standard subscription. Nevertheless, we were happy to get to learn a different design tool.
Testing and Iterations
We tested the above screens and others with twelve users and these were the main things they gave us input on:
High-Fidelity Wireframes
Please check below some of our iterated high fidelity wireframes for the MapMyFitness Home Workout platform:
Our main color palette was inspired by some of the competitors such as Sworkit, Peloton and Apple +.
Final Prototype
The moment everyone was waiting for… the final prototype! :)
Using Figma, we created this prototype by linking the final iterated wireframes to provide Darren and Susan with the best possible experience centered on their needs and pain points, as well as satisfying Under Armour business needs:
If you prefer checking each screen at your own pace, please check them out here.
Next Steps
Moving forward, it would be important to:
- Create onboarding screens;
- Add accessibility icons for workouts;
- Do more user testing.
- Create Tablet and Mobile wireframes and test responsiveness.
Thanks for reading!
If you would like to check other UX design projects or get in touch, please visit my portfolio by clicking here. See you there!
