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
Desktop view of the Mainspring Auto Repair concept. A tall condensed headline reads "Honest repairs. Clear quotes. Back on the road." beside a white line drawing of a car with labeled service points.
Desktop, first screen. Real screenshot of the concept site.

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

  1. 01Make "no surprise bills" visible everywhere
  2. 02Show starting prices for common jobs
  3. 03Show how customers can follow their repair
  4. 04Keep booking short and phone-friendly

On every screen

Designed for phones first

The Mainspring concept on a phone, with the headline and booking buttons.
The repair status example on a phone, waiting for the customer's approval.
Phone, 390 px wide.
The full Mainspring homepage on desktop, with the service menu, repair status tracker and booking form.
Desktop, the whole page. Scroll inside the frame to see it all.

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