Find your match with ClassPass Instructor Profiles

Find your match with ClassPass Instructor Profiles

Helping people get connected to fitness instructors so they can feel confident and comfortable in their workouts.

Helping people get connected to fitness instructors so they can feel confident and comfortable in their workouts.

Helping people get connected to fitness instructors so they can feel confident and comfortable in their workouts.

INTRODUCTION

Role

Product Designer

Product Designer

Product Designer

Responsibilities

Responsibilities

  1. User Research

  2. UX/UI Design

  3. Visual Design

  4. Prototyping

  1. User Research

  2. UX/UI Design

  3. Visual Design

  4. Prototyping

  1. User Research

  2. UX/UI Design

  3. Visual Design

  4. Prototyping

Tools Used

Tools Used

  1. Figma

  2. Vowel

  1. Figma

  2. Vowel

  1. Figma

  2. Vowel

Goal

Goal

Help ClassPassers learn about a fitness instructor before committing to take their class.

Help ClassPassers learn about a fitness instructor before committing to take their class.

Help ClassPassers learn about a fitness instructor before committing to take their class.

Solution

Solution

Design an instructor profile feature that seamlessly incorporates into the ClassPass app.

Design an instructor profile feature that seamlessly incorporates into the ClassPass app.

Design an instructor profile feature that seamlessly incorporates into the ClassPass app.

BACKGROUND

The flexibility to try different workouts at different studios

The flexibility to try different workouts at different studios

The flexibility to try different workouts at different studios

ClassPass is a membership that provides access to various fitness classes at thousands of studios and gyms. This flexibility allows members the ability to attend different classes at various studios rather than committing to one single studio or gym.

ClassPass is a membership that provides access to various fitness classes at thousands of studios and gyms. This flexibility allows members the ability to attend different classes at various studios rather than committing to one single studio or gym.

ClassPass is a membership that provides access to various fitness classes at thousands of studios and gyms. This flexibility allows members the ability to attend different classes at various studios rather than committing to one single studio or gym.

PROBLEM

It can be overwhelming for ClassPassers to find a fitness instructor that meets their needs and preferences

It can be overwhelming for ClassPassers to find a fitness instructor that meets their needs and preferences

It can be overwhelming for ClassPassers to find a fitness instructor that meets their needs and preferences

If ClassPassers want to learn about an instructor, they must rely on the app’s user-written reviews. Since ClassPass does not offer information on instructors, ClassPassers find themselves doing external research on Yelp, Google Business, Instagram, and TikTok.


How might we help ClassPassers learn about instructors who meet their fitness preferences and goals so they can feel confident and comfortable when they take their classes?

If ClassPassers want to learn about an instructor, they must rely on the app’s user-written reviews. Since ClassPass does not offer information on instructors, ClassPassers find themselves doing external research on Yelp, Google Business, Instagram, and TikTok.


How might we help ClassPassers learn about instructors who meet their fitness preferences and goals so they can feel confident and comfortable when they take their classes?

If ClassPassers want to learn about an instructor, they must rely on the app’s user-written reviews. Since ClassPass does not offer information on instructors, ClassPassers find themselves doing external research on Yelp, Google Business, Instagram, and TikTok.


How might we help ClassPassers learn about instructors who meet their fitness preferences and goals so they can feel confident and comfortable when they take their classes?

ASSUMPTIONS

There are two kinds of people on ClassPass

There are two kinds of people on ClassPass

There are two kinds of people on ClassPass

RESEARCH

Understanding ClassPassers' pain points

Understanding ClassPassers' pain points

Understanding ClassPassers' pain points

To better understand how ClassPassers use ClassPass, I asked current users with an active subscription to walk me through how they find and book classes. Here’s what I learned:

To better understand how ClassPassers use ClassPass, I asked current users with an active subscription to walk me through how they find and book classes. Here’s what I learned:

To better understand how ClassPassers use ClassPass, I asked current users with an active subscription to walk me through how they find and book classes. Here’s what I learned:

"How long have they been teaching? Do they have other certificates?"

How long have they been teaching? Do they have other certificates?




How long have they been teaching? Do they have other certificates?


-Victoria

How long have they been teaching? Do they have other certificates?


-Victoria

It just says their names, I don't know where else they teach. You can't search by instructor, only by studios.




It just says their names, I don't know where else they teach. You can't search by instructor, only by studios.

-Victoria

It just says their names, I don't know where else they teach. You can't search by instructor, only by studios.


-Victoria

If instructors had their own pages and it talked about their style that would be helpful.




If instructors had their own pages and it talked about their style that would be helpful.


-Mary

If instructors had their own pages and it talked about their style that would be helpful.


-Mary

ClassPassers are not presented with instructors' fitness backgrounds. They are looking for more information and context about an instructor.

ClassPassers are not presented with instructors' fitness backgrounds. They are looking for more information and context about an instructor.

ClassPassers are not presented with instructors' fitness backgrounds. They are looking for more information and context about an instructor.

Do you know if ClassPass allows you to see all the classes that one instructor teaches?

-Kaylin

If I really liked someone, I want to know their schedule especially for studios that I don't go to.

-Kaylin

Instructors have texted me their Spotify playlist but then I get their # and that's weird. I want their playlist but not their #.


-Victoria

ClassPassers are unable to view an instructor's overall schedule especially if they teach at multiple locations. They are limited to viewing a studio's general schedule for a given day only.

The studio emails me the instructor's name and Instagram but they don't post anything fitness related so why follow them?



-Victoria

I've searched instructors on Instagram, but I won't follow because it feels too personal.

-Mary

I need to feel the vibe first then I will decide if I want to follow or not.


-Jess


ClassPassers are reluctant to follow instructors on Instagram because it's too personal. Though the studio will provide an instructor’s Instagram on the studio’s Instagram or website, oftentimes, the instructor’s Instagram is too personal, does not contain any fitness-related content, or is private.

They should have a sample player on their profile so we can see what music they play.


-Mary

I think I've even stalked an instructor on Spotify to see if I could find their playlist.


-Kaylin

Instructors have texted me their Spotify playlist but then I get their # and that's weird. I still want their playlist but not their #.



-Victoria

ClassPassers are unable to preview an instructor's music playlist before class and cannot easily access their playlist after class.

Do you know if ClassPass allows you to see all the classes that one instructor teaches?




Do you know if ClassPass allows you to see all the classes that one instructor teaches?




-Kaylin

If I really liked someone, I want to know their schedule especially for studios that I don't go to.




If I really liked someone, I want to know their schedule especially for studios that I don't go to.




An instructor I follow posted her schedule of the locations she teaches at but I don't want to follow all of my instructors just to see.


An instructor I follow posted her schedule of the locations she teaches at but I don't want to follow all of my instructors just to see


-Victoria

ClassPassers are unable to view an instructor's overall schedule especially if they teach at multiple locations. They are limited to viewing a studio's general schedule for a given day only.

ClassPassers are unable to view an instructor's overall schedule especially if they teach at multiple locations. They are limited to viewing a studio's general schedule for a given day only.

The studio emails me the instructor's name and Instagram but they don't post anything fitness related so why follow them?




The studio emails me the instructor's name and Instagram but they don't post anything fitness related so why follow them?


-Victoria

I've searched instructors on Instagram, but I won't follow because it feels too personal.





I've searched instructors on Instagram, but I won't follow because it feels too personal.



-Mary

I need to feel the vibe first then I will decide if I want to follow or not.






I need to feel the vibe first then I will decide if I want to follow or not.




-Jess

ClassPassers are reluctant to follow instructors on Instagram because it's too personal. Though the studio will provide an instructor’s Instagram on the studio’s Instagram or website, oftentimes, the instructor’s Instagram is too personal, does not contain any fitness-related content, or is private.

ClassPassers are reluctant to follow instructors on Instagram because it's too personal. Though the studio will provide an instructor’s Instagram on the studio’s Instagram or website, oftentimes, the instructor’s Instagram is too personal, does not contain any fitness-related content, or is private.

They should have a sample player on their profile so we can see what music they play.





They should have a sample player on their profile so we can see what music they play.



-Mary

I think I've even stalked an instructor on Spotify to see if I could find their playlist.






I think I've even stalked an instructor on Spotify to see if I could find their playlist.




-Kaylin

Instructors have texted me their Spotify playlist but then I get their # and that's weird. I still want their playlist but not their #.




Instructors have texted me their Spotify playlist but then I get their # and that's weird. I still want their playlist but not their #.


-Victoria

ClassPassers are unable to preview an instructor's music playlist before class and cannot easily access their playlist after class.

ClassPassers are unable to preview an instructor's music playlist before class and cannot easily access their playlist after class.

After understanding these users' pain points, I wanted to prioritize an instructor profile with the following items in mind:

  1. Instructor bio with background, certifications, specialties

  2. Instructor's comprehensive schedule especially if they teach at multiple locations

  3. A list of the instructor's reviews from all studios

  4. Other locations the instructor teaches at

  5. The ability to sync their Spotify playlist to allow ClassPassers to preview their music taste and overall vibe of each class

After understanding these users' pain points, I wanted to prioritize an instructor profile with the following items in mind:

  1. Instructor bio with background, certifications, specialties

  2. Instructor's comprehensive schedule especially if they teach at multiple locations

  3. A list of the instructor's reviews from all studios

  4. Other locations the instructor teaches at

  5. The ability to sync their Spotify playlist to allow ClassPassers to preview their music taste and overall vibe of each class

After understanding these users' pain points, I wanted to prioritize an instructor profile with the following items in mind:

  1. Instructor bio with background, certifications, specialties

  2. Instructor's comprehensive schedule especially if they teach at multiple locations

  3. A list of the instructor's reviews from all studios

  4. Other locations the instructor teaches at

  5. The ability to sync their Spotify playlist to allow ClassPassers to preview their music taste and overall vibe of each class

COMPETITOR ANALYSIS

Chain gyms and studios with instructor bios, schedules, and more

Chain gyms and studios with instructor bios, schedules, and more

Chain gyms and studios with instructor bios, schedules, and more

  • Astronaut on Cars
  • Floating Astronaut
  • Floating Car
  • Astronaut on Cars
  • Floating Astronaut
  • Floating Car
  • Astronaut on Cars
  • Floating Astronaut
  • Floating Car
  • Astronaut on Cars
  • Floating Astronaut
  • Floating Car
BOOKING A CLASS

Navigating to read about instructors first

Navigating to read about instructors first

After understanding how ClassPassers were booking a class, it made sense to add this new feature to the studio page after the user decided on which studio to visit. Users must tap on the “View schedule” button to choose a class. I thought this page would be the most seamless to add a “View instructors” button, giving users another option to go about booking a class.

After understanding how ClassPassers were booking a class, it made sense to add this new feature to the studio page after the user decided on which studio to visit. Users must tap on the “View schedule” button to choose a class. I thought this page would be the most seamless to add a “View instructors” button, giving users another option to go about booking a class.

After understanding how ClassPassers were booking a class, it made sense to add this new feature to the studio page after the user decided on which studio to visit. Users must tap on the “View schedule” button to choose a class. I thought this page would be the most seamless to add a “View instructors” button, giving users another option to go about booking a class.

Task flow

THE VISION

Designing for a seamless integration

Designing for a seamless integration

Designing for a seamless integration

From original concept to design explorations

From original concept to design explorations

From original concept to design explorations

I explored a design that would give the user the ability to view all the instructors who teach at a studio on a single screen as shown above. As for the instructor profile, I thought about what information users would find helpful and relevant on this screen, like the instructor's schedule.

I explored a design that would give the user the ability to view all the instructors who teach at a studio on a single screen as shown above. As for the instructor profile, I thought about what information users would find helpful and relevant on this screen, like the instructor's schedule.

I explored a design that would give the user the ability to view all the instructors who teach at a studio on a single screen as shown above. As for the instructor profile, I thought about what information users would find helpful and relevant on this screen, like the instructor's schedule.

Low-fidelity wireframes

Mid-fidelity wireframes: Navigating to the studio's list of instructors

Providing ClassPassers more flexibility when booking a class

ClassPassers currently book a class by viewing the schedule of a studio. To provide more flexibility when booking a class, I added a new CTA button right below "View schedule" on the studio screen. This new CTA button gives ClassPassers another option to book a class because it allows them to explore instructors and learn about their backgrounds first.

Mid-fidelity wireframes: Instructor profile

Optimizing the instructor profile page

After talking to users and conducting a competitive analysis, I had the following 5 items to work with when designing an instructor's profile, their bio, schedule, reviews, location, and playlist. I thought a tab navigation design pattern would provide a clear visual indication and would make the content easy, and accessible, and empower the user to choose what they want to learn about an instructor.

Providing ClassPassers more flexibility when booking a class

Providing ClassPassers more flexibility when booking a class

ClassPassers currently book a class by viewing the schedule of a studio. To provide more flexibility when booking a class, I added a new CTA button right below "View schedule" on the studio screen. This new CTA button gives ClassPassers another option to book a class because it allows them to explore instructors and learn about their backgrounds first.

ClassPassers currently book a class by viewing the schedule of a studio. To provide more flexibility when booking a class, I added a new CTA button right below "View schedule" on the studio screen. This new CTA button gives ClassPassers another option to book a class because it allows them to explore instructors and learn about their backgrounds first.

Mid-fidelity wireframes: Navigating to the studio's list of instructors

Optimizing the instructor profile page

Optimizing the instructor profile page

After talking to users and conducting a competitive analysis, I had the following 5 items to work with when designing an instructor's profile, their bio, schedule, reviews, location, and playlist. I thought a tab navigation design pattern would provide a clear visual indication and would make the content easy, and accessible, and empower the user to choose what they want to learn about an instructor.

After talking to users and conducting a competitive analysis, I had the following 5 items to work with when designing an instructor's profile, their bio, schedule, reviews, location, and playlist. I thought a tab navigation design pattern would provide a clear visual indication and would make the content easy, and accessible, and empower the user to choose what they want to learn about an instructor.

Mid-fidelity wireframes: Instructor profile

Mid-fidelity wireframes: Instructor profile

From design explorations to real life

From design explorations to real life

From design explorations to real life

After my mid-fidelity wireframes, it was a matter of filling in the missing content like copy and images, to turn this concept into reality.

After my mid-fidelity wireframes, it was a matter of filling in the missing content like copy and images, to turn this concept into reality.

After my mid-fidelity wireframes, it was a matter of filling in the missing content like copy and images, to turn this concept into reality.

  • Astronaut on Cars
  • Floating Astronaut
  • Astronaut on Cars
  • Floating Astronaut
  • Astronaut on Cars
  • Floating Astronaut
  • Astronaut on Cars
  • Floating Astronaut

Hi-fidelity wireframes: Navigating to the studio's list of instructors and instructor profile

Hi-fidelity wireframes: Navigating to the studio's list of instructors and instructor profile

Hi-fidelity wireframes: Navigating to the studio's list of instructors and instructor profile

USABILITY TESTING

What do ClassPassers think?

What do ClassPassers think?

What do ClassPassers think?

What worked

What worked

What worked

I love the playlist feature, that's my favorite


I really like having the playlists included. It says a lot about an instructor and their disposition and teaching style.


I love having access to their playlist!


My favorite is the playlist tab


I appreciate the playlist feature tab


  • 5 out of 6 users were fond of the playlist feature on the instructor profile

I love the playlist feature, that's my favorite.






I love the playlist feature, that's my favorite.





-Jess

I really like having the playlists included. It says a lot about an instructor and their disposition and teaching style.



I really like having the playlists included. It says a lot about an instructor and their disposition and teaching style.


-Mary

I love having access to their playlist!

I love having access to their playlist!




-Jenn

My favorite is the playlist tab.

My favorite is the playlist tab




-Michelle

I appreciate the playlist feature tab.

I appreciate the playlist feature tab




-Victoria

  • 5 out of 6 users were fond of the playlist feature of the instructor profile

  • 5 out of 6 users were fond of the playlist feature of the instructor profile

Icons were similar enough where this feature felt like it fit in nicely.

I would actually enjoy this feature if it were a real one on ClassPass and be more encouraged to check out more instructors.

Cool addition and clean user interface.

Looks very streamlined as if it were already part of the product.

I thought it was great and a feature I'd really enjoy to have on ClassPass.

  • 3 out of 6 users shared that the new feature

Organize list of instructor avatars in ABC order so I can scan and find certain instructors more easily.

Expected instructors to be in alphabetical order.

  • 2 out of 6 users expected the instructors to be in alphabetical order

Looks like a ClassPass add-on. It has the same schedule structure. I love seeing where she teaches.

The schedule tab is helpful. I get tired of scrolling.

I like that you can see the classes very easily on the schedule tab.

  • 2 out of 6 users expected the instructors to be in alphabetical order

Icons were similar enough where this feature felt like it fit in nicely.




Icons were similar enough where this feature felt like it fit in nicely.




-Victoria

I would actually enjoy this feature if it were a real one on ClassPass and be more encouraged to check out instructors.


I would actually enjoy this feature if it were a real one on ClassPass and be more encouraged to check out instructors.


Cool addition and clean user interface.





Cool addition and clean user interface.





-Nicole

Looks very streamlined as if it were already part of the product.



Looks very streamlined as if it were already part of the product.




-Michelle

I thought it was great and a feature I'd really enjoy to have on ClassPass.




I thought it was great and a feature I'd really enjoy to have on ClassPass.




-Michelle

Looks like a ClassPass add-on.



I thought it was great and a feature I'd really enjoy to have on ClassPass.




-Michelle

  • 4 out of 6 users shared that they enjoyed this new feature

  • 3 out of 6 users stated that the new feature fit nicely into the existing user interface

  • 4 out of 6 users shared that they enjoyed this new feature

  • 3 out of 6 users stated that the new feature fit nicely into the existing user interface

It has the same schedule structure. I love seeing where she teaches.




Looks like a ClassPass add-on. It has the same schedule structure. I love seeing where she teaches.



-Jenn

The schedule tab is helpful. I get tired of scrolling.






The schedule tab is helpful. I get tired of scrolling




-Victoria

I like that you can see the classes very easily on the schedule tab.





I like that you can see the classes very easily on the schedule tab




-Michelle

  • 3 out of 6 users liked the schedule tab that displays only the single instructor's overall schedule

  • 3 out of 6 users liked the schedule tab that displays only the single instructor's overall schedule

What to improve

What to improve

Organize list of instructor avatars in ABC order so I can scan and find certain instructors more easily.

Organize list of instructor avatars in ABC order so I can scan and find certain instructors more easily



-Nicole

Expected instructors to be in alphabetical order.






Expected instructors to be in alphabetical order




-Mary

  • 2 out of 6 users expected the instructors to be in alphabetical order

  • 2 out of 6 users expected the instructors to be in alphabetical order

I'm not sure what tab/page I'm on. There's no clear visual to indicate what tab I'm on.

Organize list of instructor avatars in ABC order so I can scan and find certain instructors more easily



-Nicole

  • 1 out of 6 users mentioned that there was not a clear visual indication of what tab they were viewing

  • 1 out of 6 users mentioned that there was not a clear visual indication of what tab they were viewing

ITERATIONS

Prioritizing user feedback into final iterations

Prioritizing user feedback into final iterations

Browsing and scanning with efficiency

Browsing and scanning with efficiency

Browsing and scanning with efficiency

  • Instructors are listed in alphabetical order to make it easier for users to scan the list as they are browsing through different profiles to learn more about instructors

  • Instructors are listed in alphabetical order to make it easier for users to scan the list as they are browsing through different profiles to learn more about instructors

  • Instructors are listed in alphabetical order to make it easier for users to scan the list as they are browsing through different profiles to learn more about instructors

Changing active state of icons from outlined to filled

Changing active state of icons from outlined to filled

Changing active state of icons from outlined to filled

  • The line under each icon denoting what tab/page the user is on may not be a clear enough visual indication. To support this, I changed the icons from outlined to filled.

  • The line under each icon denoting what tab/page the user is on may not be a clear enough visual indication. To support this, I changed the icons from outlined to filled.

  • The line under each icon denoting what tab/page the user is on may not be a clear enough visual indication. To support this, I changed the icons from outlined to filled.

SOLUTION

Fun facts about your fitness instructor right at your fingertips

Fun facts about your fitness instructor right at your fingertips

SOLUTION

Fun facts about your fitness instructor right at your finger tips

ClassPass Instructor Profiles, a new feature to help users get to know their fitness instructors before they commit to taking their class. Users can choose from a list of a studio's instructors, go to their profile, and read about their background, view their schedule, read views and locations, and preview their music playlist.

REFLECTIONS

What this project taught me

What this project taught me

What this project taught me

Learnings

iterations

Learnings

Take advantage of existing design patterns

  • There is no need to reinvent the wheel or design something revolutionary, especially for new features. I did my best to stick to ClassPass' design patterns to design an instructor profile that resulted in positive user feedback

Take advantage of existing design patterns

  • There is no need to reinvent the wheel or design something revolutionary, especially for new features. I did my best to stick to ClassPass' design patterns to design an instructor profile that resulted in positive user feedback

Take advantage of existing design patterns

  • There is no need to reinvent the wheel or design something revolutionary, especially for new features. I did my best to stick to ClassPass' design patterns to design an instructor profile that resulted in positive user feedback

Consider business goals and technical constraints

As a designer, focusing on business goals and technical constraints is just as important as learning about the user's goals and needs. Due to the scope of this project, I focused on what would make the user more comfortable and confident when booking a class when there are so many instructors to choose from. I quickly realized that although an instructor profile may be a user need, it may not be a feature that ClassPass would prioritize. Some questions I had throughout this project:

  • How will an instructor profile make ClassPass money? Wouldn't users just become loyal to a certain instructor after taking their classes several times and decide to get a subscription to that gym or studio instead, thus resulting in the termination of their ClassPass subscription?

  • Pulling instructors' schedules and reviews and creating a profile may seem like a doable task, but how will ClassPass manage the rest of the instructors' content? Will instructors get to opt-in and out of creating a profile? How do they link their Spotify account to include their playlists?

Consider business goals and technical constraints

As a designer, focusing on business goals and technical constraints is just as important as learning about the user's goals and needs. Due to the scope of this project, I focused on what would make the user more comfortable and confident when booking a class when there are so many instructors to choose from. I quickly realized that although an instructor profile may be a user need, it may not be a feature that ClassPass would prioritize. Some questions I had throughout this project:

  • How will an instructor profile make ClassPass money? Wouldn't users just become loyal to a certain instructor after taking their classes several times and decide to get a subscription to that gym or studio instead, thus resulting in the termination of their ClassPass subscription?

  • Pulling instructors' schedules and reviews and creating a profile may seem like a doable task, but how will ClassPass manage the rest of the instructors' content? Will instructors get to opt-in and out of creating a profile? How do they link their Spotify account to include their playlists?

Consider business goals and technical constraints

As a designer, focusing on business goals and technical constraints is just as important as learning about the user's goals and needs. Due to the scope of this project, I focused on what would make the user more comfortable and confident when booking a class when there are so many instructors to choose from. I quickly realized that although an instructor profile may be a user need, it may not be a feature that ClassPass would prioritize. Some questions I had throughout this project:

  • How will an instructor profile make ClassPass money? Wouldn't users just become loyal to a certain instructor after taking their classes several times and decide to get a subscription to that gym or studio instead, thus resulting in the termination of their ClassPass subscription?

  • Pulling instructors' schedules and reviews and creating a profile may seem like a doable task, but how will ClassPass manage the rest of the instructors' content? Will instructors get to opt-in and out of creating a profile? How do they link their Spotify account to include their playlists?

Other projects

Other projects

Empathizing with the Community Through Visual Storytelling

A responsive web redesign for CCED, a grassroots organization in LA Chinatown.

View Project

tenantcity: Empowering Tenants to lorem ipsum

Browse dozens of professionally designed templates. Click, duplicate, customize.

View Project

Let's work together!

© Annie Chuong