SUMMARY

In a rush? Here’s the TLDR

WHAT WAS CREATED?
An end-to-end mobile fitness application


MY ROLE
UX Designer and Researcher


TEAM
Solo project


DURATION
4 weeks

THE BACKGROUND

The goal of this project was to design an end-to-end mobile application for people to stream workout videos, work out virtually with others, and connect with an online fitness community. The idea stemmed from a need for better guided at-home fitness when gyms and studio classes became inaccessible during the pandemic. I wanted to improve problems that I saw in other at-home workout platforms, and also offer a way for people to find an online community within fitness, one of many things that had to transition remotely.

THE PROBLEM

There is an abundant amount of workout content available online. However, it can be hard to understand options and find the right video. Additionally, despite the convenience of at-home fitness, I noticed that many of those who worked out at home missed the social connection of working out with others at the studio or gym (many of my friends even scheduled Zoom calls to work out together during the pandemic). 

THE SOLUTION

The app would offer abundant workout options. To ensure that users would easily find what they are looking for, they could filter, search, and browse through a library of workouts that are tagged by relevant filters/categories. Additionally, there would be multiple ways to connect to the community using the app, through social updates, virtual group workouts, and more.

RESEARCH

A common need in at-home fitness

Research allowed me to uncover and understand the common attitudes, pain points, and needs surrounding at-home fitness and the current platforms available. User interviews, user surveys, and secondary analysis helped validate assumptions, uncover additional insights, and assess the existing market/competitors.

FINDINGS

Virtual fitness is here to stay.

55.6% of survey respondents prefer working out at home. Most of them plan to continue working out at home after the pandemic.

People want to be a part of a virtual fitness community.

77.8% of survey respondents are interested in inviting friends to join their virtual workouts, and interview participants expressed interest in joining other viewers virtually for workout classes.

Additional insights from research:

📱 Common fitness applications include the Nike training app, Under Armour App, Down Dog, and Apple Watch. The most commonly used platform for virtual workout content is YouTube; however, participants expressed difficulty in finding the right videos for their needs via YouTube.

💰 Participants are reluctant to pay for fitness applications, given the number of free options available.

😕 Frustrations with existing workout videos: too many options/choices, background music is unpleasant, absence of live instruction, absence of workout companies, lack of workout descriptions on videos.

USER PERSONAS

Catered to every fitness level

When it comes to something as personal as fitness, there’s no one-size-fits-all approach. Meet Joey and Rachel. They are two potential users with different needs and expectations relating to at-home fitness, and their stories were informed by my user research.

INTERACTION DESIGN

Find the right workout, plan your schedule, and create workout rooms

I created three task flows and a user flow to capture the interaction design of the application. I focused on the three main tasks that I wanted users to accomplish.

 INTERACTION DESIGN

Connecting the mockups

 

 

DESIGN

Mid-fidelity prototype

 

 FEATURES

✓ Find your workout via browse, search, sort, or filter

✓ View detailed descriptions and tags for each workout video, including equipment needs, level, workout type, and exercises covered

✓ Add a live or on-demand workout to your calendar or save to favorites

✓ Share a workout session with a friend

✓ Work out virtually with others during scheduled sessions; invite friends to enter a private workout room

✓ Share and see others’ workout activity

 TESTING

What did users say?

I conducted usability testing to validate assumptions, assess the ease of navigation, and find opportunities for improvement.

Specifically, I wanted to test the following:

  • Can participants complete the three main tasks and navigate the app easily?

  • Does the app satisfied their needs in terms of achieving fitness goals and connecting with an online community?

  • What are some pain points and opportunities for improvement?

12 participants // 3 in-person moderated; 9 self-guided remote via Maze // Participants have varying levels of experience with fitness and fitness applications

VISUAL DEVELOPMENT & BRAND

Fitness that feels approachable for everyone

When developing the visual direction of the application, it was important to make the brand look and feel approachable for everyone - regardless of fitness experience, age, or gender.

It felt right to choose bright accent colors against a dark blue slate color, to ensure a gender-neutral design that would engage but not intimidate users.

THE FINAL DESIGN

Take a look!

 

Explore, browse, search, filter and sort

One common frustration identified during research was an inability to find the right workout video. User interviews revealed that that online platforms often didn’t have enough videos, didn’t have the proper filtering options to find workout videos, or had videos that were poorly tagged or labeled with information and thus made it difficult to quickly understand the contents of the video.

To solve for this, the app offers multiple ways to find workout videos. Users can explore via a “For You” page, browse workouts by category, browse a live schedule, or use the search. Extensive filtering options can be applied at any point.

 

Abundant, easy-to-understand options

Users reported having trouble finding the right videos through apps that they were currently using.

To solve for this, the app offers a variety of live or on-demand workout videos, with videos ranging in length, equipment usage, and workout type. Each workout comes with detailed descriptions, allowing users to easily understand the video contents without having to play it.

Easily skip to a section or exercise

During testing, users enjoyed having a breakdown of the workout on the Workout Details page. However, they also wanted to be able to easily skip to sections of the workout within the video itself.

To solve for this, the app allows users to view and quickly skip to different parts of the workout using the video progress bar.

Schedule workouts and invite friends to join

Allowing users to schedule workouts serves two main purposes: users can plan their fitness ahead of time, and they can also invite other users to join their workout session.

During user testing, users expressed a desire to see confirmation that they had scheduled a workout or invited a friend. This was incorporated into the final design.

Stay connected to a fitness community

Users can view and comment on others’ fitness activity, providing a virtual fitness community to connect to, something that is often missing for those working out at home.

Create private workout rooms

During early research, one of the main aspects of in-person fitness that people missed was the ability to work out with others.

To solve for this, the app allows users to join private or public workout rooms. This would essentially stream the workout within a smaller video chat, creating a session that would mimic the experience of working out with others.

Here’s the full UI Kit

 

PROJECT REFLECTIONS

Play Fitness was my first end-to-end mobile application project. Although I focused most heavily on designing and testing a few main features, there were also many other considerations to be made when designing an end-to-end app. For example, what was the best way to arrange the information architecture, given that there were often multiple sections within a given tab, and certain screens needed to be accessible from various points in multiple flows? 

I found that answering these questions required me to research and understand best practices, which I then evaluated against the specific use cases that I was designing for. That’s something that I anticipate will remain true as I continue designing for bigger and more complex problems.

Thanks for taking a look! Check out the final prototype.

Next
Next

Feature // Google Maps