ClassPass Mobile Redesign

My second project as a UX Design student at General Assembly would be the first group work to be assigned. Unlike Project 1, this time we would cumulatively incorporate two exercises into our project, where ultimately, our group of four would give a presentation to the class — approaching it as if we were presenting to a client.

Project Scope:

Our team was tasked with redesigning the ClassPass app. ClassPass is a service that offers access to a variety of exercise classes for a monthly fee. Our job was to find solutions that would increase class bookings by its members to build a stronger ClassPass community. As the project brief explaned, “They are exploring ways their users can motivate friends and family members to take a class together to increase social engagement on the platform.”

Tools:

Pens, Pencils, Sketch, Photoshop, InVision, Keynote.

Duration:

2 weeks.

The Challenge:

ClassPass wants to increase the member interaction with their service and other members.

The Solution:

Increase visibility of friends’ activity on ClassPass to simplify coordinating schedules. Add a VIP membership upgrade guaranteeing a spot in any class, even if it’s already been filled, helping those with busy schedules who want to book a class, last minute. Add a point-reward system for anyone who joins or invites friends to a class, giving increased incentive for social connectivity and growing membership.

The Process:

User Interviews, Affinity Mapping, Design Studios, Lo-Fi Sketches, Mid-Fi wire-frames and prototype, Usability Testing, Hi-Fi wire-frames and prototype, Presentation.

User Research:

For screening purposes, we sent out a Google Forms survey, targeting past and present ClassPass users. Some team members emailed it to friends and we also posted it on the GA Students Slack forum, as well as Reddit, Facebook, and Survey Police.

Personally, this was a bit of a stretch. If it wasn’t for my fellow group members reaching out to their own friends for the interviews, I’m not sure what I would have done. I’m no longer active on social media and the multiple survey forums online produced no results. All of our responses were from personal connections.

At this point, as a UX Design student, I wouldn’t be nearly as comfortable approaching my own friends and family about surveys and interviews unless I absolutely needed to. Having sought advice from our instructor about this, the good new is that in the professional world, it won’t be a concern. Typically, a service would be used to gather potential interviewees.

With 36 screener responses, we eventually interviewed 9 people. 2 people who use ClassPass, 7 people who no longer use ClassPass. We knew we needed to find out why ClassPass was seeing users leave their service.

User Interviews:

We asked questions to find out: How users invite their friends, why users invite friends to join them for classes, how users’ schedules affect their use of ClassPass, and how users felt about ClassPass’ pricing and point system. But we avoided leading questions and we made sure we kept the questions open-ended.

Direct Insights:

We saw that when it comes to exercising with friends, there were some complications regarding ClassPass. As one interviewee described, “the process of booking a class took a lot of coordination [consisting] of calling a friend or texting friends making sure we both get into a class.” Some described the booking process as involving too many swipes and pages to sort through to finally find the button that actually books the class.

Another mentioned, “I just suggest friends to sign up for classes through websites. There’s no real way to invite people through the app.”

On the other hand, users want to invite their friends to classes with them. “I tell friends you have to do this class with me, you’ll love it,” said one interviewee.

“It’s a good chance to help each other be motivated and experience new classes together,” said another.

Another issue interviewees express was that having a busy schedule was an obstacle. Interviewees explained, “I like to find classes that fit my work schedule.”

And regarding coordinating with friends, we were told, “it’s harder to have friends workout with me because we all have different schedules.”

And specifically regarding ClassPass, an interviewee revealed, “I continue to like my option to pop into any studio, but availability can be frustrating.”

Competitive and Comparative Analysis:

We learned that ClassPass is the Market Leader, operating in the UK and Canada. Class also offers video classes which is unique among their competition. Some of their competitors have distinct disadvantages.

Some examples: Fitreserve is only active in 3 cities. Mindbody only schedules classes and is not a membership. Gympass only works with corporate sponsors. So Classpass is leading the way in offering access to classes and new experiences for users. We needed to find out where they could be doing better — especially as a social platform.

Synthesis:

The next step in our design process was to examine and organize our research findings through Affinity Mapping. In this step, our team identified pain-points and created “I statements” would inform our solutions.

Problem Statements:

1. Many users canceled their subscriptions because they found it to be expensive. How do we provide incentive for ClassPass users to continue using the application?

2. Classes schedules can be difficult to coordinate and they fill up quickly. How can we help users with busy schedules get into their favorite classes and make it easier to coordinate with friends?

Jen and Alex:

Design Studio:

We focused our first design studio around the following specific newly stated problems:

Spots for ClassPass users are limited in many classes, thereby creating a dearth of available spots in many popular classes.

Alex, our secondary persona, cannot commit to a class schedule in advance and often finds that the classes he wants to take are already full. How might we help Alex maintain his flexible schedule while still being able to book the classes he wants?

Many users canceled their subscriptions to ClassPass because they found it to be expensive compared with traditional workout options like joining a gym.

Jen, our primary persona, would like to use ClassPass to organize her yoga schedule with friends but most of them stopped using ClassPass last year. How might we help Maya get her friends to sign up for classes via ClassPass again?

During the five minute round, every team member brainstormed in silence to generate as many solutions as possible to the problems.

Our first round of design studio session yielded too many solutions to our problem, therefore during our second session, we focused on narrowing the number of solutions to the using the MoSCoW method — asking what the app must have, should have, could have, and won’t have — and also an Action Priority Matrix helping us identify which of our best solutions were the most feasible for our purposes.

Lo-Fi Sketches:

We understood that users wanted an easier time coordinating with friends on classpass, and currently there is only one way to view which classes a friend is taking, and it involves several steps. Therefore we knew we needed to increase the visibility of friends activity.

So we added to the Upcoming page which currently lists only one’s own classes, a tab which lists one’s friends’ upcoming classes. We also made friends classes searchable from the find a class page.

Another Solution. The VIP membership upgrade guaranteeing a spot in any class, even if it’s already filled up. Busy schedules will no longer be such an obstacle. We also made it searchable from the Find a Class page.

Here are some additional lo-fi sketches we worked with.

Mid-Fi Wireframes

As we began to develop our mid-fidelity wireframes in Sketch, we discovered a need for additional pages for a more seamless navigation.

We put our mid-fi wireframes together and after linking them up in InVision, our prototype was ready to be tested.

Usability Testing:

We conducted three rounds of Usability testing. The first round had 7 participants. The second had 5 and the third had 4. Each with three objectives.

Objective 1

Purpose: Objective 1 addresses the stakeholders’ stated goal, which is to build a stronger community, by having more ClassPass members take classes with friends and family, increasing social engagement on the platform.

Method: The ClassPass member will identify a class where a ClassPass “Friend” has already reserved a spot and then successfully “Reserve” a spot for themself in said class.

Objective 2

Purpose: Objective 2 addresses the stakeholders’ other stated goal, which is to increase class bookings, by having a ClassPass member refer friends and family.

Method: ClassPass member will use the “Refer a Friend” feature to successfully refer a friend.

Objective 3

Purpose: Objective 3 addresses the stakeholders’ other stated goal, which is to increase class bookings, by using the VIP feature which guarantees a spot in any class.

Method: ClassPass member will find and reserve a spot in a class that is VIP only

During our first round of tests, we saw that users had a difficult time identifying the filter settings icon, so we added some contrast to the top menu bar which was helpful.

Also during our first test, we saw that once users opened the filter setting page, it took them some time to locate the VIP filter button so we changed it from a square shape to a star shape, which made it more noticeable and also increased recognition across the app since wherever a VIP-only class is listed, it will be indicated with a star-shaped icon.

During our second round of tests, we saw that users expected to see a list of which friends were signed up for a given class, so in our next iteration, now Hi-Fi, we included a list of friends who have reservations at the bottom of each classes reservation page, along with their profile photos.

Throughout our testing, we adapted our script for clarity and brevity according to the feedback we were receiving. This is reflected in the usability report below.

Hi-Fi Wireframes:

Our hi-fi wifeframes were up and running. This was our third iteration when upon review, we were told it looks just like ClassPass. That was a good start. But our multi-path social-interactive redesign had more in store, in addition to the tested paths, a map indication of classes with friends in them as well as VIP only classes. All viewable from the map.

 Demo of Prototype

Objective 1 - The ClassPass member will identify a class where a ClassPass “Friend” has already reserved a spot and then successfully “Reserve” a spot for themself in said class.

Objective 2 - ClassPass member will use the “Refer a Friend” feature to successfully refer a friend.

Objective 3 - ClassPass member will find and reserve a spot in a class that is VIP only

Reflections:

This was a great learning experience. I enjoyed working with my three teammates. I believe we each brought a unique strengths and perspectives. Though I’m personally still in the discovery phase when it comes to using Sketch and InVision (I’m even new using a Mac and an Iphone). So I was fortunate to have group members with some very impressive proficiency in these sorts of programs and I learned a lot from them.

Our presentation went well, I think. We were given a lot of positive feedback on our presentation style. While some of the consistency in our delivery needed work (eg. clearly communicating our problem statement and tying it to clearly demonstrated solutions), I look forward to applying the knowledge I gained during this project to the next ones.

Onward and upward!

Go Back to Top ↑