COMMERCIAL APP UPDATE
SPRING 2021
UX DESIGNER
Product: SoulCycle At-Home Bike app
Feature: Commercial 2.0 Update
ROle
UX Designer
TOOLS
Figma, Notion, Jira, Confluence, Zoom, Google Suite
TIMELINE
1 Month (2 sprint cycles)
METHODS
Internal design, product and technical research; iterative wireframes, prototypes, annotations, user flows, app flow
COLLABORATION
Visual designer, product managers, developers, copywriters, business planning team
OVERVIEW
When Equinox decided to expand their sales channel of the SoulCycle at-home bike to more commercial locations in early 2021, I had the opportunity to design a UX update for the 2.0 commercial version of the app to align with business priorities and better serve a trio of unique user experiences.
As a designer highly-attuned to my physical space and surroundings ("dancer/athlete brain", anyone?), I found it interesting to consider how a user’s journey with a product changes when you put the product in a different environment. In this case, I was able to re-think the experience in context with how users interact with both our app and hardware in shared commercial spaces: fitness clubs, residential properties, and hotels.
The redesign included simplified Entity Onboarding and settings management access for commercial entities purchasing the bike, and also introduced 2 new flows for the end-user riding the bike: New Rider Onboarding and a Pre-Class Settings & Connected Hardware Check, so that both new and existing members could clearly understand the steps to take for optimal setup prior to taking a class.
FEATURE HIGHLIGHTS
New rider onboarding
Helping first-time users get set up to ride quickly, before exploring the app.
Pre-class SETTINGS &
connected hardware check
Making sure returning users are optimized to ride in a commercial setting.
Pre-design research
Before jumping into the designing, it's part of my process to ask questions and review available data as early and often as possible. By staying curious, understanding the context behind known product requirements, and gaining familiarity with a feature or project, I know I'm solving for the right problem, and also mitigate risk down the road when the design moves into development.
In my preliminary research, I reviewed past designs and spoke with our product managers, engineering director, and member support teams. I also decided to visit an Equinox club location to observe possible pain points of users in their natural environment.
These 3 research initiatives helped me better understand our business needs, the major points of differentiation between the commercial and at-home app experiences and hardware, and consider how they would impact my design solutions.
MAJOR TakEAWAYS
As a fitness content platform with a connected bike, one of our primary UX goals is to get new users into a class quickly, confidently, and safely.
Speakers are disabled on commercial bikes - in a public setting, riders must connect an audio device in order to hear music and instructors during a class.
Members often don't know that wired headphones can be connected the tablet, or where to look for the headphone jack.
Unlike using the bike at home, users in a commercial setting might be more susceptible to external sensory distractions, as well as feelings of frustration, lack of confidence, or fear of looking incompetent when learning to use new equipment in public. Also, the bike is shared among a greater number of users where the settings are adjusted more frequently.
DESIGN PROCESS: 3 FLOWS
COMMERCIAL ENTITIES: ONBOARDING
In my earlier conversations with product managers and business planning team, it was immediately clear to me that the Commercial app had 2 different users: the entity purchasing and setting up the bike, and the riders using it. However, when I reviewed the designs, I could see that the 1.0 version of the Commercial app used the same Onboarding flow as the Residential (at-home) version of the app, which was tailored specifically to riders.
Setting up hardware should be simple, even if you're not the one who's going ot use it. For that reason, I focused on making sure Onboarding only included the steps necessary for a gym manager to properly set up the bike for the end-users.
Commercial Entity Onboarding, Version 1.0
Commercial Entity Onboarding, 2.0 UX update
I worked closely with our copy team in recommending language updates throughout the Onboarding flow, so that it spoke directly to our initial user, the entity-purchaser setting up the bike.
To further streamline the process, I removed the 4th step (personalized bike settings) because it did not apply to the entity-purchaser, replaced Account Sign-In with Account Verification to accommodate a related design dependency, and moved Hardware setup to the last step, because subscriptions must be confirmed as active in order to use the app.
I added essential details about the tablet and software to all Onboarding screen, to provide a clear visual reference for entities when troubleshooting errors prior to launching the app.
NEW USERS: RIDER ONBOARDING
With rider personalization steps like biometrics, bike settings, and bluetooth removed from Entity Onboarding, they needed a new place to go in the app so users would have easy access to personalize their setup before taking a class.
Create Account Flow with Personalization, Version 1.0
In the 1.0 version, these "personalization" steps were combined with required steps like credentials and legal documents within a Create Account flow for new users. It made the flow too long, and increased the amount of perceived time a user spent setting up before they could see or explore any part of the app.
New Rider Onboarding, 2.0 UX update
In the 2.0 update, personalization steps were separated out and moved into the new New Rider Onboarding flow, immediately following the Create Account flow. The transition between these 2 flows established a progression from a full-screen takeover into a sliding panel modal, taking up 20% less screen real estate.
This UI decision provided users with a cognitive visual separation between the flows, and helped immerse users in the experience more quickly by revealing a sneak-peek of app content to the left.
With speakers disabled, establishing an audio connection became the highest priority and was sequenced in the flow as Step 1.
Calling out both audio connection options with 2 CTAS makes the choices obvious to users.
Users feel immersed in the app more quickly with a sneak-peek of content behind the Onboarding flow.
Because riders didn't often know where to plug in wired headphones, I added a label and arrow into my design, placing it directly above the port for the jack.
After successfully establishing an audio connection, the "Continue" CTA flips to active yellow to indicate the user can move forward.
A progress bar indicator lights up as a user moves through each step, and the step number is reinforced on the far right to to reinforce a forward-thinking mindset and orient a user to their location at all times.
RETURNING USERS:
PRE-CLASS SETTINGS & CONNECTED HARDWARE CHECK
For returning users who would not see New Rider Onboarding after signing in, I wanted them to understand and be able to complete the 3 most important steps to optimize their ride experience on a commercial bike: the all-important audio connection; adjusting the bike to the proper settings for their height since the bike is used by many people; and making sure the power meter is connected to capture stats.
Pre-Class Check for Returning Users, 2nd Iteration
In one of my early iterations, I explored a design idea where all 3 steps lived together in a "status checklist" that appeared each time a user tapped to begin a class. Each step had a text link to the set-up flow, and when a user successfully completed the setup task, they would be returned to the checklist, where a checkmark icon would light up to confirm it was complete.
Takeaways
I realized this design flow wasn't the best solution for 3 reasons:
-
It was too cyclical, with too much for a user to do - the user has to spend time going through multiple setup loops and back to the checklist screen before they could join a class.
-
Although audio and power meter connections could both be verified as "complete" by the system and trigger the checkmark icon, this didn't really hold true for bike settings. I could verify if a user had tapped into the settings flow, but could not verify if they had actually adjusted the bike.
-
This screen was not very valuable for users who completed these steps earlier, elsewhere in the app.
Pre-Class Check for Returning Users, Final Design
Bike Settings: In the final design, bike settings was removed from pre-class and instead greeted users in a simple, dismissible toast notification immediately after signing in to the app. The toast is just a friendly suggestion, and includes a text link to settings & tutorials for easy reference. Its placement earlier in the app flow minimizes disruption before starting a class.
Audio & Power Meter: In the final design, I made the pre-class flow easier, faster, and less intrusive by implementing an invisible, system-initiated check on connected hardware when the user taps to play a class. Then, the flows for each only appear if the system verifies the hardware is not connected. Otherwise, the happy path is clear and free for a user to jump directly into a class (and they get guidance only when it's truly needed.)
NEXT STEPS
Monitor and track OKRS
Monitor Bike Sales & NPS score for the commercial experience in expanded markets (residential amenities and hotels)
Cross-functional collaboration
Provide UX and design-thinking across business, marketing, and product strategy teams
Feature Improvements
Analyze MX feedback for critical fixes and common user themes to add to the design backlog
Ongoing Commercial considerations
Explore designs as needed to optimize and enhance the commercial app, aligned with net new product requirements