Skip to content

RoofingFictional residential roofing business · Queensland, Australia · by Dhruv Mohapatra

Turning a gallery page into a free inspection request

A roofer with years of good work and a homepage that is mostly a photo slider, with no obvious way to ask for an inspection.

Mock case study. The business is fictional, and its “before” website was built by Loomino to show problems common on local trade websites. Names, logos and phone numbers are placeholders. No real client or results are involved: this shows design judgement, not a client outcome.

01 · The “before” website

Where it started

Mock outdated roofing homepage on desktop, showing the three problems described alongside
The same mock roofing homepage on a phone: the fixed-width layout shrinks to fit and the text becomes tiny
Built by Loomino to represent common problems on local trade websites. Fictional business. Open the “before” website

02 · What gets in the way

Three problems

  1. 1

    The first screen is an auto-rotating slider

    Five large images rotate every three seconds with short slogans. Nothing on the first screen says what the business offers or how to get in touch.

  2. 2

    No low-commitment first step

    The only call to action is “Contact us”. Homeowners who are unsure whether they need a new roof have no easy reason to make contact.

  3. 3

    Credentials are invisible

    Licence details, insurance and workmanship warranty appear only in the footer, in low-contrast grey text.

03 · The redesign

Redesigned hero, desktop and mobile

The redesign leads with a free roof inspection offer and moves the project photos to support it, instead of replacing it.

Open the live concept
Desktop · 1440 px
Mobile · 390 px

04 · Design decisions

Why it looks the way it does

A single, still hero with one offer

The slider is replaced by a clear headline and a free inspection form. Motion was removed entirely from the first screen.

Credentials next to the call to action

Licence, insurance and warranty are shown as short plain-text facts beside the form, where the decision is actually made.

Storm damage treated as its own path

A distinct link for storm damage and insurance claims serves the most urgent visitors without cluttering the main offer.

05 · Page architecture

Proposed site structure

  1. Home

    Book a free inspection

    • Hero with inspection form
    • Credentials
    • Services
    • Recent projects
    • Storm damage
    • Service area
  2. Roof restoration

    Explain the main service

    • Process
    • Materials
    • Before-and-after photos
  3. Storm damage

    Urgent and insurance-related work

    • What to do first
    • Insurance claims
    • Call now
  4. Projects

    Proof of workmanship

    • Project gallery by suburb
  5. Contact

    Every contact method in one place

    • Inspection form
    • Phone and hours
    • Licence details

06 · Measured results

Performance and accessibility

Lighthouse scores for the concept implementation, not the original site.

mobile

Performance
100
Accessibility
100
Best practices
100
SEO
63

SEO: The only failed SEO check is the noindex tag, set deliberately so concept pages are never mistaken for a real business in search results.

Lighthouse 12.8.2, production build served by Cloudflare Pages dev server, mobile emulation with simulated throttling · 15 September 2026

desktop

Performance
100
Accessibility
100
Best practices
100
SEO
63

SEO: The only failed SEO check is the noindex tag, set deliberately so concept pages are never mistaken for a real business in search results.

Lighthouse 12.8.2, production build served by Cloudflare Pages dev server, desktop preset · 15 September 2026

Want this kind of thinking applied to your site?

Request a free homepage concept. It’s sent privately, and there’s no obligation.