Muller Toiture
A leaking roof isn't handled like a renovation project: two journeys, one site.
- Year
- 2026
- Design & build
- 4 weeks
- Stack
- Next.js · React · Tailwind · Vercel
- Design
- Development
- Estimating tool
- Local SEO
Demo version put online by Kayzen Web at a Vercel address; the final domain belongs to the client.
- separate journeys
- 2
- questions for an estimate
- 3
- Lighthouse SEO
- 100/100
What needed solving.
The background
Muller Toiture is a roofing company based in Mions, working across east Lyon and Nord-Isère: roofing, zinc work, insulation, moss removal.
The constraint
Two customers with opposite behaviours land on the same site. The one with a leak wants a phone number, right now, often on a Sunday evening. The one thinking about re-roofing wants a ballpark price and will get three quotes over two months. A single journey would have served both badly.
The response
Two separate entry points from the very first screen. A permanent emergency banner with the phone number, visible without scrolling. And, for the second customer, a roof estimator that gives an instant price range based on surface area and roof type. One captures the emergency, the other the long-term intention.
The scores recorded at delivery.
Lighthouse scores for the live site. We publish them as they are: when one is low, its cause and the plan to fix it are set out below rather than glossed over.
Every design choice, and the reason for it.
A permanent emergency banner
A tappable number, always visible, never hidden by scrolling. For a leak, the only metric that matters is the number of seconds between arriving on the site and making the call.
A three-question estimator
Surface area, roof type, condition. The result is a price range explicitly presented as such, with its assumptions. Giving an exact price would be dishonest; giving nothing sends the visitor to the competitor who dares.
Moss removal treated separately
A low-value but high-volume service, often searched for on its own. It has its own page rather than one line in a list.
Project palette
Slate
#39434D
Structure — the colour of the material
Roof tile
#B15A2B
Action
Sky
#EEF3F7
Background
Emergency red
#C0392B
Leak banner only
Type system
Display
Outfit 700
Body text
Inter 400
The emergency red is strictly reserved for the leak banner: an alert colour used as decoration stops alerting anyone.
What's under the bonnet.
- Next.js
- React
- Tailwind
- Vercel
An estimator that runs entirely client-side
The calculation happens in the browser: no server call, no waiting, no personal data collected before the user decides to share it. Contact details are only requested once the result is displayed.
An identified performance job
75 for performance, due to the project gallery. The plan is written: AVIF conversion, srcset and splitting the gallery into pages. The score is public, so it is more useful to explain it than to hide it.
How the site makes itself findable.
Emergency searches and project searches
“Fuite toiture urgence Lyon” (emergency roof leak), “couvreur Mions” (roofer), “prix réfection toiture Nord-Isère” (re-roofing prices). Three intentions, three families of pages: mixing them means ranking for none.
An explicit service area
The towns actually served are listed and marked up. A tradesman who claims to cover “all of France” loses the town-level search, which is the only one that converts.
Usable by everyone.
Since June 2025, the European Accessibility Act has required digital accessibility from a large share of online services. We build it in at the design stage rather than retrofitting it.
An estimator usable by keyboard
Native fields, the result announced in a live region, no step relying on drag and drop.
What was delivered.
- Home — emergency + estimator
- Roofing and zinc work
- Insulation
- Moss removal
- Roof estimator
- Service areas
- Contact
How the project unfolded.
Enquiry analysis
Two profiles identified from the calls received.
Design
Emergency banner, estimator, separate journeys.
Development
Client-side estimator, forms, notifications.
SEO
Three families of pages, service area marked up.
What we are often asked.
More of our work
GDPR compliance & SaaSKonsent by Kayzen
A banner vendor that audits banners is both judge and party: independence was the product.
Offensive cybersecurity & SaaSSentinel by Kayzen
Selling a security product to engineers: every claim had to be demonstrable.
Data & weather serviceMétéo Climat France
358 indexable pages, a map animated over 72 time steps — and not a single line of framework.
The same high standards, for your website.
A free audit of your current site, a quote within 24 hours and written reasoning — like the case study you have just read. Pay in three interest-free instalments; local funding schemes checked before you sign.