2025 Feb-Mar
Fitness
B2B/2C
Product design
Automating a gym booking system for personal training
Building B2B/2C solutions with JTBD and various UX methods
My role
UX research
UX design
Deliverables
Develop a UX solution for a gym booking system used in personal training sessions
Challenges
Clarify detailed product requirements in B2B/2C context
Project process
1
Model product services by JTBD, user flow and system context diagrams
2
Define requirements by use case, functional flow and content model
3
Define a framework with a detailed site map
4
Refine product services with wireframes
This project was assigned in a product UX design camp where individuals developed their own product UX solutions. I used this project to consolidate the use of different UX methods from modelling, requirements definition to framework definition and reinforce my analytical thinking towards earlier phases in product design.
Modelling product services
A gym booking system to be automated
According to provided interview records and personas, a gym owner would like to automate the booking system for personal training sessions due to a load of tedious administration work caused by booking changes. The goal was to resolve this troublesome issue and to enhance the effectiveness and efficiency of bookings.
Use JTBD framework to analyse needs and touchpoints
In order to examine the user needs from the aspects of different roles, Jobs-To-Be-Done framework was applied to the project. While the project has a focus on enhancing business effectiveness, customers’ needs were still considered as they were also the users of the booking service.
Touchpoints, marked in yellow below, were thus developed based on these user needs.
Create a user flow
According to the touchpoints, a few mandatory services were highlighted before the swimlane diagram below was created to present a user flow with three types of user roles (member, trainer and administrator).
Draw a system context diagram
To imagine better how the booking services could work, I created a system context diagram and reviewed the interactions between account management, booking system and admin management.
Defining requirements for Training Session Booking
Image how the booking system works
After shaping the idea about how the whole systems should work together, the focus was shifted into the core system-booking system. Another diagram was used to define the details of the information requirements. This revealed the interactions between different users (member, trainer and administrator) and the system.
Then Claude.ai was used to generate the requirement details for the booking system which can be used by developers to understand the product scale and verify relevant technical requirements.
Use Case : A trainer books a training session
Writing a detailed use case helped me to further define the booking flow. One of the use cases is specified below:
Prerequisites
Members must have a Line account and register as members either independently or through invitation
Trainers must have accounts in the booking management system
Administrators must grant trainers booking management and contract management permissions
Members must purchase training contracts on-site at the gym, and trainers must register the contracts in the system to activate them before session booking can proceed
Select Booking Type
Single Booking: Book one session at a time
Batch Booking: Book multiple sessions at once, up to all remaining sessions in the contract
Select Member Contract
The default display shows "Booking Requests" contracts. Trainers can use filter functions by selecting "New Contracts," "All Individual Contracts," or "All Duo Contracts" to find members.
"Booking Requests": Contracts where members have submitted session time requests. These are daily priority items for trainers, sorted by member application time with earliest requests listed first
"New Contracts": Contains activated contracts that haven't been scheduled yet, sorted by contract number
"All Individual Contracts" and "All Duo Contracts": Sorted by contract number
Select Time Slot
When members have submitted booking requests:
Trainers don't need to select time slots
When trainers schedule sessions proactively:
Single Booking: Directly select available dates, time preferences, and times
Batch Booking: Set start date, number of sessions, frequency, and time slots. The system will pre-allocate time slots. When reviewing booking venues, individual session times can be edited
If system-allocated time slots differ from preference settings, this will be displayed at the top of the page
Select Venue
When members have submitted booking requests:
Trainers only need to confirm member-requested time slots and proceed with venue allocation, or leave venue allocation to the system
When trainers schedule sessions proactively:
Single Booking: Directly select available venues
Batch Booking: After selecting cardio area frequency preferences, the system will pre-allocate venues. When reviewing booking venues, individual session venues can be edited
If system-allocated venues differ from preference settings, this will be displayed at the page top
Complete Booking
Trainer schedules will be updated
System will send booking confirmation information to members:
Members can receive booking information on Line
Members can find booking information after logging into the system
Special Modifications
Cancel Session:
After trainer cancellation, the system will automatically send messages to members and administrators
Request Contract Termination:
Trainers must submit an application to administrators
Refining booking flows with functional flow diagrams
Based on the use case, two functional flow diagrams were used to refine the flow and review the whole flow designed for booking a training session and a self-training session.
Book a training session
Book a self-training session
Content Modelling
Before creating site map for the project, I used content modelling as a method to examine the whole booking system from the aspects of information architecture and data field design.
Framework Definition
Use site map to scale the product services
In the phase of creating the site map, the work was focused on:
deciding which informative and functional sections should be presented on a page
how to merge the designed flows into the product blueprint
how to clearly direct the designed product service
Refining Product Services
Create wireframes to implement UX design
This is one of the most exciting parts of the project where I finally got close to the product protype. The wireframes were created for the use case: “A trainer uses batch booking to book training sessions for members bounded with new duo contract.” The whole process of requirements and framework definition enabled me to create high-fidelity wireframes with clear annotations.
Takeaways
Practice UX thinking in a constructive way
I used quite a few diagrams in the project to ideate, analyse and refine the product requirements, which helped me a lot later to have a clear view over the UX design process. This also made me reflect what I could have done better in my earlier projects.
Explore alternative methods to communicate with stakeholders
The diverse approaches applied to the project inspired me to explore different approaches to communicate and coordinate product requirements with stakeholders.