Alder Dental, Online Booking

The brief and the build

Brief: Let a patient book a specific slot in under a minute on a phone. Pick a service, pick a day and an open time, leave details, and get a clear confirmation.

The flow is three short steps with a progress indicator that marks the current step for assistive technology. Services show their duration and price up front, days skip weekends, and taken slots are disabled and struck through rather than hidden, so patients can see the day is busy and not that something is broken.

Choices stay in state when you go back, focus lands on the new step’s panel each time, and validation errors are attached to their fields. The confirmation repeats the details so the patient can screenshot it. A production version would swap the slot generator for the practice’s scheduling API.

Light is a friendly clinic style. Dark is a calm, editorial layout with a sidebar heading. Creative is a bright, sticker-style take.

Results

• Problem: Patients who would not phone during working hours left, and the old contact form gave them no confirmation.
• Built: A three-step booking flow: service, day and open time, then details, ending in a confirmation that repeats the booking.
• Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 1.0 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
• Weight: page, stylesheet and script total 10.1 KB (4.0 KB gzipped). The script alone is 6.4 KB (2.5 KB gzipped).
• Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
• Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs score 96 and 96 for accessibility (100 in the other three categories); the gap is colour contrast.

Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.

Stack

Highlights

• Three-step flow
• Unavailable slots
• Inline validation
• Mobile-first
• Progress indicator