CLASSPASS

DELIVERABLES

TIMELINE

MY ROLE

Hi-Fidelity Prototype, Presentation

Two Weeks

UX Researcher, UX Designer

PROJECT OVERVIEW

 

THE COMPANY

ClassPass is a membership to fitness classes across the United States. Members are given credits which they can use to towards a variety of exercises classes such as yoga, boxing, spinning, and more. 

PROJECT SCOPE

During this project, my team was tasked with integrating feature(s) into the ClassPass app to help increase member bookings while creating a community feel. We worked for two weeks covering all steps from user interviews to presenting the final, hi-fidelity prototype in order to create a social experience for ClassPass users and enhance the booking process, optimizing for both user and business goals. 

RESEARCH

 

PROBLEM STATEMENT

ClassPass users enjoy signing up for fitness classes together but lack the ability to communicate through the app, see other people’s schedules, and meet new people. 

 

How might we provide a sense of community and increase class bookings by improving social interactions within the app?

USER INTERVIEWS

In order to ensure we interviewed the target audience, male and female ClassPass members ages 22 to 30, we created and sent out a screener survey. Out of our respondents, we interviewed five people who best exemplified our target audience. Interviewing the right people ensures the team is making design decisions that better the experience for the company's users. 

The key insights we unlocked were:

  • Users try to workout consistently

  • Members enjoy working out with friends

  • The ClassPass community likes to meet new people in classes

  • ClassPass users need a convenient way to communicate with friends

PERSONAS

The two personas shown below were created based on the users the team and I interviewed. Christina, the primary persona, acted as the basis for our creative design decisions. She exemplified the larger majority of users interviewed. 

DESIGN

 

ORIGINAL WIREFRAMES

The original wireframes shown below were designed after the team synthesized the research findings using an affinity map, created a primary and secondary persona, ran a design studio, and completed both a Feature Prioritization Matrix and a MoSCoW Map. This process allowed the team to focus on the features that catered best to solving the problem at hand, and weed out features that do not belong in the MVP because they either do not directly solve the users’ needs or they take too much time to build out, thus should be incorporated in upcoming product versions. 

1. Insight: Users don’t know they can add friends on ClassPass because the feature is buried. 

Feature: The friends tab allows easy access to friends’ profiles and allows users to add new friends

2. Insight: Users need to have all their app notifications in one, easy-to-find place. 

Feature: The home shows requests upfront and all updates relevant to the user.

3. Insight: Users are interested in making workout friends. 

Feature: The groups feature allows users to connect with others who enjoy similar workouts to them

ClassPass_Midfi_3x.png

4. Insight: Users are unable to see which classes friends are taking. 

Feature: The friend picture on the class list shows users which of their friends are signed up for that class

5. Insight: Users want to tell friends they want to workout together without having to coordinate schedules. 

Feature: The “looking for a buddy” feature broadcasts to users’ friends that they are looking for someone to attend class with 

ClassPass_Midfi_3x.png

USABILITY TESTING

ROUND 1

We created a usability test guide to understand how users interact and understand the new interface. During the usability tests we focused on three main tasks and created scenarios to give the users context for their actions.   

 

  1. Scenario: You are interested in having more friends on ClassPass. While searching the app, you notice a recommended connection with a woman who attends the same barre class as you. Task: Add your friend from barre class.

  2. Scenario: You’re interested in connecting with other people who enjoy the same ClassPass classes as you. You often take spinning classes and would love to meet other members to book classes with who also love to spin. Task: Join a recommended spin group.

  3. Scenario: You want to take a class but don’t want to go by yourself. Task: Book a class with a friend who is looking for a workout buddy.

Our key takeaways provided valuable insights for the next round of design iterations. 

  • It took users a few tries to add a friend from barre class. They did not see the “add friends” button clearly. 

  • Joining a group follows the same logic as finding a friend, which is why users were able to quickly navigate the second task.

  • All users looked to the feed for finding a class with a workout buddy

DESIGN ITERATIONS

ROUND 1

1. Insight: The home button was not descriptive of the content on the page. 

Iteration: Changed home button to “Feed” button

ClassPass_HomexFeed_3x.png

2. Insights: All users looked to the feed for finding a class with a workout buddy; Users did not understand the “looking for a buddy icon” nor did they realize the profile image was a friend attending that class. 

Iterations: Place all friends who are looking for a buddy in the home feed; Aligned profile icons of friends attending classes and text announcing how many friends are going so that users can easily see which classes their friends are taking

ClassPass_FindBuddy_3x.png

USABILITY TESTING

ROUND 2

Using the same script, the team and I tested five more ClassPass members to determine if our design iterations allowed for users to complete the three tasks easier and faster.  

Key takeaways:

  • Users scrolled past the “Add friend” button at first, but found it after exploring

  • Users scrolled past the “Join groups” button at first, but found it because it mimicked the “Add your friend” task.

  • Users found the Feed page too busy

  • All users were able to join a class with a friend “Looking for a buddy" through one of the two paths we placed. This task was failed in the previous iteration, proving that the changes made were effective.

DESIGN ITERATIONS

ROUND 2

Insights: Users found the Feed page too busy.

Iterations: Added gray notification boxes behind content grouping to create visual contrast; Renamed sections to better reflect users' mental informational models

ClassPassFeed_3x.png

Insights: Users scrolled past the “Add friend” button at first, but found it after exploring.

Iterations: Updated the "Add Friends" UI design to more closely mimic a button look and feel; changed "Add Friends" to "Find Friends" better matching the actions on the following screen in the path; reworded "Your Friends" to "My Friends" in order to convey a sense of ownership over the profile account. 

AddFriends_3x.png

Insights: Users scrolled past the “Join groups” button at first, but found it because it mimicked the “Add your friend” task.

Iterations: Ensured the UI elements updated in the "Add Friend" task matched the "Join Group" task to align with users' delight in the similar flows.

Join Groups BeforexAfter_3x.png

NEXT STEPS

 

Given more time, I would have included a feature where users could see individual friends’ profiles from the friends page. This feature was originally listed as could have because ClassPass has a version of it already that only some users said they engage with. In order to truly make the app more social, I followed how the majority of the users were currently behaving and built out those features. It is better to let the users guide decisions that try to force a change on their actions. 

 

I would have also built out the groups page to see group profiles and allow users to create their own groups. This groups feature is important and should be included if ClassPass were to launch these changes; however, my team focused testing on ways to discover new friends as opposed to taking the initiative in making groups.