Car repair shop: a 3D “where it hurts” guide

Car owners usually know the symptom, not the cause: a knock at the front over bumps, a squeal when braking. A shop can rarely quote a price over the phone before it has seen the car.

We built a demo for a fictional repair shop to show how a website can suggest, before an inspection, what may be wrong and where the repair cost starts: pick what is wrong and see the likely causes, a starting price and how long the job takes. The mechanic gives the exact price after inspecting the car.

The first screen is a see-through 3D model of a car. Pick one of 15 symptoms or tap a part right on the model: the camera flies to it and a card opens with the causes, a starting price and the timing. There are eight parts, from the engine and timing chain to the clutch and gearbox.

For the suspension and the timing chain we added explainers driven by mechanics formulas, using a simplified model rather than a specific car's specs: wear out the shock absorber and watch the car keep bouncing after a bump, or stretch the chain and see the valve timing drift.

Where the browser allows it, the 3D scene renders in a separate thread (Web Worker), so the 3D scene gets in the way of scrolling and buttons less. The scene code is 212.6 KB gzipped; the car model, scene lighting and texture decoder load separately, about 5.6 MB more. While they load, and if WebGL is unavailable or the model fails to load, a still image takes the model's place, and the symptom list and cards keep working.

Booking is a form on the site: requests land in the admin panel and reach the owner in Telegram. The owner edits part names, symptoms, causes, prices and timing in the admin panel. A new part on the model is separate work, since the model itself has to change. The site has two language versions, each with its own fictional business: Phase in Kaliningrad in Russian and Phase Garage in Columbus, Ohio, in English.