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.


Click here to see the full case study.

Why redesign ClassPass?

Problem:

Non-optimal filtering, search bar bugs, lack of personalization, complex onboarding and scheduling processes, as well as visual inconsistencies and a limited social component, hinder seamless user experience.

Solution:

Improving the onboarding process, optimizing personalization within the dashboard and algorithm, implementing a brand refresh and new design system for consistency, and introducing an interactive social component for easier friend discovery, these enhancements address usability challenges effectively.

Result:

Enhancing user engagement, retention, and satisfaction, leading to improved business performance and growth, and reinforcing ClassPass's competitive position in the fitness market.

Unifying the visual language

Creating a cohesive and polished brand identity involves resolving current visual inconsistencies. This includes establishing a unified color palette of secondary colors, updating typography to align with the brand's personality and target audience and streamlining the development process and simplifying updates and scalability. For the full design system: ClassPass Design System

The onboarding journey

By making the onboarding experience more seamless and personalized, such as more targeted questions on users' 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 for a more targeted user experienc.

Because life is too short for complicated scheduling

Optimizing search bar bug and expanding the range of filtering options, including intensity level of fitness and type of fitness activity. This empowers users to easily identify classes aligning to their abilities.

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, enabling activity tracking with friends, easy class invitations, and a feed. Resulting in boosts platform visibility, attracts new users, and strengthens brand loyalty.

The old vs the new

ClassPass's current challenges of visual inconsistencies, non-optimal filtering and search bar bugs, lack of personalization, complex onboarding and scheduling processes. Now with a cohesive design system, an optimal personalized onboarding journey, enhanced filtering options and improved search functionality. 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

UI design | Template | Case study

Upsun digital template: Case study

A solution to centralize all product guides, price sheets, sales collateroclients 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.

Current work | Web/UI design | Case study

Upsun navigation dropdown: Case study

Streamlining Upsun's navigation while maintaining brand personality and identity, ensuring a seamless and cohesive user experience.

Fun Project | Coding | HTML & CSS | Javascript

You Want It? Come and Get It.

A fun side project exploring the concept of yearning for the unattainable: 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 captures the essence of urban life, appealing to the youthful spirit of the city and inspire the next generation of trendsetters and innovators.

Personal Project | Branding | Visual System

Sugar Factory Rebrand

Redefining Sugar Factory's identity with a new, compelling brand narrative highlighting their inventive dishes and interactive aspect. This fresh approach emphasizes the unique, playful, and immersive dining adventures. The goal is to create memories, ensuring that every visit becomes a cherished experience for guests, leaving a lasting imprint of delight and satisfaction.

Problem:

Sugar Factory's current brand identity lacks a cohesive narrative and visual appeal, impacting its ability to effectively communicate its unique, innovative dining experiences and appeal to its target audience of young children and families.

Solution:

A new brand narrative highlights inventive dishes and interactive dining experiences, updating the brand identity while maintaining its playful essence. This includes incorporating vibrant colors, playful typography, and shapes inspired by building blocks to align with Sugar Factory's innovative dishes.

Result:

Sugar Factory enhances its brand perception and appeal, creating a compelling narrative that emphasizes memorable dining adventures. The updated logo and brand elements aligns with target audience and business goals.

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.


Click here to see the full case study.

Current work | Web/UI design | Case study

Upsun navigation dropdown

Streamlining Upsun's navigation while maintaining brand personality and identity, ensuring a seamless and cohesive user experience.

Click here to see the full case study.

Personal project | Mobile app | Branding

HappyHearts

HappyHearts is an innovative tool designed to support children on their mental health journey. Therapists gain invaluable insights into their young clients' experiences, enabling them to assign activities, assess feelings and thoughts, and refine their approach for optimal outcomes.

Problem:

Children lack effective tools to foster emotional awareness and resilience, hindering their ability to navigate life's challenges with confidence, especially as they increasingly spend more time on digital devices.

Solution:

Introducing an app that provides tailored prompts and exercises to cultivate emotional understanding and resilience among young users, leveraging their digital engagement to promote healthier emotional habits. Therapists can also gain visibility and track their progress effectively.

Result:

Empowering children to develop stronger emotional skills, enabling them to navigate challenges more confidently and promoting overall well-being. Therapists benefit from enhanced visibility to ensure support and optimal outcomes.

UI design | Template | Case study

Upsun digital template

Upsun's new versatile digital templates offers a cohesive design language, ensuring consistency across various communication channels, successfully facilitating effective communication with stakeholders and clients.