.svg)
This case study PDF summarized my design process, user testing & iteration, UI/UX design, and problem-solving.
12 weeks
Sole Designer, Visual and Interface Designer, UX Designer
Front-end & Back-end Developers, Marketing team
Figma, Photoshop, Illustrator
auau.io, 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 auau.io, 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 auau.io to a more user-centered, modern, and aesthetic approach, as the sole designer in the team. The new generation of auau.io was successfully launched in 2022, targeting professional studios in Hong Kong, Taiwan, and Singapore, and Malaysia regions.
auau.io 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.
auau.io 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 auau.io. 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.
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 auau.io, 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 auau.io.
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.
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.
I redesigned the style guide and UI system of auau.io 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 auau.io a new face.
(some typography in the UI are in Traditional Chinese)
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 design was created to enhance the experience on mobile and tablet devices, based on the new Gen 2.0 design system.
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.
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)
colincheng1028@gmail.com
+1 (347) 827 5445
