FIND YOUR instructor
FALL 2021
Product DESIGNER
Product: SoulCycle At-Home Bike app
Feature: Find Your Instructor
ROle
Product Designer
TOOLS
Figma, Principle, Miro, Qualtrics, Google Suite
TIMELINE
1 Month (2 sprint cycles)
METHODS
mid-fi concept wires, hi-fi mockups,prototype testing,
user survey, interaction animation, data organization,
stakeholder workshop
COLLABORATION
Product designers, UX research,
product managers, TPM,
FE & BE developers, testing team,
SoulCycle stakeholders
Intro & overview
It's a vibe
I'm sure you've been there. I have, too. You signed up for a new fitness studio and have taken a few classes when finally, it happens: you find an amazing instructor (or three) who makes rolling out of bed and pulling on your pre-pandemic spandex feel...worth it.
The "Find Your Instructor" feature was designed as a tool to help riders find more classes they want to take
by making it easy and fun to find an instructor they like according to "vibe", particularly in their
first 2 weeks of bike ownership.
FIND YOUR INSTRUCTOR: watch a tap-through of the shipped feature below.
There were 2 major insights I found most interesting during my process:
1. Which entry point, filtering method, and Instructor Detail changes were most valuable to users
2. How defining the full "vibe tag" set & assigning vibes to each instructor was a collaborative balancing act among producers, stakeholders, designers and research that leaned heavily on the nuances of language.
THE OPPORTUNITY
USING DATA TO SUPPORT A NEW FEATURE
Product usage data showed that bike owners who engage early and often in their journey - taking at least 7 classes in their first 14 days - are likely to stay engaged over time.
Additionally, we understood from user research that riders who stay engaged over time are already using filters to find classes they complete, and they believe that finding a class that is taught by a specific instructor is important.
61%
users who have filtered by instructor at least 1x when searching for a class
48%
users who filter by instructor every month
27%
riders who have viewed an Instructor Detail page at least 1x during ownership
We could also assume from anecdotal evidence during user interviews that riders gravitate towards classes with certain instructors based on the instructor's personality, mood, or "vibe". This is a point we validated explicitly during the early stage of the design process with our UX research team.
Taking all of this data into a consideration, helping newer users find an instructor by vibe using filters as the primary interactive tool the best path forward to drive early engagement in developing an new feature. The work also provided an opportunity to add user value to the Instructor Detail page - an area of the app that historically had lower engagement, but that provided more nuanced detail about each instructor and could help riders with less familiarity learn more about coaches on the platform.
With clear data points and an assumption to validate, my design process to arrive at final dev handoff included the following methods:
-
early UX concept exploration
-
user survey & prototype testing
-
design iterations and final UI
-
running a workshop with brand stakeholders
METHOD & PROCESS: UX & UI
CONCEPT EXPLORATION & TESTING
In thinking through early UX concepts, I explored 3 major ideas in my designs:
1. possible entry points - where and how to introduce the feature within the app
2. different filtering methods and ways of communicating results to users in a way that is clear, informative, and helps them make a decision about which instructors to try
3. how to improve the Instructor Detail page in a way that provides more value to users
1. Entry points
To stay consistent with existing design patterns in the app, the best location to introduce the feature was on our personalized "home" screen. To test different ways to introduce it to the user, we designed 2 mid-fi versions that varied in level of functionality and visual detail.
VERSION 1
Banner + CTA: In V1, the feature is introduced in a banner, with header copy, visual background art, and a single CTA.
VERSION 2
Header + vibe tags: In V2, the feature is introduced with partial feature functionality, including a few tappable vibe tag pills from the full collection.
TESTING FEEDBACK + ITERATIONS
In a preference test using 2 different prototypes tested with 6 users, most users preferred the banner version (Version 1) because it was more inviting, aesthetic, and informed them about the feature before delving into the filtering experience. For the shipped feature, the banner version was used, retaining the same UI and single-CTA functionality.
2. FILTERING: METHODS & RESULTS
In looking at the ways a user could choose and apply specific vibe tags on the Instructor Tab to filter down from a roster of 30+ instructors, we designed 2 filtering methods to test: additive and subtractive. Each method produces a different collection of results to communicate to the user.
VERSION 1
Additive Filtering: There is no limit to the number of vibe tags a user can select, and all tags are active and tappable.
Results: Results show instructors in order from those whose individual tag sets match the user-selected vibe tags the most (up to 3), down to those who match the least (only 1 tag).
In this version, the tag labels below each instructor headshot provide users with a color-coded visual indicator to help quickly compare how instructors relate to each other.
VERSION 2
Subtractive Filtering: As users tap active filters to select, any active-unselected filter that cannot be combined with the selected filter to produce a result becomes inactive and non-functional.
Results: Results only show instructors who have all selected vibes tags in their individual set. (Must match 100%!)
In even earlier explorations, we considered incorporating the task of choosing instructor vibes into a short quiz, but ultimately needed to limit the number of data points used to generate a recommendation for MVP.
TESTING FEEDBACK + ITERATIONS
In the same preference test, most participants preferred subtractive filtering because it helped narrow down choices and make a decision more quickly. For the users who preferred additive, they liked seeing more options.
For the shipped feature, subtractive filtering was used and the labels were removed from under the instructor avatars. In a subtractive filtering model, these labels were a visual duplicate of the vibe tags that had already been selected above, and did not provide the user with any further context or information.
Header copy was also updated to ask the user to select a max number of vibes (3) to correspond with the total number of vibes in each instructor's tag set (3), and thus the maximum number a user can select in order to return at least 1 result.
3. Instructor details
When it came to the Instructor Detail page, we focused on how to help users understand the unique nuances of an instructor's personality at a quick glance by adding descriptors below their name that were already being used in a separate e-mail campaign. (Note: "descriptors" and "vibe tags" are related, but not the same element.)
VERSION 1
Descriptors as pills: Descriptors words are shown in small pillboxes.
VERSION 2
Descriptors as copy: Descriptors words are shown as text-only, using 2 different colors.
In reviewing the descriptor words for each instructor, we saw that there were some duplicates with words that also surfaced in vibe tags.
For the shipped feature, we chose to eliminate these words from descriptors so that the "vibe tag set" and "descriptor set" each maintained unique copy with no crossover.
TESTING FEEDBACK + ITERATIONS
When looking at the Instructor Details page, users reiterated the importance of music & playlists when choosing a class, saying they would like to see some kind of music callout at the top of the page.
For the shipped feature, we added a playlist style as a descriptor for each instructor, so a user can easily see what kind of music to expect most often.
Users also weren't sure what the "descriptor words" on the Instructor Details page were, or if/how they related to the vibe tags. To clarify this in the shipped feature, we added vibe tags directly to Instructor Details using the same pill shape and hex colors, and changed descriptors from the alternating colors of the descriptors to use only 1color.
Details at the top of the page were then stacked vertically in order by the level of detail they provided, starting with the most broad (vibe tags associated with multiple instructors), to more specific (unique single-word descriptors that describe a particular instructor) to most granular (personalized instructor bio).
METHOD & PROCESS: TAGGING
THE NUANCES OF LANGUAGE
What's in a name? (Or in this case...vibe?) A lot!
To generate the final set of vibe tags and decide which tags to assign to each of our 31 instructors, we took a two-step approach:
1. conduct a survey to find out how users would describe each instructor, and make a recommendation based on that data
2. Design and facilitate a workshop with SoulCycle stakeholders to review the recommendations and iterate as needed
1. user surveY
Developed together with our UX research team, a 5-minute online survey was completed by 250 SoulCycle at-home bike owners who had completed at least 4 classes on the bike in the past month. It was completed at the same time we were working on early concept designs.
This was important to my process because it allowed my design team to:
validate the importance of instructor vibes with users
learn what words users would use to describe individual instructors on the platform
Call out qualitative
trouble spots based on quantitative feedback
Look for simple ways to meet addt'l user needs in our design that came out of the survey
Word Cloud: Our research team created a word cloud from the survey data to show which words users used the most to describe each instructor.
sURVEY FEEDBACK + ITERATIONS
We validated the importance of instructor vibes:
-
94% of riders agreed that each instructor creates a uniquely different vibe, mood, or feeling for the class.
-
84% choose instructors based on the vibe, mood, or feeling they are looking to experience that day.
We made vibe tag recommendations based on feedback:
-
An initial set of 16 vibe tag words, assigning 3 tag recs to each instructor.
-
Vibe words that surfaced with extreme popularity across many instructors were replaced during our stakeholder workshop, as they were too common to effectively reduce the number of filtered results.
We made additional "small-win" recommendations to further improve the user experience:
-
A "music playlist style" was added to the Descriptor metadata on each Instructor Details page.
2. VIBE TAG WORKSHOP with sTAKEHOLDERS
In order to finalize the vibe tag set and individual instructor tags in a way that satisfied both our users and brand stakeholders, I designed and hosted a workshop with SoulCycle stakeholders and our production team to review the recommendations, and make adjustments as needed.
This was important because I was able to reach consensus across teams in a way that was engaging and efficient, and that kept the feature on-track for release.
Silent Brainstorming +
Dot Voting: I used Miro to have everyone generate more nuanced, on-brand replacements for "too-popular" words, and then we dot-voted to choose the winners.
Final18-Tag Vibe Set: The size of the pills and padding was increased, and space between rows increased to make it easier for the user to individually tap and select.
To finalize tags for each instructor, we worked as a group to review the 3 UX-recommended tags against the full 18-tag set, making swaps as needed to ensure that the tags assigned to each instructor felt accurate for users and on-brand for stakeholders.
We also paused during this process to check tallies and ensure relative balance in the number of instructor results that were tied to each tag.
FIND YOUR INSTRUCTOR: watch a tap-through of the shipped feature below.
next steps
track SUCCESS METRICS
Partner with our analytics team to track the following:
-
Is the number of class completes during a new user's first 14 days increasing?
-
Is the time to class start decreasing?
-
Are more users viewing the Instructor Details page?
-
Are users following more instructors?