Designing a virtual studio for fitness coaches amidst COVID ’19

About the Project

What is Moxie?
Moxie is a fitness platform where independent coaches can host classes for their clients live online, in-person, and save the workouts in the library as on-demand videos

From creating tools to promote classes in a dedicated marketplace, to creating solutions for managing clients and handling payments, to designing a fitness-focused virtual studio, Moxie emerged as the first all-in-one platform for online fitness amidst the pandemic for the coaches who have discontinued physical gyms due to lockdown. Most of the coaches who were let go from gyms opted for independent coaching over Instagram, YouTube, or Zoom calls. But each had its pros and cons, and none provided client management solutions either.

The task at hand
When we founded the company, I was assigned to design the virtual studio for the Moxie platform.



One of the essential aspects of the existence of Moxie as a platform was to have a fitness-focused live virtual studio for the coaches as other platforms while familiar to use, weren’t fit for coaching.


Research

Understanding The Existing Experience
Before we get to designing the virtual studio, we wanted to gather some insights on the platforms the coaches were using to train their clients.

After many user interviews, we found two major patterns for the preferred way of coaching.

2-way coaching vs. 1-way coaching comparison

While the 1-way coaching provided higher quality content for the audience, we wanted to focus on how the virtual experience of live classes — specifically where a coach can interact with their clients (like in a gym) would look like.

User journey of an online coach teaching their clients via the zoom platform


Analysis

Defining The Specifications
With understanding the 2 patterns and further user research on the wants and needs of the coaches, we received quite a bit of feedback on how we can enhance the existing experience.

The product feature set of Moxie Studios

The final feature set for the virtual studio apart from the essential ones are as follows:

Welcome Screen

  • Can set up their camera and audio
  • Join whenever they are ready and feel confident

Different Views for the Studio

  • Warm Up View: Kind of waiting room before class is started, clients can generally see each other and interact
  • Studio View: Accessible when class starts, clients may or may not see each other, and are focused on the coach
  • Grid View: Can view all the clients at once, checking up on them at a glance. Only coaches can access this
  • Cool Down View: After the class has ended, the coach can chat with clients, and take a post-workout class photo

More Control for Coaches

  • Can control microphone access of their clients
  • Can choose to record their class and save it as a recording
  • Can control whether their clients can see each other during the class
  • Can pin important messages in the chat
  • Can kick a client from class for misbehaviour

Class Photo

  • A photo taken from the live class by the coach after the class has ended
  • Designed as a token which you can remember the class by, and share with your friends on social media

Moxie Music

  • A selection of fully licensed music titles which the coaches can play during the class
  • Can choose from different genres and beats per minute


UI Mockups

Welcome Screen
When a coach or client joins a class, they are greeted with the welcome screen

Warm-Up Room
Warm-Up Room is where the coach can join the class, and meet & greet with their clients

In-Studio Chat
A very essential functionality for coaches where they can communicate the announcements or chat with their clients

Attendee List
The attendee list not only works as a checklist of client attendance but also lets the coach know how many classes a client has attended

Studio View
The studio view for coaches, so they can focus on and guide their clients personally

Moxie Music
The coaches can take their classes to next level with Moxie Music — choose from 6 different stations which would play personally curated top hits

Grid View
If coaches want to look over all their clients at a glance, the Grid View is a very nifty option for them

Cool Down Room
When the class is ended by the coach, everyone is redirected to cool down room where they can have a chat and take a class photo

Class Photo
Coaches can take a post-workout selfie along with their clients that could be shared over social media


Visualization

Initial Layouts

Colour Spectrum

Typography

Button Variations


That's all, Folks!

If you'd want to look at my other articles, you can check them out here. Thank you for your time. :)

Prashant Matta

Prashant Matta

A curious person by nature who questions & analyzes everything around me and strives on learning more about myself every day. Currently designing experiences @PLGWorks