JETSWEAT
STARTUP
OVERVIEW
JETSWEAT is an online fitness platform that works with hand-picked boutique fitness studios to bring you a personalized fitness experience wherever you are. I worked closely with the CEO, Operations Associate, and engineering team to create an immersive two-way live digital fitness class experience.
Problem
Online fitness classes have become extremely popular over the years, especially following COVID when they were the closest thing to the gym many people could get. Although online classes are still a great alternative for those who can't make it to the gym, they never really feel the same as in person classes where you have people beside you to keep you motivated.
What are online classes like?
To understand how instructors and attendees feel about the current experience, I audited multiple live online class demos. I found that:
Attendees feel less motivated when they're participating in a class alone.
Attendees can get confused on how to do particular exercises when they're on their own.
Instructors want to be able to interact with and give feedback to attendees throughout class.
2-Way Live Class Streaming
2-Way Live Class Streaming Interface
Grid View
Allows both the instructor and attendees to see everyone in the class, so instructors can give feedback and attendees feel less like they are working out in a void and more like they’re part of a community.
To maximize each person's video size, I created base grids for different number ranges of attendees so that the videos occupied the screen most efficiently, and I developed a system for how screens would be aligned when new attendees are added within each range.
Grid Ranges
Grid Responsiveness
Toggle
To make it easier for instructors to see everyone (even in large classes), I created a toggle feature, where the interface automatically switches between the first screen of attendees and additional screens in 2 minute intervals. This allows the instructor to see everyone throughout the duration of the class without needing to manually switch between screens.
We arrived at 2 minutes as our interval time based on usability testing with Abbey from the JETSWEAT team, where we found that this was an ideal amount of time for instructors to properly give feedback to 20 members on a screen before moving onto the next set of members.
Toggle
Pinned Video
To emulate the real life experience of an instructor pointing out specific people to showcase as an example of proper form, I added a pinned video feature. Instructors can pin a video to highlight a person, but attendees have the option of unpinning the video and returning to the instructor view if they just want to focus on them.
Pinned Video Flow
Error Messages
With online classes, there's always the possibility of technical difficulties. Some issues I encountered during demos were lost network connection, only one instructor being allowed to log in at a time per class, and duplicate logins from a single account not being permitted. I worked with Hang, one of the software engineers at JETSWEAT, to design and implement error message flows for each of these scenarios. These flows not only notify users of errors, but provide calls to action for them to easily solve the issue.
Error Messages
Mobile Refinements
In addition to the 2-Way Live Class Streaming work, I worked on some updates to make the website more responsive to mobile devices. During my audit of the current class experience, I found many technical issues (such as phone camera and mic permissions preventing people from joining classes) and UI issues (spacing, alignment, sizing).
Old Mobile Views
I collaborated with Azim, one of the software engineering interns, to rework the flow of the live class experience to allow attendees to classes whether or not they allowed camera and mic permissions and to better adapt the website to mobile screens.
Mobile Refinements
Thank you to Alexandra Dantzig, JETSWEAT's CEO, for giving me the opportunity to work with the team! Working with people from all different backgrounds — from design to engineering to marketing — taught me so much about all the things it takes to transform an idea into a shipped product. It was amazing to see how everyone brought a unique perspective to the product and to be able to see it evolve over the course of a few months.