feature add: classpass
Designing an availability and swipe feature for Classpass to diversify studio contacts, spice up fitness routines, and enhance friendships through facilitating hangouts.
Skills: UX Research, UX Design
overview
BACKGROUND
What is Classpass?
As defined by its website, Classpass is an app "for all things fitness, wellness & beauty." It "gives you worldwide access to thousands of top-rated gyms, fitness studios, salons and spas" on a subscription- and credits-based service.
THE PROBLEM
Contract diversity and lackluster friendship experience
One of the strengths of Classpass is variety. From both a business and user standpoint, Classpass benefits from users being exposed to a wide variety of classes and studios.
Exposure to more studios could mean greater stability for Classpass itself due to a diversification of studio contracts. For users, discovering exciting new studios could mean even more variety to one’s fitness routine, which could contribute to higher retention rates.
Another strength of Classpass is the ability to add friends.
As it stands, there is not much “delight” in Classpass friendships, and scheduling features for classes with friends are limited, creating an added layer of difficulty to classes with friends.
With these opportunities in mind, I considered the following HMW questions:
How might we help diversify the studios and class types users are exposed to?
How might we create delight within existing friendships on Classpass?
SOLUTION
A swipe feature to help people discover new classes and coordinate with friends
Availability input to allow for personalized recommendations in swipe feature
Swipe feature to discover new classes and studios, ultimately supporting the diversification and stability of Classpass
discovery
Competitor Analysis
User Interviews
Empathy Map
Persona
USER INTERVIEWS
Interviewing Classpass users
5 women residing in the United States
Interview length: 45 minutes
In these conversations, I explored the following questions:
What motivates people to use Classpass regularly?
What do users like about Classpass? What do users dislike?
EMPATHY MAP
Understand the user emotions, thoughts, and needs
I conducted a competitor analysis of two fitness apps and a service assisting women in making friends.
designing the solution
User Flows
Sketches
Wireframes
USER FLOWS
Promoting studio discovery and hangout facilitation
I created these user flows.
LEGEND
INPUT AVAILABILITY
SWIPE TO SAVE A CLASS AND GET MATCHES WITH FRIENDS
Sketches
My next step was getting in the weeds and sketching out UI possibilities. I focused on the swipe function and availability input.
Lo-fi Wireframes
Rough, rapid-fire lo-fi mockups, exploring demos, availability input, and swiping
usability testing
round 1
MODERATED USABILITY TESTING
Lo-fi testing to identify user needs and explore concepts
Test length: 45 minutes
Remote moderated test
In this first round of usability testing, explored the following questions:
How clear is the new feature’s purpose to first-time users?
How easily can users navigate and complete core tasks, such as inputting availability and swiping through classes?
Do users have a good sense of what step they are at in these processes?
USABILITY TESTING RESULTS
Iterations: round 1
Main pain points from user testing:
In general, many users felt a sense of disorientation. They didn't necessarily understand why they were inputting availability, and they felt surprised to swipe on classes. Following this feedback, I changed CTA microcopy.
In addition, some users felt restricted when inputting availability. Following this feedback, I added dropdowns to accommodate recurring availability patterns.
Better CTA microcopy
Before
Users felt confused by “Browse classes” CTA and assumed it would direct them to a catalog of classes
After
Adding dropdown for seamless availability input
Before
Original time filter was rigid and only led to specific dates
After
New label allows users to easily change frequency and know default frequency
usability testing
round 2
MODERATED USABILITY TESTING
Testing availability input and swipe function
Remote unmoderated test
In this second round of usability testing, I explored the following questions:
How clear is the app’s signifiers and use of icons for to first-time users?
Do people understand why they are inputting availability and swiping?
Are they feeling a sense of progress and understanding the purpose of each step?
Task 1:
Input availability
Task 2:
Swipe through classes
USABILITY TESTING RESULTS
Iterations: round 2
Main insights from both rounds of testing:
In both rounds, participants were often surprised to match with a friend while swiping.
In addition, with the calendar icon, many users found the swiping to be a big surprise.
In round 2, one of the participants was not able to complete the swiping task, perhaps due to a lack of experience with swiping.
Following these insights, my main changes were the following:
Better signifiers for entry point
Progress bar for visibility of system status
More specific copy to teach users they will match with friends while swiping on classes
Option to tap instead of swipe for flexibility and efficiency of use
Better signifier in entry point
“New” banner and icon:
NEW
NEW
Swipe icon enhances clarity and aligns user expectations with feature
Before
After
Progress bar for visibility of system status
Before
After
More specific copy to teach users purpose of swiping on classes
Before
After
Embracing Classpass blue for aesthetics and more cohesive branding
Before
After
Option to tap instead of swipe for flexibility and efficiency of use
Before
After
select accessibility considerations
Clear affordances via progress trackers that indicate system status with thick connectors line, ample contrast with background color, and heavy font weight on current step.
Consistent hierarchy and layout to reduce cognitive load.
Color contrast for all text and UI elements compliant with WCAG 2.1 AA.
end result
next steps
Design a "saved classes" page for more flexibility of use.
Interviewing studio owners to get a sense of how to strengthen partnerships.
reflection
Going into this project, I hypothesized that a fair share of people use Classpass to make friends with fellow class-goers. However, interview after interview revealed to me that many use the app simply for their own fitness purposes or to enhance existing friendships. This project taught me a lot about being adaptable and letting the data ring as clearly as possible. In the end, I enjoyed stirring up a friendship-enhancing feature. In our busy lives, may we all find time to spend moments with the people we hold dearest.