ClassPass Redesign

Personal project | Mobile app | Case study

Rewiring the new ClassPass experience — a subscription based, one-stop platform focusing on elevating customization, efficiency, and accessibility. It offers an expansive array of workouts and wellness services tailored for all. Why redesign ClassPass? The exploration began with a deep dive into user pain points.

First things first: What are current users struggling with?

Understanding user behavior, motivations, and reasons for deleting the app shows ClassPass’ strengths and weaknesses. Results of user survey sheds light on a couple of challenges: the lack of personalization, difficulties in coordinating classes with friends, and navigating the app for scheduling. These insights provide valuable opportunities for improvement and refinement in the user experience.

Breaking down component by component

Next step after research and user feedback: dissecting the mobile app what is working, how many steps it takes to schedule a class, can we simplify it?

Generating three core issues

Encountering several usability issues that hindered user experience and satisfaction. By addressing these core issues, the redesign aimed to create a more intuitive, engaging, and visually cohesive user experience, resulting in an enhanced user satisfaction and user loyalty.

What are other fitness apps doing?

Orangetheory and Barry's excel in providing structured, high-intensity workouts and fostering strong community engagement, while Strava stands out with its advanced activity tracking, social features, and user-friendly interface. Incorporating these strengths into ClassPass can address core issues by offering improved personalization, robust social engagement, and more efficient user flow.

First unifying the visual language

This inconsistency of visual elements resulted in a fragmented user experience, where users encountered varying styles, colors, and iconography throughout the app. By addressing this branding challenge, the aim is to unify the visual elements to create a more cohesive and polished brand identity. This unified approach not only enhances user experience but also strengthens ClassPass's brand presence and identity in the competitive fitness market.

Consistency extends to UI components

A comprehensive design system for ClassPass ensures a cohesive and visually appealing user experience across all platforms, streamlining the development process and simplifying updates and scalability. If you’d like to take a look at it in more detail:

ClassPass Design System

Let’s start with onboarding journey

ClassPass's main selling point lie in its diverse array of classes, which offers individuals the opportunity to tailor their fitness journey according to their preferences and goals. However, a notable challenge is the lack of personalization within the platform. By making the onboarding journey more seamless and personalized, such as by asking users more targeted questions about their fitness interests and goals, ClassPass can enhance its algorithm to recommend relevant classes.

Crafting a data driven homepage

Establishing data preferences from the outset during onboarding sets a solid foundation. Simplifying the homepage and customizing it to individual preferences creates a more targeted and engaging user experience. This allows users to quickly find classes that align with their interests, strengthening ClassPass's competitive standing appealing to users who are looking for customized fitness solutions. Resulting in increase of user retention and engagement, ultimately propelling business performance and growth.

Because life is too short for complicated scheduling

Users struggled with non-optimal filtering options, bugs with the search bar, and a lack of personalization, particularly those who didn't know which class was right for them. Fixing the search bar bug and expanding the range of filtering options, such as intensity level of fitness and type of fitness activity, it empowers users to easily identify classes suitable for their abilities.

Users can now effortlessly maneuver across the map to arrange their bookings

Correlating the numbers of the tag to the content provides users with a quick overview of each class. However, this approach presents a new problem: with the volume of data and user interactions, how do I efficiently present summarized data without overwhelming users? To address the challenge of displaying aggregated information, I could explore implementing features such as layer control with toggles, clustering markers, custom icons, and more.

Classes are not as fun without friends

Integrating social features into ClassPass can significantly boost user engagement and retention rates. By enabling users to view activity metrics of friends, simplifying the process of inviting friends to classes, introducing a social feed and friendly competition features, ClassPass now creates a sense of community and encourages regular interaction with the platform.  This translates to greater platform visibility and word-of-mouth referrals, attracting new users and enhancing brand loyalty, further solidifying ClassPass's position in the competitive fitness market.

The old vs the new

ClassPass faced core issues of non-optimal filtering, search bar bugs, lack of personalization, complex onboarding, and scheduling processes, as well as visual inconsistencies. These challenges led to user frustration and hindered the overall user experience. By addressing these issues through a more personalized onboarding journey, enhanced filtering options, improved search functionality, and a cohesive design system, ClassPass can significantly enhance its user experience. These solutions foster greater user engagement, retention, and satisfaction, ultimately driving business performance and growth while reinforcing ClassPass's competitive position in the fitness market.

Thank you!

Other work

Fun Project | Coding | HTML & CSS | Javascript

You Want It? Come and Get It.

A fun side project exploring the concept of wanting something that we can't have. Why does this happen so often at work or personal life? What about an ice cream cone that is just out of reach?
Click here to enter the playground

Fun Project | Color Psychology | Branding | 3D

On The Inside

Exploring color psychology, revealing how colors evoke different emotional responses: red conveys excitement and energy, blue brings calmness and trust, green suggests health, and yellow and purple evoke cheerfulness and creativity.how altering the color of an iconic product influences consumer perception and brand recognition. Despite experimenting with can colors like blue, green, yellow and orange, the logo's inherent recognizability ensures the brand remains unmistakable. This highlights the strength of Coca-Cola's branding, as the familiar script continues to be associated with the brand, regardless of background color. These insights underscore the significant role color plays in shaping consumer behavior and brand perception.

Personal Project | Editorial | Design System

Local Nibbles

Local Nibbles is a fun side project, an exploration and challenge for myself during covid to solve the problem of how I can make 365 drawings and design within two months, print and produce them into a physical and functional product. Is there a system I can implement where I don't have to draw a unique piece for each day of the year?

An educational calendar centered on Hong Kong's local bites is a way to explore the region's culinary heritage along with the nutritional value of each dish, providing a holistic understanding of the food culture and itsEach month features a different traditional dish, offering detailed information on its origins, preparation, and key ingredients, along with a breakdown of its macronutrients like carbohydrates, proteins, and fats. Each month features a different traditional dish, offering detailed information on its origins, preparation, and key ingredients, along with a breakdown of its macronutrients like carbohydrates, proteins, and fats.

Personal Project | Branding & Marketing | Visual System

NYC Recycle

NYC Recycle's fresh identity is tailored to capture the essence of urban life, appeal to the youthful spirit of the city and inspire the next generation of trendsetters and innovators.

Personal Project | Branding | Visual System

Sugar Factory Rebrand

Rebranding a sugar factory to emphasize the innovation of dishes and enhance the overall consumer experience involves addressing several core issues, particularly the focus on celebrity endorsements, which is the main inspiration for the interior. To shift this perception, the factory must redefine itself as a modern, innovative culinary hub. This transformation can be achieved by crafting a compelling brand narrative that highlights inventive dishes that utilize their sugar in unexpected and delightful ways. Additionally, fostering deeper consumer engagement is essential. The goal is also to create memories, ensuring that every visit becomes a cherished experience for guests, leaving a lasting imprint of delight and satisfaction.

Personal Project | Interface design | Application

Pulse Motion

Pulse Motion is a revolutionary Apple Watch app that transforms fitness into an artistic experience. This unique app captures the beauty and precision of exercise by breaking down every motion into stunning visual, creating  striking representations of these motions, allowing you to see your workouts in a whole new light. With each movement captured as flowing lines, elegant curves, and dynamic shapes, you'll witness the beauty of fitness like never before.

Personal project | Mobile app | Case study

ClassPass Redesign

Rewiring the new ClassPass experience — a subscription based, one-stop platform focusing on elevating customization, efficiency, and accessibility. It offers an expansive array of workouts and wellness services tailored for all. Why redesign ClassPass? The exploration began with a deep dive into user pain points.

Current work | Web/UI design | Case study

Upsun navigation dropdown

In the process of Platform.sh rebrand into Upsun, lays an opportunity to make innovative changes. One being enhancing the user experience and streamlining navigation while simultaneously keeping Upsun's brand personality.

Personal project | Mobile app | Branding

HappyHearts

As we enter the digital era. It is easy for the young ones to immerse themselves with a personal device and with that journalling with a pen and paper may be tougher than it used to be. HappyHearts is an innovative tool designed to help little ones, who are fast learners of digital devices, log their daily journals with their personal device to track their progress over weeks or months of sessions. Simultaneously, therapists gain invaluable insights into their young clients' experiences, enabling them to assign activities, assess feelings and thoughts, and continually refine their approach for optimal outcomes.

UI design | Template | Case study

Upsun digital template

The objective is to transition all PDF attachments to clients into a digital one pager with Strapi. This strategic shift aims to streamline communication with clients by providing direct access to relevant resources through hyperlinks embedded within the webpage. To achieve this, Upsun plans to develop a distinct HTML template that diverts from the current webpage design, ensuring a fresh and engaging experience while also maintaining brand voice and identity.