Concept project: fictional business

A roofer's site that shows the price before you call

Thornrigg Roofing & Guttering is a fictional family roofer in Leeds, made up to show how we work. Its one-page site is built to turn worried homeowners into free inspection bookings, and to put anyone with a leak on the phone in one tap.

Trade
Roofers
Location
Leeds, United Kingdom
Main goal
Free inspections and leak calls
Languages
EN

Opens the demo site. It's a fictional business, so forms and buttons won't contact anyone.

The brief

A good roofer that looks like all the rest

Thornrigg is a made-up family firm from Kirkstall, Leeds: Mick, who started it in 1998, his daughter Jess in the office and her husband Imran leading the second crew. In our imagined brief, new customers find them on Google Maps next to a dozen other roofers and can't tell who is honest, so they put off calling because they fear the price. The other group can't wait at all: water is coming through the ceiling and they want a person on the phone now. The site had to show fair prices and the work itself, book free inspections, and keep the leak line one tap away, day or night.

Who the page is for

Leeds homeowners, mostly on a phone, who have spotted a slipped slate, a damp patch or a blocked gutter and want a fair price before they ring. And a smaller, urgent group with a leak right now, often in the evening.

Anatomy of the page

Anatomy of a roofing site that gets calls

A Launch site is one long page, so this is the whole site: 13 sections, from the top of a phone screen down.

Thornrigg Roofing & Guttering — Concept project: fictional business
  1. A yellow leak strip above the logo

    “Roof leaking now?” and a call button with the number, before anything else on the page. From 10pm to 7am UK time it changes to “Leaking tonight?” and the button opens a what-to-do guide, because the phone line is closed.

  2. Headline, two buttons and a live status line

    “Leeds roof repairs, done properly the first time.” names the job and the city. Under it: “Book a free roof inspection” and “Call 0113 496 0412”, three short promises (no call-out fee, photos of every problem, price fixed in writing) and a line that says whether the office is open right now. A strip of four facts follows: family-run since 1998, a 10-year guarantee, £5m insurance and same-day leak visits.

  3. From-prices for 8 jobs, and a price estimator

    Eight common jobs in three groups, each with one plain sentence and a “from” price including VAT and waste removal, from £80 for a gutter clear to £6,800 for a full re-roof. Every row has an Estimate button. It jumps to the estimator, where you pick the job and the type of house (40 combinations) and get a price range, the time on site and the guarantee.

  4. A before-and-after slider

    One Hyde Park terrace, three days apart. Drag the handle, or use the arrow keys, to compare. Underneath: what was done, 3 days on site, a final price of £2,480, “same as the written quote”, and a 10-year guarantee. Two more recent jobs follow, each with the area, the time taken and the price.

  5. “Water coming through the ceiling? Do this now.”

    Four plain steps: catch the water, make the electrics safe, take photos for the insurer, then call. It helps someone in a panic and shows the firm knows the job. At night, the call button becomes “Book a first-thing leak visit”, with a countdown to when Jess is back on the phones.

  6. Guarantee, process, the family and sample reviews

    The guarantee lists how long each type of work is covered, next to a sample certificate showing exactly what you get at the end. Then five steps from first call to sign-off, the three people you'd deal with, and four reviews, each clearly labelled as sample content.

  7. Postcode checker, FAQ and a two-step booking form

    Type a postcode and the page says if it's covered, then a button carries it into the booking form. Eight short answers to common questions sit before the form. The form asks about the problem first and your details second, next to the phone number, email, opening hours with today highlighted and the yard address.

Why it gets calls and bookings

Five decisions that turn visits into calls

Prices before the phone call

People put off calling a roofer because they fear the bill. Here every common job shows a from-price, and the estimator gives a range in two taps. Press “Book my free inspection” and the estimate goes with you: the form shows it at the top and fills in the job and the type of house.

The leak line is always a thumb away

The number is in the leak strip, the hero, the emergency steps, the FAQ, the contact box and the footer. On phones, a bar with “Call now” and “Free inspection” sits at the bottom of the screen. It slides away while the hero buttons, the estimator or the booking form are in view, and while you type, so it never covers the form.

Night mode instead of a closed line

The page checks the time in the UK. Between 10pm and 7am, the leak strip, the emergency section and the bottom bar swap their call buttons for “What to do now” and a first-thing leak booking, and the status line says when the office opens. A late visitor still gets help, and the visit still gets booked.

Proof you can see, not a row of stars

In a trade where people worry about cowboys, the site shows the work and the paperwork: a before-and-after slider, three recent jobs with their prices, and a sample guarantee certificate. The reviews are there too, but they aren't the main proof.

A booking form that feels short

Two steps: the problem first, then your details. You choose a two-hour slot, not “sometime Tuesday”, and Sundays, Saturday afternoons and slots less than two hours away are ruled out for you. Pick “Leaking now” in the daytime and the form tells you calling is quicker. A photo of the problem is optional.

Measured scores

  • 88Performance
  • 100Accessibility
  • 100Best practices

Google Lighthouse, mobile, simulated 4G, measured on 19 September 2026. SEO isn't scored: concept demos are deliberately hidden from Google (noindex), which Lighthouse counts against them. Run it yourself on the live demo.

Build notes

  • Hand-written HTML, CSS and JavaScript with no framework: 89 KB of CSS and JavaScript before compression, 23 KB gzipped. No tracking scripts and no cookies.
  • Photos in AVIF and WebP, at two to four sizes each, with a JPEG fallback. Only the hero photo loads straight away; the rest load as you scroll. A phone downloads about 470 KB on first load, fonts included.
  • Source Serif 4 for headings, a solid serif that feels established, and Work Sans for text and buttons. Both are self-hosted, so there are no calls to Google Fonts.
  • Colours taken from a Leeds roof: Welsh slate for text and the footer, Pennine mist for backgrounds, and lichen yellow for the leak strip and the buttons that book or call.
  • Accessibility: a skip link, clear focus outlines, a slider you can move with the arrow keys, price changes read out to screen readers, error messages linked to their fields, and animations off for people who turn on reduced motion.
  • Launch package: this demo is the whole site, one long page in English. A standard Launch site has 8–10 sections and a short enquiry form; the estimator, before-and-after slider, postcode checker and two-step booking form are custom extras on top.
Palette
Typefaces
Source Serif 4 + Work Sans

The package it represents

Launch

This concept is the kind of site you get with Launch: £590 to build, then from £39/month for care. Interactive extras, such as calculators and estimators, are quoted separately.

Websites for Roofers →

Free homepage preview

Want a site like this for your roofing business?

Tell us your business and we'll design how your new homepage could look, free and before you pay anything. No card and no obligation.

  • No card needed
  • Your domain in your name
  • Cancel care any time after 3 months