A concept brief for a premium UK roofing trade selling itself to architects and listed-building owners. Built end-to-end to show the work — live client work shown on request.
Penmark is a concept brief for an eleven-strong roofing crew based outside Cirencester — pitched tile, natural slate, lead and zinc detail, warm flat extensions, working on listed homes and parish buildings across the Cotswolds. The category problem: roofers' sites are gallery-walls of finished photos that say nothing about what's actually under the tile. The brief: a site that an architect can spec from, that shows the system not just the surface, and that filters past tyre-kickers before the phone rings.
Get architects onto the call sheet. Filter out the tyre-kickers.
The four specific calls that defined this build.
Every roofer's homepage is a photo of a finished roof. Penmark leads with an interactive scroll-driven cross-section that dismantles the roof as you scroll — clay, batten, membrane, rafter, insulation — each layer named and specced. Architects can see how the firm thinks before they pick up the phone.
Most premium trades quietly hide their lead times. Penmark states them on the homepage: '9 weeks. Foreman picks up.' Filters out clients who need next Tuesday, signals confidence about the queue.
NFRC, CompetentRoofer, TrustMark, insurance — most sites bury these on an 'About' page nobody reads. Penmark runs them as a single-line strip above the call-to-action, where they actually do the trust work.
Standard contact forms get spam. The Penmark enquiry asks for the address, the building age, the suspected problem, and the access constraints. Real surveys go on the schedule; cold leads drop out.
Every tool chosen on purpose, with a reason that beat the obvious alternative.
Project case-study pages stay fast as the portfolio grows. ISR on the index revalidates when a finished job lands.
The exploded-roof hero is the whole differentiator. Built with useScroll + per-layer useTransform on inline SVG — no canvas, no video, no surprise weight.
Foreman writes new project entries from site after a finished job. Three fields plus a body block — nothing nobody fills in.
Survey requests drop into a Notion board, an SMS pings the foreman if marked 'emergency'. No CRM overhead.
Git-driven deploys. Office edits go through PRs the developer reviews.
Cookie-free, dashboard fits on one screen. Tracks which projects pull the most architect time.
The numbers a real engagement would be scored on.
Like this for your business?
