Consultation Forms

For this project, I developed a greenfield multi-step booking form designed to replace Microsoft Bookings, streamlining the consultation scheduling process. This system intelligently preloads available user details collected earlier in the enquiry funnel, reducing friction and improving user experience. The form ensures that consultations are booked at a pre-defined location set during the enquiry stage, ensuring consistency in the booking process. Additionally, an upcoming release introduces location flexibility, allowing users to select a nearby gym if their chosen location belongs to a cluster grouping, such as within London. This enhancement not only improves convenience but also increases conversion rates by providing users with more accessible options without disrupting the overall flow.

Landing on the page

You can access this page through one of two entry points: either via a link on the thank you page immediately after submitting an enquiry on the website or through a link sent via email from Bloomreach. This link is generated by our backend service, which securely stores client details and ensures access is restricted to those with a unique individual code.

Upon arrival, the system communicates with multiple backend services, primarily Microsoft Bookings, which returns a raw payload containing all available time slots for trainers at the specified location. The frontend then processes this data, organising each day's availability and presenting the selectable time slots in a user-friendly format. Once a user selects a preferred date, they can proceed seamlessly to the next step in the booking process.

Selecting your time

Once a date is selected, clicking "Next" advances you to the time selection screen. Here, users must choose an available time slot before proceeding. If they wish to change their selection, they can easily return to the previous screen using the back button in the top left corner. This step ensures that users have full control over their scheduling preferences while maintaining a smooth and intuitive experience.

During development, we identified a pattern in user behaviour—many users frequently navigated back and forth between the date and time selection screens before making a final choice. To address this, we designed and trialled an alternative variation featuring a combined date and time selector, prioritising the three earliest available slots to streamline decision-making. Although this feature is still in testing, early insights suggest it could reduce friction and improve efficiency by presenting a more unified and intuitive selection process.

Confirm your details

After selecting a date and time, clicking "Next" takes the user to the final confirmation screen. Here, they are prompted to review their pre-filled details, provide a phone number, and, if applicable, agree to necessary consents before completing the booking.

To maintain data integrity, this page implements Zod validation, ensuring that user inputs meet the required data types and formats. These Zod objects also define the application's typing structure, ensuring consistency between the data handled in the frontend and the data expected by the API. This approach reduces errors and streamlines communication between services.

Before finalising the booking, a pre-check is performed against the selected time slot by fetching the latest availability to prevent conflicts. If the chosen slot is no longer available, the user receives a notification and is given the option to reselect a date and time, while all previously entered details remain intact to minimise disruption. (See below)

Save the date

After successfully creating a booking, the confirmation page provides a comprehensive summary of the appointment details. This includes the selected date, time, and location, ensuring users can easily review their booking at a glance. Additionally, a Google Maps link is provided, allowing users to quickly navigate to their chosen gym with ease.

To enhance convenience, the page also offers the option to download an ICS file directly from our servers. This file contains all the booking details in a standard calendar format, enabling seamless integration with personal scheduling tools such as Google Calendar, Apple Calendar, and Microsoft Outlook. By incorporating this feature, we ensure that users can effortlessly keep track of their appointments without needing to manually input the details.