The task
A car owner asks two things first: what it costs and what it will look like afterwards. The site had to answer both before anyone picks up the phone.
The workshop takes wheels by the set and prices the work by job type and rim size, so a plain list would have been a wall of numbers. It had to become something a visitor can use in a couple of clicks and get one figure out of.
What we built
The first screen names the price
The opening screen says the service, the city and the starting price, and adds where the workshop is and how long a set takes. Two buttons: work out the cost, or look at the work.
The phone number and the working hours stay in the header on every screen, so a visitor who is ready to write does not have to scroll to find them.
The price calculator
The calculator is a table: job types down the side, rim sizes across the top. Tap a cell and the figure appears under the table with an enquiry button beside it, so the price and the next step are in the same place.
Under it the services are listed one by one, each with its own starting figure and a line saying what that figure covers: one colour, two colours or a rim line, diamond cutting, straightening, welding, local restoration, polishing, calipers, tyre fitting.
The work gallery, before and after
Finished wheels are shown in a grid, and the before-and-after pairs have a handle you drag across the frame. The caption says the colour, the job and the rim size.
This is the part that answers the second question. Somebody choosing a colour sees it on a wheel instead of on a swatch, and sees what the same wheel looked like when it arrived.
From inspection to handover
The job is laid out as steps from inspection to handover, so the visitor knows what happens after they write. The site asks for a photo of the wheels, which is all the workshop needs to name a price and a date.
Every screen has a way out to WhatsApp, Telegram or a call, and the contact block also takes a phone number for a call back. The enquiry goes straight to the workshop, with nobody in between.
Under the hood
Under the page sit the price table, the route an enquiry takes to the workshop, and what was measured on the live site.
Enquiries
One price table for the site and the bot
The calculator counts the price from the job type, the rim size, the condition of the wheels and the extras.
The enquiry lands in Telegram
A small server-side service turns every call-back request into a readable message and sends it straight to the workshop's Telegram chat, where it is read at once.
The form filters out spam
A hidden field catches automated submissions, and the number of enquiries from one address and one phone number is limited.
A separate bot for booking
Beside the form there is a Telegram bot that takes a booking step by step and keeps the state of the conversation.
Speed
The gallery loads as you scroll
There are 75 photographs on the page, and 60 of them are fetched only when the visitor reaches them.
Search
Written the way people search
In the SEO section of Lighthouse the page scores 100 out of 100 on mobile and on desktop.
Mobile version
The page on a phone
On a 390-pixel screen the page fits its width with nothing to scroll sideways, and the calculator button is 275 by 52 pixels.
Reliability
The connection is encrypted
A request over plain http is redirected to https, and the browser is told to use https for the next two years.
On a phone
What came out of it
- Leads come straight from the site, no middlemen
- The price is known before anyone calls
- Every service has its own figure and its own explanation
The site now handles the first conversation. A car owner sees the price for their rim size, finds a colour in the gallery, sends a photo and gets a date back. What used to be a long exchange in a messenger now starts with the answer already given.
