Shame on me!
I haven't finished my mobile
portfolio site.
l
o
a
d
i
n
g
Project Year:
2021
Product:
SoulCycle At-Home Bike
Role:
Design Lead
Design Director
Providing SoulCycle riders with the ability to share their at-home bike activities on their social channels
The SoulCycle At-Home Bike allows users to bring their favorite in-studio classes and instructors to their living rooms in On-Demand or Live format. Allowing users to share their accomplishments required cross platform interaction— between app and bike hardware— and would ultimately create assets to serve as unpaid social media impressions.
Problem Statement
SoulCycle At-Home Bike riders are a communal group asking for and inventing ways to share their activities and accomplishments with other SoulCycle enthusiasts, but lack native features to enhance and ease this experience.
They were asking for it...
Soul Cycle At-Home Bike community members were already organically flocking to social media to share their rides and activities with other Soul Cycle At-Home Bike riders and enthusiasts.
Project goal
KPIs
Success metrics
Increase app usage in gyms
Session length per gym session
Classes taken i gym
10% increase in sessions >10min within 1 hour of check in
15% increase in classes viewed within 1 hour of check in
Improve personal health metrics
Sleep quality, stress levels, push-ups, breath holding, plank time
50% program re-enrollment
50% Increased CPW by program participants
>80% Improved metrics by program participants after 3 months
Increase engagement with classes
CPW, Engagement, Session Length
Increase app usage in gyms
What are they sharing organically?
We had been collecting social posts by SoulCycle At-Home Bike uses for months. The next step I would take would be to audit social posts and organize them into categories. We found six high-level categories of soul shares.
High-level qualitative testing
Next, I’d use the findings from UGC and lead a designer on my team to create two high-level concepts to put in front of users and see which they responded best to. We would look for usability as well as qualitative feedback to help determine which solution to move forward with. User testing consisted of 6 users that would see both experiences in different orders, to account for any bias.
Concept 1: Fully customized asset
Concept 2: Storied cards
User preference test score card
The test we ran was mainly qualitative— meant to see at a high-level how users enjoyed both experiences and gather ideas of sub-features they liked or disliked. We would balance these qualitative results with tech feasibilities and usability scores to reach a final solution for this feature.
User preference: Concept 2
The winner by a landslide was option 2. Some in testing enjoyed the high level of customizability from option 1 but all enjoyed the simplicity and straightforwardness of options provided to them, especially after exhausting themselves with a workout. Users could customize these assets on their social media platform.
Serving two user personas
For those who want to boast their accomplishments, we provided a shareable asset boasting their beat match scores and statistics. For those less competitive riders, we provided a quote from the instructor per class. The choice to launch with these two users in mind was informed by prior research and knowledge about the SoulCycle At-Home Bike users.
Flexible UI for app-wide sharing
The final design of this feature was influenced in part by other sharing requirements throughout the app. We recognized an opportunity to introduce class and achievements sharing into the Variis experience.
Highly polished unpaid social media impressions
These assets would ultimately act as ads for the SoulCycle bike. It was important that we look appealing to users for a situation when they see our imagery in sequence with a competitor’s. Developers and PMs were hesitant on feasibility, but I’d brought simple solutions on how we could configure these in build.
Designing for specification
Every step of the way, I considered how these assets could be appealing, dynamic, and feasible by the development team. My solution: a simple system of layer— some dynamic, some static— when placed on top of one another create a compelling composition reflective of SoulCycle's unique brand.
Collaboration with engineering
With some help from my engineering counterparts, we were able to come up with the perfect layer structure that would achieve the desired outcome for these assets and be most scalable and efficient for the development team. This level of partnership is something I look to bring to every cross-functional relationship.
A custom numeric typeface
SoulCycle's brand has a "do-it-yourself" look and feel. This is a key signature of theirs and separates them from others in the space. To capture that, I would create a custom typeface by building a photoshop action to destress Helvetica and vectorizing. Additionally, I partnered to create a JavaScript function that dynamically tilts the text at a random value between a -5° and 5° so that repeated numbers maintain diversity when positioned next to one another.
Sharing cross-platform
Now that we figured out the social assets and the interaction pattern on the phone. We now had to find a way to intuitively get users from the bike to the Equinox+ app to share their ride recap. This involved cross-platform and cross-team collaboration and presented us with some technical and usability challenges.
Activity sharing: The happy path
We added a share button adjacent to the ‘Done’ button so that users would need to engage in that area before finishing the class. The action overlay was a new interaction to the bike that allowed for focus without removing the user entirely from the experience.
FTUE: Feature announcement
Having users notice this feature would be crucial to its success. For this we would add a tool tip explaining the feature the first time a user would interact with it.
Maximizing engagement
We knew that this was a feature that users were clamoring for, but to make sure that they were aware of it, we provided two channels to share from— the post-class summary page (active) as well as push notification reminders from the Equinox + app (passive).
User path 1: Share now
We added a share button adjacent to the ‘Done’ button so that users would need to engage in that area before finishing the class. The action overlay was a new interaction to the bike that allowed for focus without removing the user entirely from the experience.
User path 2: Share later
We added a share button adjacent to the ‘Done’ button so that users would need to engage in that area before finishing the class. The action overlay was a new interaction to the bike that allowed for focus without removing the user entirely from the experience.
Behavior-focused messaging
We could have just as easily given the user to “Share by scanning the code” or “Share by sending a push notification to your phone”. Instead we leaned into behavioral language based on the user stories we were solving for.
Asset generation: Ideal state
Until later in the process, we had an assumption that share assets could be generated by the bike, shared to the mobile app, then shared to social media from there. The below UX flow maps out the ideal state, which shows the user a preview of their share asset before deciding to send it to their mobile device.
Asset generation: Go to market state
Instead, we’d learn that the bike would not be able to easily generate a share asset and that we’d instead have to transfer the data to the user’s mobile device for the phone to interpret into the shareable artwork.
'Generic’ imagery
Since the asset would be shared from a user’s phone, it would be much more practical and efficient to create the asset on the phone. This meant that we couldn’t preview the share asset on the post class screen on the bike. Instead, we provided a generic asset showing examples of the share assets a user could share.