Custom booking flow · Integration
Pentagon Detailing
A hand-coded site with a custom multi-step booking flow built into the product rather than bolted on — matching the brand pixel for pixel and carrying no third-party widget fees.
- Year
- 2025
- Role
- Design + development
- Skills
- Figma · JavaScript · Tailwind CSS · API Integration · Netlify
01 / Problem
Bookings stuck in phone tag
Pentagon Detailing ran a quality operation with a booking process that didn't match it. Every appointment started as a phone call or DM, followed by back-and-forth about vehicle type, packages, add-ons, and timing. After-hours enquiries went cold — and the obvious off-the-shelf fix, an embedded scheduling widget, would have meant a monthly fee and an interface that looked nothing like the brand.
02 / Solution
A booking system built into the site, not bolted onto it
I designed the brand experience in Figma first — dark, glossy, automotive — and hand-coded it into a fast, responsive front end. The centerpiece is a custom multi-step booking flow: pick a vehicle, choose a package, add extras, pick a slot. Pricing updates live at every step, so customers reach the confirmation screen already knowing the cost.
Because the flow is custom-built rather than an embedded third-party widget, it matches the brand pixel for pixel, sends structured data straight through to the studio, and adds no recurring cost.
- Brand-forward UI designed in Figma
- Custom multi-step booking flow with live price summary
- Structured booking requests instead of free-form calls
- Fast, responsive, hand-coded front end on Netlify
03 / Outcome
Structured bookings around the clock
Booking requests now arrive complete — vehicle, package, add-ons, preferred time — ready to confirm in one reply. The site captures after-hours leads the phone used to lose, with no scheduling subscription in the stack.
- Custom booking flow, no widget fees
- Complete requests, no phone tag
- After-hours leads captured