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
User Research
UX/UI Design
Visual Design
Prototyping
User Research
UX/UI Design
Visual Design
Prototyping
User Research
UX/UI Design
Visual Design
Prototyping
Tools Used
Tools Used
Figma
Vowel
Figma
Vowel
Figma
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?
How long have they been teaching? Do they have other certificates?
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.
It just says their names, I don't know where else they teach. You can't search by instructor, only by studios.
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.
If instructors had their own pages and it talked about their style that would be helpful.
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?
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.
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.
I need to feel the vibe first then I will decide if I want to follow or not.
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.
I think I've even stalked an instructor on Spotify to see if I could find their playlist.
Instructors have texted me their playlist but then I get their # and that's weird.
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?
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
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?
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.
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.
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.
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.
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 #.
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:
Instructor bio with background, certifications, specialties
Instructor's comprehensive schedule especially if they teach at multiple locations
A list of the instructor's reviews from all studios
Other locations the instructor teaches at
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:
Instructor bio with background, certifications, specialties
Instructor's comprehensive schedule especially if they teach at multiple locations
A list of the instructor's reviews from all studios
Other locations the instructor teaches at
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:
Instructor bio with background, certifications, specialties
Instructor's comprehensive schedule especially if they teach at multiple locations
A list of the instructor's reviews from all studios
Other locations the instructor teaches at
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
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
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
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.
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.
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.
I love having access to their playlist!
I love having access to their playlist!
My favorite is the playlist tab.
My favorite is the playlist tab.
I appreciate the playlist feature tab.
I appreciate the playlist feature tab.
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.
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
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.
3 out of 6 users liked the schedule tab that displays only the single instructor's overall schedule
What to improve
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
There's no clear visual to indicate what tab I'm on.
1 out of 6 users mentioned that there was not a clear visual indication of what tab they were viewing
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.
There's no clear visual to indicate what tab I'm on.
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
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.
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
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?