Shame on me!
I haven't finished my mobile
portfolio site.
Shame on me!
I haven't finished my mobile
portfolio site.
l
o
a
d
i
n
g
Project Year:
2021
Role:
Design Lead
Design Direction
UX/UI
Transforming an on-demand fitness streaming platform to host live-formatted classes and community features.
Variis— the ultimate digital fitness collective— introduced live classes as a means to accommodate new on-boarding fitness partners with requirements for the format. What started off as a hard requirement grew into a sensation among our user base, and a more efficient and cost-effective alternative to filming and releasing seasonal on-demand content. When acquired by Equinox gyms, 500,000 users would have access to these live classes.
Opportunity area
The Variis app was designed and built with VOD content at its core. As we on-boarded new brand partners, there was an escalating need to introduce live content onto the  platform. Over the course of over two years, we would continue to build on the live video ecosystem to creating a rich experience for our users and brand partners.
Horizontal integration
Going into this work stream, it was initially assumed that the Live features would have an isolated impact within the player experience only. In order to properly scope the project, I created a feature audit of all modules in the existing app architecture and considered the points that Live classes would touch and could touch. This would help us roadmap features for the MVP launch of programs and beyond.
Time-based metadata
Without waiting to plan for user stories and sprint releases to begin, I knew a no-regret move would be to define the meta-data and discovery mechanisms for live classes at all card sizes, regardless of where they would appear in the experience. I'd focus on all states across different times that a user might experience these cards relevant to the start time of the live class.
Defining scope and roadmap
Using the feature audit from above, I worked with my product manager and the tech lead on the project to determine the 'must haves' the 'should haves' and the 'could haves' features for the first release of Variis live clases.
Release 1
Home screen swim lane
Release 1
Class detail screen
Release 1
Live class discovery
Live classes: release 1
The initial release of live classes was a bare-bones experience. We were sure to include live features into existing discovery features that were crucial for the user's navigation. This would exclude any sort of home for live-specific content. Rather, for this release, discovery relied entirely on swim lanes and content filters within existing pages and features.
Discovery and scheduling flow
In order for a user to successfully take a live class, we would need to consider that most users would discovery live classes prior to their broadcast time. We would need to build class scheduling into the go-to-market experience to allow users to log classes that they're excited to take at a later time.
Discovery, classes tab
Release 1
Discovery, classes tab
Release 2
Discovery, classes tab
Release 3
Optimizations over time
Onboarding would be the first touchpoint of data collection and personalization for an individualized curriculum. The onboarding process would ask questions about fitness goals, lifestyle habits, and end with a brief physical assessment. This flow would be necessary in lieu of more complicated ML processes like collecting wearable healthkit data or dynamically recommending activities based on history.
Crowd-sourced feature requests: Scorecards
For a user-centered feature like live classes, we would look to ensure that we were giving users an experience that they would really enjoy to help us meet our engagement goals. Shortly after the MVP release, we asked 500 users to complete a score highlighting the features they would most want to see.
Vote on music before class
Voting results
Request shoutouts by instructor
Interacting with live classes
The scorecard would influence the roadmap going forward. For example, we would give users an experience in which they would be able to interact with the coach ahead of the class and even request songs and mentions. More than anything, users enjoyed being mentioned or having an influence in the class.
Live class branding
On-demand classes use screenshot from the pre-recorded content as an identifier for the class. Live classes thumbnails are displayed before the class is filmed, therefore no such screenshot exists. For this, I set up a branded system for live content that involves a flexible background pattern and a cut out of the instructor's image. When surveyed users unanimously found the distinction distinguishable, making live content noticeable at a glance.
Live classes
Live-to-VOD: Replay
Standard on-demand
Continuing value: Live-to-VOD
When surveyed, users said that they'd like to take live classes that they enjoyed even after the broadcast was finished. This would also provide a tremendous value to the business by allowing us to recycle the already-efficient live format classes to populate our On-Demand libraries.
The live class player
Now that we've addressed the discovery mechanics of live classes, the final piece of the puzzle was to consider the class experience. The initial launch release would simply include a live tag and some modifications on the control set.
Live attendees list
A later iteration of the live class player would include a feature that users had been asking for— the ability to see and interact with other users in the same class. This would simply begin with a count of the attendees in the class at that time and would evolve into a robust feature giving users the ability to see classmate's profiles, follow classmates, and even sort and filter.
Live class sign up FTUE
Display name edge case
Access display info via settings
Live profile setup
As a new feature, and one that echoes throughout the entire experience, it was important for users to set up their profile information at a global level. The first time a user joins a live class (after the launch of the attendees list) they are asked to confirm their profile information, or add it if it's unavailable. Similarly, users could change this information or adjust their privacy settings in their settings page.
A shoehorn for Variis community
Live classes proved to be an inherently communal feature. Attendees would connect via social media to discuss live classes they'd attend together or events that transpired in those classes. When it came time to add community features to the Variis app, live classes would be the place to start. Users would set up their display names and profile information to enter live classes. This would also be the first place that social lists and following functionalities would exist.
Live class page + community
Class attendees list
User profile
Shame on me!
I haven't finished my mobile
portfolio site.