Why Not Fitness – 2024
Designing a Streamlined and Transparent Booking System
My Role
Design Lead
Timeline
8 weeks
Team
Web Developers
Responsibilities
UI/UX Design
User Flow
Component Library
Responsibilities
UI/UX Design
User Flow
Component Library
Overview
WhyNotFitness, a busy gym with both in-house and freelance trainers, relied on Google Sheets to manage space reservations. This manual process was error-prone, time-consuming, and hard to maintain, resulting in frequent issues like double-bookings and incorrect credit tracking.
The goal was to replace this outdated system with a custom booking solution that would:
-
Eliminate errors and streamline the booking process.
-
Provide an intuitive and user-friendly interface for trainers.
-
Support the gym’s unique needs, such as priority access for in-house trainers and credit-based bookings for freelance trainers.
-
Offer bilingual support (Traditional Chinese and English) for its diverse clientele.
-
Be scalable to accommodate future growth and include light/dark mode for 24/7 usability.
Thr Problems
By investigating how trainers and admins handled bookings, we gained a deeper understanding of the challenges they faced. Here’s what we discovered:
-
Outdated and Error-Prone System
-
The gym relied on Google Sheets to manage bookings, a manual, inefficient process prone to errors like double-bookings and incorrect credit tracking.
-
Admins spent significant time manually updating and verifying bookings, which reduced overall efficiency.
-
-
Complex Booking Rules
-
In-house trainers (full-time and part-time employees) had a four-month booking window with priority access.
-
Freelance trainers had to purchase credits in-store to book spaces, with a one-month booking window. Credits were tied to specific gym areas and couldn’t be mixed.
-
-
Lack of Clarity and Feedback
-
Without a clear and intuitive system, users struggled to understand how to book spaces or check their credit balances.
-
The absence of real-time updates and clear feedback led to confusion and mistakes, such as overbooking or selecting unavailable timeslots.
-
Exploring Solutions and Establishing Design Principles
After identifying the biggest opportunities, we tested various design options to determine the most effective solution.
To guide our exploration, we established the following principles to ensure the system’s success:
-
Progressive Disclosure – Presenting information in stages to help users stay focused on their current task without feeling overwhelmed.
-
Keep Options Visible – Ensuring users can easily find what they need without unnecessary steps or hidden controls.
-
Proactively Prevent Errors – Providing real-time feedback and preventing users from selecting unavailable options.
-
Offer Meaningful Contextual Help – When errors occur, messages guide users toward the next step rather than merely pointing out mistakes.
Why This Matters
These problems created frustration for users and inefficiencies for the business:
-
Trainers wasted time navigating the manual system, leading to lower satisfaction and reduced engagement.
-
Admins were overwhelmed with manual updates and error resolution, taking time away from other critical tasks.
-
The gym’s ability to scale and serve a growing clientele was severely limited by the outdated system.
The Goals
01
Eliminate errors and reduce manual work
-
Automate the booking process to prevent mistakes like double-bookings and incorrect credit tracking.
-
Minimize the need for manual updates and verification by admins.
02
Provide a streamlined and intuitive booking process
-
Create a user-friendly interface that makes it easy for trainers to book and manage reservations.
-
Ensure clear communication of booking rules and real-time feedback for users.
The Goals
The core issue was the lack of a system to eliminate errors, reduce manual work, and provide a streamlined, intuitive booking process. To address this, we focused on two key goals:
Identifying User Types and Their Roles and Responsibilities
To ensure our solutions addressed real user needs, we began by identifying the different types of users and their corresponding roles and responsibilities within the booking process.
User Flows
We then designed and mapped user flows tailored to each user type, aligning with their roles and responsibilities. This process helped us identify key areas where thoughtful design could simplify complexity and enhance the user experience.
The biggest opportunity lay in providing clarity throughout the booking process, ensuring users could easily understand and complete each step.
01
The Problems and the Goals
Options appear progressively, allowing users to select the relevant date and timeslots.
Credits update dynamically, with a review section providing a quick summary of selected timeslots. Since users can book multiple slots across different days, they can easily deselect choices without having to navigate back through each selection manually.
To reduce complexity, we limit the options displayed to the user. Since freelancers can only book up to 30 days in advance, the calendar only shows available dates within this range. This approach is more intuitive than a typical calendar with back-and-forth navigation, making the booking process clearer and more efficient.
Dynamic Credit Updates – Users can clearly see their remaining credits in real time. If credits run out during booking, clear next steps are provided.
02
Our Approach
Selection Review – A summary of chosen timeslots helps users feel confident in their selections.
When unadjusted, using the same font size as in English with the same line-heights result in the Chinese text looking more condensed and cluttered.
04
Design System
Bilingual Considerations
Traditional Chinese and English are fundamentally different language systems, requiring distinct sizing and spacing adjustments for optimal readability.
-
Size & Alignment – At the same font size, Chinese characters generally appear larger than English text. Unlike English, which aligns to a baseline, Chinese characters require adjusted vertical spacing to avoid a dense, cluttered feel.
-
Italic Styling – Chinese lacks a true italic style. What is often mistaken for italics is actually a forced slant, which looks unprofessional. This needed to be clearly communicated to developers, as even designers may not always be aware of this limitation.
-
Design Tokens – To accommodate these differences, we established separate design tokens, enabling seamless switching between languages while maintaining proper sizing and spacing.
-
Type Scale Formula – We implemented a consistent type-scale formula with set multiples, along with different line-height multipliers, to ensure appropriate spacing in both English and Chinese.
Summary
The booking system minimizes errors by keeping users focused on their tasks rather than complex rules. Features like real-time credit updates, clear selection reviews, and helpful error messages ensure a smooth and intuitive experience.
Light and Dark Modes
Color contrast behaves differently in light and dark themes:
-
On a light background, higher contrast is acceptable.
-
On a dark background, excessive contrast can cause eye strain, so adjustments were made for a more comfortable reading experience.
We carefully fine-tuned contrast levels to ensure readability and a visually balanced experience in both modes.
By making the necessary adjustments, the typesetting looks more professional and much more readable, enhancing usability.
05
The Layouts
Gallery
06
Results
This project reinforced the importance of simplicity and clarity in creating a user-friendly booking system. By hiding complexity, providing real-time feedback, and ensuring accessibility, we delivered a solution that is intuitive and efficient for all users.
Looking ahead, we plan to:
-
Gather user feedback and make iterative improvements.
-
Explore additional features, such as mobile app integration and automated credit purchasing.
07
Reflection and Next Steps
Handoff
I then provided component specifications in Figma using Auto Layout for easy dev translation.
I also coded the tokens and a fluid typescale using CSS clamp (with the help of this awesome tool as reference) to allow the font sizes to change dynamically according to the screen width.
Next Project
01
Progressive Disclosure with a Clear Step-by-Step Process
After logging into the booking system, freelancers can easily see their remaining credits for the corresponding spaces and follow a structured, step-by-step process to book a space. For the Full-time and Part-time trainers, the process is more straight-forward without the credit system.
02
Keep Available Options in View
From selecting a space, date, and time to reviewing choices, all options remain visible—never hidden under dropdown menus. This intentional design choice reduces unnecessary steps, making access to options quicker and more intuitive.
03
Proactively Preventing User Errors
We designed the booking system to keep the focus on selecting timeslots, not on navigating complex rules.
04
Provide Meaningful Contextual Help
Error messages are designed to guide users toward solutions rather than simply pointing out mistakes.
Improved Efficiency
Admins reduced time spent on manual updates and error resolution by 50%.
Higher User Satisfaction
100% of trainers reported increased confidence in the booking process and found the system easy to use.
03
Our Solution
Go Home
Next Project