Concept case study · Fictional UK roofing business
Building a roofing website that explains the work before asking for the enquiry.
The project explores what a substantial professional website for a UK residential roofer can look like when service clarity, project storytelling and homeowner questions shape the structure from the beginning.
It was researched, positioned, structured, written, designed, developed, checked and deployed as a complete concept—not as a claim that a fictional business has generated leads or completed real roofing work.
Opens the live, permanently noindex fictional concept.
Disclosure
Rookstone Roofing is a fictional business created as a website demonstration. It is not a client, does not trade and has no commercial results. Its roofing projects, business details and supporting imagery are illustrative.
Project facts
Project snapshot
- Project type
- Self-initiated concept project / fictional business demonstration
- Sector
- UK residential roofing
- Fictional geography
- Stockport & South Manchester
- Scope demonstrated
- Research, positioning, content strategy, information architecture, responsive design, development, accessibility/QA and production deployment
- Website depth
- 15-page content structure
- Core content
- Six service pathways, three fictional project scenarios, process, areas and quote demonstration
- Evidence boundary
- No client, trading, lead, revenue, ranking or conversion outcomes
01 / The problem
Show how a roofing website can do more than list services and a phone number.
Homeowners often arrive with a symptom: a leak, damaged slate, an ageing covering or a recurring flat-roof problem. They may not know the service name, whether repair is possible or what happens after they make contact.
At the same time, a roofing-business owner may have real knowledge and useful project photographs but no owned website that organises them clearly. The design problem was to create a credible customer journey from the homeowner’s question to relevant information, visible work and a straightforward next step.
Because the company is fictional, the project also had a strict credibility constraint. It could not use fake reviews, accreditations, ratings, guarantees, insurance claims or trading history. The site had to feel substantial while remaining transparent about what was illustrative.
02 / Start with homeowner decisions
Research shaped the structure before visual design began.
The research reviewed common UK roofing-site patterns, the kinds of proof established contractors publish and the questions homeowners need answered. It also separated useful market patterns from unsupported causal claims: a feature appearing on an established roofer’s website does not prove that the feature caused commercial success.
The strategic direction became problem-first, proof-heavy and process-transparent. Visitors should be able to begin with what they have noticed, understand the difference between a focused repair and broader replacement, inspect detailed project scenarios and know what the fictional quotation process would involve.
Strategy principles
- Use homeowner language alongside roofing terminology.
- Prefer a small number of substantial project stories to a context-free gallery.
- Explain repair-versus-replacement reasoning without diagnosing remotely.
- Treat process transparency as a trust feature.
- Create local relevance without mass-produced location pages.
- Use visible concept disclosures instead of allowing fiction to be mistaken for proof.
03 / Structure and content
Fifteen pages form one connected customer journey.
The architecture includes Home, Services, Projects, About/How We Work, Areas Covered and Request a Quote, plus six service-detail pages and three project-detail pages.
The homepage introduces likely roofing problems and guides each one toward useful content. Service pages explain symptoms, assessment considerations, repair or replacement context, work stages and common questions. Project pages show the initial problem, the scenario decision, scope, work sequence and completed illustrative state. Related links connect those layers rather than leaving each page isolated.
Key content decisions
- Six focused services instead of a very long list of thin pages.
- Three project narratives: a local slate/chimney-detail repair, a full pitched-roof replacement and a flat-roof replacement.
- Coherent before, problem/progress, detail and completed imagery for each fictional project.
- Clear labels on every project card and detail page identifying the scenario as fictional.
- A persistent top-of-page concept disclosure and a fuller footer disclosure.
- Plain UK English, restrained claims and no artificial urgency.
04 / Visual and implementation decisions
Let the roofing work carry the visual interest.
The visual system uses strong editorial hierarchy, architectural composition, restrained colours and project imagery grounded in recognisable UK residential settings. It avoids generic software-style dashboards, decorative gradients and meaningless icon grids.
Reusable page patterns keep service and project content consistent without making every section identical. The implementation uses a modern Next.js application structure, responsive image handling and shared components for navigation, disclosures, buttons, content sections, project stories and calls to action.
The live concept is deployed independently in production and remains permanently non-indexable. Its metadata prevents indexing and archiving, Google-specific controls prevent image indexing, and robots.txt disallows crawling.
05 / Responsive, accessibility and QA
A professional presentation still has to work under real conditions.
Layouts adapt across mobile and desktop, with contact actions and navigation kept usable on narrow screens. The implementation includes semantic page regions, heading structure, a skip link, labelled navigation and controls, descriptive image alternatives, keyboard/focus handling and accessible form feedback patterns.
The quote demonstration validates and reviews information in the interface while making the fictional boundary explicit. Nothing entered is transmitted, emailed, stored or used to notify anyone. Completion messaging confirms that no submission took place.
QA covered the coherent behaviour of shared page patterns, key journeys, responsive layouts, content disclosures and indexing safety before production deployment. This describes the work performed; it is not a certification of universal accessibility or compatibility.
06 / What the project demonstrates
Evidence of craft and process—not evidence of client results.
Rookstone demonstrates the ability to move from sector research to a detailed content model, build a substantial responsive website and preserve honest boundaries throughout the experience.
Demonstrated capabilities
- Turning sector and customer research into a usable sitemap.
- Organising technical services around customer questions.
- Building substantial project storytelling rather than an unexplained image gallery.
- Designing a coherent visual system for content-heavy pages.
- Implementing reusable, responsive page patterns.
- Creating a clear and accessible enquiry journey.
- Handling fictional proof, visitor data and indexing responsibly.
- Preparing and deploying a complete production demonstration.
Evidence boundary
The project does not demonstrate leads, revenue, search rankings, conversion improvements or customer satisfaction. No roofing company commissioned it and no homeowner used Rookstone to obtain real roofing work.
The concept is a starting point for a conversation, not a template to copy unchanged.
A real roofing website would use the client’s services, geography, process, genuine project work and approved proof. The Rookstone concept shows the level of thought and execution available; discovery determines what is appropriate for the actual business.
View the roofing demo (external fictional concept site)