Case Study

This case study PDF summarized my design process, user testing & iteration, UI/UX design, and problem-solving.

or just view in web

SaaS Redesign:
Cloud-based Scheduling


12 weeks


Sole Designer, Visual and Interface Designer, UX Designer

Team Member

Front-end & Back-end Developers, Marketing team


Figma, Photoshop, Illustrator, a cloud-based business management software and online scheduling platforms for sport and fitness SMEs. It integrates appointment scheduling, payment processing, CRM, and promotion into a unified system. The lack of user-centered experience, intuitive interaction, and modern UI were the primary concerns of the product.

From analyzing the original design of, wireframing new concepts, receiving feedback from users, and collaborating with developers; I redesigned the design system, interaction, user flow, information architecture, and visuals of the front-end model and mobile app of to a more user-centered, modern, and aesthetic approach, as the sole designer in the team. The new generation of was successfully launched in 2022, targeting professional studios in Hong Kong, Taiwan, and Singapore, and Malaysia regions.


The System is a cloud-based business management software and online scheduling platform for sports and fitness SMEs. Core functionality of the original product supports sport instructors or institutes to create personalized company websites equipped with student booking capabilities.

Interaction model (figure below) shows the logic and interaction behind the Instructor’s Dashboard (Back-end) and Instructor’s Website (Front-end). My responsibility was mainly focused on designing the Front-end model of the system.


The Problem Space was first launched in 2019, however, the lack of user-centered experience, intuitive interaction, and modern UI were the main concern of the first generation of Some of the key issues are as follow:

(Home Page)  The initial design of the Home Page was focused on the needs of the instructors, but it lacked user-friendliness for their customers. Dense arrangement of information enabled quicker access, but sacrifices its usability and visuals.

Users disliked the "profile" appearance of the webpage and desired a more “webpage” webpage.

(Calendar)  Information was often overwhelmed due to the instructor's busy class schedule. Page layout was disrupted, resulting in inconsistent design compared to other pages.

(Class Booking)  The Class Booking page displays daily class offerings. The vertical reading layout of class selection conflicted with user navigation and scannability, reported in a high error rate. Resulted in unintentional or wrong-day class bookings.

(Private Appointment)  Instructors frequently rejected private appointments from students due to user errors caused by an ineffective filter system and booking process.

The page did not indicate instructor’s available time slots. When a student request an appointment, the instructor had to manually approve or deny the proposed time. The system's lack of intuitiveness and inherent flaws clashed with user expectations.

To redesign the design system, usability, user flow,
and information architecture to a more user-centered, modern, and aesthetic approach.

Design Goals ::

Maintain functionalities of the original design, and avoid dramatic changes that might confuse veteran users.

Redesign interactions to meet with user’s expectation and mental model, becoming more human-centered, easy-to-use.

Restyle the outdated UI to meet modern aesthetics, making it more adaptive to fit with different instructors’ content.



After analyzing the original design of, uncovering its usability issues, and receiving feedback from direct users, I created new concepts and produced wireframe prototypes of the front-end website for the new generation of


Usability Testing

Understanding User’s Reading Pattern
As described in Section 1.2, I assumed that the vertical reading layout of class selection on the Class Booking page conflicted with user navigation, leading to an increase in the rate of human errors and wrong-day class bookings. Additionally, I presumed that users would prefer a horizontal reading layout for better readability.

I created two different prototypes, Version A and Version B, to conduct A/B testing with direct users to validate my initial hypothesis.

(Version A) Inherited the vertical reading layout from the original design. Equipped with my new design language.

(Version B)  Redesigned to a horizontal layout that is normally used in modern websites such as Expedia, Airbnb.

“My assumption was partially wrong”

The task was measured by the time a user spent finding a targeted class and the human error rate. It was conducted individually with B2C users (customers). Although both new & veteran users agreed that the new design, Version B, improved overall readability, there is a portion of veteran users who would stick to the original design, Version A, inheriting from their Gen 1.0 habit.

(Final Version)  To balance the needs of new & veteran users, I included both Version A & B in the final design. Version B was set as the default status based on the results of A/B testing. Additionally, I implemented a toggle switch, allowing all users to change their view according to their preference.


Final Design

I redesigned the style guide and UI system of into a more user-friendly, modernized website template - to feel clean, energetic, and healthy, applicable to equip with different sport instructors’ content. Fixed former usability issues; created additional concepts and features that users demand to give a new face.

(some typography in the UI are in Traditional Chinese)

Booking System Redesign

The original design of the booking system contains several usability problems, such as a high error rate among users, mismatching with users’ reading pattern, and cognitive overload when booking.

Responsive Layout

Responsive design was created to enhance the experience on mobile and tablet devices, based on the new Gen 2.0 design system.

Launch  🚀

In collaboration with the engineering teams, the generation 2.0 was launched in early 2022, targeting professional studios in Hong Kong, Taiwan, Malaysia, and Singapore.

Business Results

  • Achieving 33.3% of market share in the sector in 2022

  • Apple Store / Google Play app global launch

  • Targeted industry expansion. Gen 2.0 new adaptive design supports all service-based industries (sport, arts, salon, beauty, etc)