01
What every service includes
Five big lines, and the one in the middle of the screen lights up with its detail while gauge ticks down the edges track your scroll.
Kwikstert Motor Works
Concept project: a fictional business, not a client
A concept site for a car workshop, built so drivers know the price before they book.
- Project
- Car service workshop, Strand (concept)
- Built with
- Next.js, TypeScript, Scroll-driven motion, Vercel
- Concept site at
- kwikstert-motors.vercel.app
The brief
Kwikstert Motor Works isn't a real business. I made it up to show what I'd build for a workshop, panel beater or tyre fitter. Drivers dread surprise bills and upsells, so every part of the page answers that worry with proof (a written quote, the old parts handed back) and leads to one action: book a service.
- A job card that fills in with the price and time as you pick your car and service
- The visit as a rev counter that fills while you scroll, step by step
- A booking form prefilled from the price you picked, and a quick start from the last screen
- Privacy, terms and PAIA pages, as a real South African business needs
What I built
02
Prices that fill in a job card
Choose a car size, a service and any extras, and the job card adds the lines and counts the total. Its button carries those choices straight into the booking form.
03
The visit on a rev counter
The steps from drop-off to collection hold still while an orange needle sweeps the dial, so a driver sees the whole day before booking.
04
Proof the work was done
A strip of the worn parts the workshop hands back slides past as you scroll. On a concept site the reviews are labelled as samples, never passed off as real.
Made for the phone first
Most visitors arrive on a phone, often on mobile data. Every screen is designed for a thumb first.
