I conceptually designed this solution for Under Armour as part of the UX Design Immersive Course by General Assembly.
My Role: UX/UI Designer
The Team: fully remote team of 4 UX/UI Designers based in the UK and Qatar.
Duration: 2-week sprint
Tools: Figma, Miro, G Suite (Drive, Slides, Forms), Slack, Zoom.
Problem
In light of the Covid-19 situation and the possibility of a second lockdown, the home fitness sector was undergoing a boom.
MapMyFitness has found an opportunity in this and would like to enable their users to take part in remote home workout videos. Connecting them to exercise with their friends and encourage one another while in isolation.
Challenge
Time constraints
Zero budget for user research
Lack of interaction with the business to do checkpoints regarding our design
Deliverables
Users should choose from a range of workouts
Users should see both the video and the people they would be working out with
Users should customize and control the experience (i.e change view/mute)
Their current assumption is that a laptop would be the preferred device for users (to be confirmed)
Website should be responsive
Project presentation:
Insights that led to the solution
Sketches and proof of ideation process
Proof of multiple design iterations
Key screens concepts
Design specifications:
High-level personas
User flows
Site overview diagrams
Wireframes and/or mockups
Outcomes
✓ Based on User Research, most users preferred to use their desktops while working out, so we delivered Desktop High Fidelity Mockup
✓ Created two different personas to cover a broad range of users
✓ To create human connection and a social experience, we implemented the following features:
✓ live workouts
✓ option to share feelings and music in working out page
✓ embedded social media to share activity and motivate users
A glimpse of the design process….
Collecting every possible user insight…
Everything starts with a good User Research. Here you can see our user Interview insights laid out on a Miro board, ready to be categorized and summarized on the next phase.
…and organizing these Insights!
To spot trends and find patterns we created an Affinity Map, a great design tool to compile findings from multiple interviews and it does just what its name says: group them by affinity.
Please meet Darren!
Backed by user research, Darren was born. One of our two personas, he represented users that needed a way to reduce stress and connect with others because they had been isolated at home due to lockdown.
Time to Brainstorm!
To provide Darren with a great social experience, we did a Design Studio, a great ideation tool. The goal was to brainstorm all the possible features that the website could have. We then narrowed these ideas down by dot-voting the most relevant ones.
The path Darren will take…
After prioritizing which features should be on the website, the next step was to draft the designed User Flow. Based on the scenario that “Darren just had a busy day and is about to start a Live Workout with friends on the platform”.
This user flow would be used to guide our sketch and wire-framing phase.
Screens sketched on paper.
These are 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. Thereafter we were good to start doing Usability Tests.
Test, test and more test!
To find what users were thinking about out designed screens, we did some Usability Tests using our paper prototype.
One of the users I interviewed gave us great insight about a possible feature on the home page that would simplify the user flow by removing one step. And that’s exactly what we did!
Final High-Fidelity Wireframes
Let’s fast forward lots of iterations, as well as our Low and Mid-Fidelity wireframes.
These are some of our final High Fidelity Wireframes that successfully satisfy all required deliverables from the brief.
High Fidelity Home Page
High Fidelity Workout Details Page
High Fidelity Working Out Page
Final Prototype
