Bookingandservicemanagementsystemforpersonaltrainers

3 min. read
Reducing page load time from 6 s to 0.3 s
purchase path simplified by 50%
Design and layout that build authority
Tech stack
Next | Sanity | Tailwind | Typescript | Zustand
Hero section of project

Challenge: Eliminating sales bottlenecks

The client came to me with an existing website that was holding the business back: it took up to six seconds to load, had flaws in the purchasing journey (such as a non-intuitive shopping cart), and featured a chaotic list of services. Instead of trying to optimize a site built on a heavy template, I proposed developing a new system from scratch using modern technology to ensure lightning-fast performance.

Service data redundancy problem

Największym wyzwaniem była optymalizacja oferty. Usługi różniły się głównie liczbą jednostek treningowych, co tworzyło nieczytelny gąszcz.

Duplicated services differing only in the number of training sessions

New user flow

Proces zacząłem od rozpisania ścieżki użytkownika (User Journey). Musiałem stworzyć balans: z jednej strony strona musi sprzedawać, z drugiej – budować autorytet trenera.

Service purchase path on the old website (7 steps)
New service purchase path (4 steps)

Visual style

I combined "medical" precision (nutritional expertise, professionalism) with modern, lifestyle-oriented sports. The website wasn't meant to be flashy, but rather to inspire trust.

Moodboard – a blend of sports and medical authority

Iterations

The project was developed in consultation with the trainer at every stage—from wireframes to the selection of photos—to ensure the website’s look and feel perfectly aligned with his brand. Below are a few sections showcasing the established style

"About Me" section on the homepage
Configurator on the service page
Customer-convincing section

Technology, data security, and performance

I built the site using Next.js and Sanity, achieving near-perfect PageSpeed ​​Insights scores. However, the most significant technical challenge was integrating the payment gateway and ensuring the protection of sensitive data (GDPR compliance).

Highest PageSpeed ​​Insights scores

Optimizing service variant management

When building the service configurator, I deliberately opted for a flat data structure rather than complex nested logic. Although this requires assigning a separate price to each of the 16 variants (locations × packages), I chose this model to ensure system predictability and the security of payment data. For a personal training business, a "flat" system is resilient against logic errors, gives the owner full control over pricing via the Sanity dashboard, and eliminates the risk of unexpected price changes—making it a safer and more maintainable solution than even the most sophisticated code.

Variant management system (number of training sessions + location)

Scalability

I designed the architecture with the future in mind—the system allows for the addition of further variants (e.g., trainers) at any time as the company grows.

Encryption of sensitive data

To view order data, the trainer must call a dedicated decryption function via the API (triggered by a button). This ensures that customer information remains secure, even in the event of a database leak.

Business independence

I developed a system that allows the trainer (or their SEO specialist) to change prices and add new service packages or categories at any time, without requiring a programmer's intervention. This gives the client complete independence in managing their service offerings.

Other projects

Hero section

Crane rental system

2 min. read

A “construction-style” look based on a visible grid.
Customized offer management panel