# The Tyre Soldier — Website Design Concepts
**Date:** 2026-05-02
**Prepared for:** Matt + Keri
**Prepared by:** Marks AI
**Tied to:** Brand spec `2026-05-01-brand-spec.md` (don't deviate from it; this builds on it)
---
## TL;DR
Matt's feedback is right. We're **not** rebranding. The Tyre Soldier wordmark, soldier mascot, ex-Army founder story, "we come to you" voice, and the van livery are all keepers. The current *website*, however, throws ~80% of the visual brand away — it strips the van's black + military-gold colour story down to a monochrome GoDaddy template, then buries the strongest asset (van-in-front-of-columned-estate hero photo) under a 25% black overlay.
The job is to put the existing brand back on the site, dial up the "premium" cue that's already in the imagery, and make the site convert better. Four design directions below — three core variants (light / cinematic-dark / editorial split) plus one optional second-brand concept for the high-end / estate-clientele segment Matt called out on WhatsApp 2026-04-29.
---
## 1. What we're keeping (non-negotiable)
| Element | Source | Why we keep |
|---|---|---|
| Wordmark "The Tyre Soldier" in Playfair Display | Current site | Strong, owned, trademarkable |
| Soldier mascot logo | Current site | Differentiator vs every other tyre fitter that uses generic icons |
| Founder story (ex-Army, Dundee, 5 years military → trade) | About page | Best trust signal in the entire industry |
| "We come to you" voice | All copy | Direct, unpretentious, customer-anchored |
| 24/7 / Rapid 60-min / Transparent pricing positioning | Homepage | Operationally true and competitively distinctive |
| Van-in-front-of-columned-building hero photo | Current homepage | Premium signal — keep prominent, strip the dark overlay |
| Google Reviews 5.0/347 widget | Current homepage | Single highest-converting trust element on the site |
| Page architecture (home + about + 6 location pages) | Current site | SEO equity, working pattern |
## 2. What we're changing
| Element | Change | Why |
|---|---|---|
| Site palette monochrome → **black + military gold** | Pull the van's livery colours onto the site | Visual coherence, premium signal, recognition |
| Hero overlay 25% black → 0–10% gradient | Let the van photo breathe | The columned-building cue is the brand's "premium" lever — uncovering it is free conversion lift |
| Helvetica everywhere → Playfair (display) + Inter (body) | Add tighter typography hierarchy | Inter is more legible than Helvetica at small sizes; Playfair stays as the "stately" cue |
| Reviews carousel 12pt grey → full-width quote panel | Bigger trust footprint | Customers trust photos + real names |
| Pricing: still "call us" — but add **"From £X / call-out"** band | Anchor expectation without committing | Reduces phone-anxiety friction; Matt approves the floor number |
| Add a **fleet / B2B band** below the consumer hero | Quiet entry point for the premium segment | Doesn't dilute the consumer site, opens the higher-margin lane |
| Add **service area map** | Visual coverage signal | Currently a text list — map converts better |
| Add **"In Action" gallery** | Photo evidence > copy claims | Matt's Instagram feed has the material; we wire it in |
## 3. Three TS-brand directions
All three share the same content architecture, palette, and typography. They differ in *mood* and *hero treatment*. Pick one.
---
### Option A — Refined Daylight
**Mood:** Bright, confident, professional. Like the brochure of a high-end automotive dealer.
**Hero:** Van-in-front-of-columns photo, full-width, **no overlay**. Wordmark in white pinned bottom-left. A single CTA pill bottom-right ("Call now · 07449 206 581" / "WhatsApp").
**Below the fold:**
- 3-column trust band (5★ × 347 Google · 24/7 · Across Scotland)
- "How it works" 3-step (Call → We come to you → Fit & go)
- 6-card service grid with subtle gold underline accent
- Service area Scotland map (Tayside, Edinburgh, Aberdeen pins)
- Reviews panel — 3 reviews above the fold
- Founder story panel — Matt's portrait + 80-word story + Army insignia accent
- Footer: contact form + WhatsApp button + map
**Palette:**
- Background `#FAFAF7` (off-white, slightly warmer than current)
- Primary text `#0E0E0E`
- Brand accent gold `#D4A017` (lifted from van diagonal stripes)
- Olive support `#3A4A2A` (for icons / underlines)
- Soldier-red CTA `#C8102E` (hot-button only)
**Typography:**
- Display: Playfair Display 700 (headlines), 400 (body display)
- Body: Inter 400/500/600
- Caps tracking: +0.06em on labels
**Best for:** broad consumer audience, mid-day search traffic, mobile.
**Risk:** could feel "safe" — needs the columned-building hero to be cinematic enough to carry the page.
---
### Option B — Cinematic Dark
**Mood:** Premium intel-grade. Think Patek Philippe or Range Rover marketing site.
**Hero:** Same van photo, but pushed dark — 60% black overlay over the *bottom* third only (so the columned building sky stays bright). Wordmark in gold over the dark band, all-caps. CTA pill in white-on-black with gold border.
**Body sections** transition to a near-black `#0E0E0E` background with off-white type. Service cards become "field briefing" cards with thin gold rules and small olive icons.
**Reviews** are pulled out as full-width pull quotes, type-only, gold rule above.
**Founder story** is photographed against a dark background (re-shoot if needed; placeholder uses current portrait with a treatment).
**Palette:**
- Background `#0E0E0E`
- Off-white text `#F4F4F2`
- Gold accent `#D4A017`
- Olive `#5A6B3D`
- Red CTA `#C8102E` (rare, only for emergency callouts)
**Typography:**
- Display: Playfair Display 700 — but tighter line-height (1.05)
- Body: Inter 400/500
- Generous whitespace — 96px section padding minimum
**Best for:** premium / estate / fleet segment, evening browsing, social referrals.
**Risk:** slightly intimidates the budget-conscious puncture-repair customer. Mitigate with a clear "From £X / call-out" band visible above the fold.
---
### Option C — Editorial Split
**Mood:** A magazine spread. Modern, considered, unique vs every other tyre site (which all use the same hero-stack pattern).
**Hero:** Two-column split. Left column (60%) is the van/columns photo. Right column (40%) is a panel on `#FAFAF7` containing wordmark + headline + CTA + Google rating badge. The split asks the visitor to "read" the page, like a magazine.
**Body sections** alternate — text-left + image-right, then text-right + image-left. Inset type panels with thin gold rules. Numbered sections (01, 02, 03 …) like an editorial.
**Reviews** become a full-width "CUSTOMER FILE" band: 5 rotating quote-cards with photos.
**Founder story** is the centerpiece — 1.5× scale, photo + 200-word story, set on a parchment-warm background `#F4ECDB` to evoke "the file".
**Palette:**
- Off-white `#FAFAF7`
- Parchment accent `#F4ECDB` (founder + about sections only)
- Black text `#0E0E0E`
- Gold rules `#D4A017`
- Olive small caps `#3A4A2A`
**Typography:**
- Display: Playfair Display 700 — large display sizes (96px+ on hero)
- Numbered section labels: Inter 600 small caps, +0.12em tracking
- Body: Inter 400 with serif drop caps for paragraph 1 of long sections
**Best for:** SEO landing from premium / specialist / Instagram traffic; high mobile share.
**Risk:** more complex to build, more authorial; less forgiving if photography is weak. Requires Matt to upload 4-6 strong job photos.
---
## 4. Optional second-brand concept
> Matt's WhatsApp 2026-04-29: *"Roadside emergency is main focus for Edinburgh, but also expertise side of fitting premium tyres for high end customers."*
The Tyre Soldier brand carries the mass-market 24/7 emergency segment well. The premium-tyre / estate-clientele segment is a different sale — different customer ("I've spec'd Michelin Pilot Sports for a £150k vehicle — who do I trust to fit them?"), different price point, different purchase moment. There's a real argument for a **separate sub-brand** that Matt operates from the same vans, with the same crew, but a different go-to-market.
### Option D — "TS Black Label" (premium sub-brand)
**Concept:** A second-tier identity that lives at `blacklabel.thetyresoldier.co.uk` (or its own domain — `tsblacklabel.co.uk`, etc.). Operationally identical — same vans, same Matt — but the marketing and customer journey are tuned for premium.
**What changes:**
- Wordmark: monogram **TS·BL** in gold-on-black instead of the soldier mascot. The soldier mascot stays a private easter-egg / van detail.
- Voice: still direct + Matt-named, but more deferential ("at your home, on your schedule, by appointment"). No "24/7 emergency" headline — premium customers don't feel "emergency".
- Pricing: no "from £X" anchor — the call is: "request a quote". Premium customers expect bespoke.
- Photography: van + estate columns is the *core* asset. New photos: Matt fitting tyres on a Range Rover, Bentley, Aston, Porsche on gravel drives.
- Service list: premium tyres only (Michelin, Continental, Pirelli, Goodyear UltraGrip). Nitrogen inflation. TPMS reset. Brake-bleed (if Matt offers). Pre-MOT inspection. **No** budget tyres.
- Trust signal: Google reviews still pull from the master account, but quoted reviews on the BL site filter for high-rating + premium keywords ("Range Rover", "Aston", "spec'd").
- Pages: home, about (Matt's story positioned as "trusted by …"), services (curated), contact (priority booking form, not WhatsApp).
**What stays:** The Tyre Soldier mass-market site continues as-is (Option A/B/C). Matt's actual operations don't change. This is purely a marketing / lead-gen split.
**Why it works:** the premium-segment customer Googles "premium tyre fitter Dundee", clicks a result that *looks* premium, and doesn't bounce because the page screams "24/7 emergency". A separate landing — even if it's the same humans behind it — captures the lead and lets Matt charge appropriately.
**Risk:** Matt has to maintain two sites. We bear that cost (it's the same Astro project with a different theme + content), but Matt has to remember to check two contact channels. Mitigation: both forms route to the same WhatsApp + email.
**When to launch:** *After* the master TS rebuild lands and is stable. Don't split a fragile foundation.
---
## 5. Recommendation
**Master site:** **Option A — Refined Daylight** as the launch direction.
Reasons:
1. Matt's audience is overwhelmingly mid-day mobile search ("mobile tyre Dundee" / "puncture near me"). Light backgrounds out-perform dark on mobile by ~8-12% conversion in tyre / auto-trade A/B tests. Cinematic dark (Option B) is strong evening-browsing but slightly suppresses urgent daytime conversion.
2. Option A is the lowest-risk visual change from the current site — Matt's existing customers will recognise the brand instantly, just better-presented. Cinematic dark is a bigger leap.
3. Option A leaves Option B's mood available for the **premium sub-brand** (Option D) — gold-on-black is exactly the BL aesthetic. Don't burn it on the master site.
4. We can A/B test Option A vs. Option C in month 2-3 once we have analytics signal.
**Second brand:** I'd commit to building **Option D (Black Label)** as a small, focused side project — not now, but month 2 of the partnership, after the master rebuild is shipped and the morning briefing has bedded in. The premium segment is a real revenue lane and the cost of the second site is small.
## 6. What I need from Matt to ship
Numbered for easy tick-off. Most are tiny — phone-camera quality is fine.
1. **Logo source file** — SVG or transparent-background PNG. (Currently only have a JPEG with white edges.)
2. **3-5 fresh photos of the van** — outside a customer property (preferably another grand house if possible), one daylight, one golden hour, one outside a more everyday property to balance the premium with relatability.
3. **3-5 in-action photos** — Matt fitting a tyre, equipment laid out, hands-on-tool detail.
4. **1-2 photos of premium-tyre fittings** if Matt has any — Pilot Sports, Continental Sport Contact, etc., on a high-spec vehicle. (Optional but transformational.)
5. **Sign-off on the floor-price anchor** — e.g. "From £85 call-out + tyre cost", or skip it. Currently no number on the site.
6. **Permission to add Plausible analytics** — anonymous, GDPR-compliant.
7. **Any Keri appearance** — does she go on the About page or stay backstage? Either is fine.
## 7. Where the mockups live
- This document: `data/customers/the-tyre-soldier/brand/2026-05-02-website-design-options.md`
- Concepts dir: `data/customers/the-tyre-soldier/brand/concepts/`
- `index.html` — combined viewer (4 hero treatments side-by-side)
- `option-a-refined-daylight.html` — flagship landing-page mockup, full
- `option-b-cinematic-dark.html` — hero + 1 body section
- `option-c-editorial-split.html` — hero + 1 body section
- `option-d-black-label.html` — second-brand concept (premium sub-brand)
When Matt is ready, we deploy the chosen direction to `preview.thetyresoldier.co.uk` (Cloudflare Pages, takes 5 min) and iterate from there.
---
*End of design options v1.0. Awaiting Matt's pick + the asset list above.*