No. 06 · Auto repair
Mainspring Auto Repair
A confident website for an independent garage, with a service menu, a written-quote promise and a live repair status example.
- Classification
- Independent concept
- Business
- Mainspring Auto Repair (fictional)
- Project type
- Single-page website concept
- Year
- 2026
- Type
- Big Shoulders Display, Public Sans
The brief
The brief
Design a website for an independent auto repair shop competing with dealerships and chains. Drivers worry about two things, surprise bills and not knowing when their car will be ready. The site should tackle both head on and make booking a service quick.
Goals
- 01Make "no surprise bills" visible everywhere
- 02Show starting prices for common jobs
- 03Show how customers can follow their repair
- 04Keep booking short and phone-friendly
On every screen
Designed for phones first
The work
The approach
Independent garages win on honesty, so the headline says it plainly: “Honest repairs. Clear quotes. Back on the road.” The type is Big Shoulders Display, a condensed face drawn after the signage of Chicago’s industrial streets. On asphalt black with racing red, it reads like a well-kept garage sign.
The standout section is a repair status example. Customers can step through it: checked in, inspected, waiting for your OK, in repair, ready. It shows a feature the shop could offer, and makes the “we won’t start until you approve” promise concrete.
Decisions worth noting
- Prices with honest wording. “From $59”, with a line saying exact prices depend on the car and are confirmed before work starts. On this concept the prices are samples, and the page says so.
- The approval step is the hero of the tracker. It opens on “Waiting for your OK” with the actual quote, because that’s the moment customers care about most.
- Year, make and model first. These are the three fields a service desk needs, so the booking form asks for them up front.
How it’s built
One static page with a small script for the status example. The tracker marks the current step for assistive technology and announces each update. The car drawing is inline SVG. Fonts are self-hosted.
What would change for a real client
Real prices from the shop, photos of the actual garage and team, a status page connected to their shop-management software, and a booking form that reaches the front desk.
What’s on the site
Features actually built
- Condensed, poster-style headline with high contrast
- Car line drawing made in code, with labeled service points
- Service menu with starting prices in three groups (sample prices, labeled)
- Repair status example that steps through five stages, with live updates for screen readers
- Booking form with year, make and model, and service (demonstration only, nothing is sent)
Palette
- Asphalt
#1C1C1E - Racing red
#D7263D - Chalk
#F2F0EB