← Back to Portfolio
Concept websiteRoofingTrades

Caprock Roofing Co.

Precision · Technical · Engineering-grade

A roofing company positioned as engineers, not door-knockers, with spec sheets, layer diagrams, and blueprint-grid precision that disarm a low-trust industry.

Open the live conceptFictional business, designed to demonstrate range
caprock-roofing.concept, live preview

Live embed of the actual concept site, not a screenshot. Open it full-screen ↗

Overview

The brief we gave ourselves

A concept for a residential and commercial roofing company. Roofing is one of the lowest-trust purchases a homeowner makes: storm-chasers, vague bids and disappearing warranties have trained people to expect the worst. This design's job is to look like the opposite.

The visual language is borrowed from engineering documents: blueprint grid, cobalt-on-white precision, monospaced labels, a seven-layer roof diagram. A sample spec report sits in the hero, because whoever shows their paperwork first wins before price comes up.


Design goals

Every choice had a job to do

Look like engineers, not salesmen

Space Grotesk headlines, Plex Mono labels, a drafting grid and numbered sections (S.01, L.07) frame roofing as a technical discipline — the opposite of the door-knocker.

Lead with documentation

A sample spec report is the hero image. Drone inspections, photo records and fixed-price written specs are the differentiators, so they lead.

Neutralize the storm-chaser stigma

'Honestly, not opportunistically', and a review about telling a customer half the damage didn't need fixing. Naming the industry's bad behavior is the fastest way to signal you're not it.

Make the free inspection irresistible

The inspection is $0 and yields a drone photo report the homeowner keeps either way. One qualifying question, callback within the hour.

Features implemented

What’s actually in the build

  • Blueprint-grid hero with sample spec report card
  • Credential strip (Master Elite, license, roof count, drone inspections)
  • Six-service grid with technical numbering and written-spec promise
  • Interactive seven-layer roof system diagram with hover states
  • Dark 'system' section explaining desert-heat engineering
  • Warranty stat band (25-year, 2-3 day builds, $0 inspections)
  • Four-step timeline process with milestone markers
  • Post-monsoon review cards addressing storm-chaser distrust
  • Free-inspection form with qualifying dropdown

The business problem

Why this design makes money

Roofing is a five-figure purchase in an industry famous for door-knockers: trust, not price, decides who gets the job.

After every monsoon, homeowners are flooded with knocks, flyers and wildly divergent bids. Most roofing websites make it worse — no prices, no process, no proof, just a number and stock photos. The homeowner can't tell the 30-year company from the guy who arrived after the storm.

This design sells verifiability. Spec documents, layer diagrams, photo records and a manufacturer-backed warranty all say the same thing: everything we do is written down and checkable. In a low-trust industry that converts the skeptical majority the door-knockers scared off.


Design gallery

The system up close

Before & after

The typical site vs. the concept

Before: the typical roofing website
  • Indistinguishable from storm-chaser flyers
  • Bids with no scope, no spec, no proof
  • Stock shingle photos, zero documentation
  • Warranty claims nobody can verify
  • Homeowner decides on price alone
After: the concept
  • Engineering aesthetic signals verifiability
  • Sample spec report shown before contact
  • Seven-layer system makes expertise visible
  • Manufacturer-backed warranty front and center
  • Free drone report reframes the sales call

“Before” shown as an illustrative placeholder, on a real engagement this is your current website, and the numbers that change with it.