[01]Case study
RenoPlumb
A three-person plumbing team in London needed a website that converts panicking homeowners into calls. I didn't just build them a site — I walked them through four design directions, let them react, and shaped the final product from their expertise about how customers actually behave.
- Role
- Design & engineering
- Stack
- Next.js, Tailwind, Framer Motion, PostHog
- Live
- renoplumb.co.uk
[02]The process
Design as conversation, not deliverable.
Mo, Maj, and Mabs have 35 years of combined trade experience but no tech background. The process needed to be visual, interactive, and led by their instincts about their customers — not by my assumptions about what a plumbing site should look like.
[--]Discovery
Sat down with Mo, Maj, and Mabs. Listened to how customers actually contact them — what they say, what they're feeling, what questions they ask first. Every call starts the same way: describing the problem.
[--]Moodboards
Explored four brand directions: Clean & Confident, Bold & Direct, Warm & Approachable, Premium & Refined. The team gravitated toward blue — water association, trust, professional but not corporate.
[--]4 concepts built
Built four fully interactive prototypes, not static mockups. Each concept was a complete page with real interactions so the team could feel the difference, not just see it.
[--]Client review
Walked through each concept on Mo's phone (how most of their customers would find them). The Problem-Solution concept got an immediate reaction — it matched how their business actually works.
[--]Refinement
Took the winning concept and folded in the strongest elements from the others: the availability indicators from Integrated Trust and the credential display patterns from Classic Trust.
[--]Production build
Next.js with Tailwind, Framer Motion for the diagnosis flow transitions, PostHog for conversion tracking on every form interaction. Deployed on Netlify with an SEO roadmap for 25+ area pages.
[03]Brand directions
Four colour and typography directions to find the right register.
Before touching layout, I explored how the brand should feel. Each moodboard set a different emotional tone — the team could compare them side by side and react to colour, type, and energy without worrying about structure.
[04]Four concepts compared
Built four interactive prototypes. Let the client's instincts pick.
Each concept was a fully working page — real interactions, real responsive behaviour, tested on Mo's phone. Not Figma screens. The team could feel each direction, not just see it.
A. Classic Trust
Safe but undifferentiated
Professional and credible, but nothing to distinguish it from any other plumbing site in London. The pattern works — it just doesn't differentiate.
B. Integrated Trust
Modern but missed urgency
The team asked where customers would tell them what's wrong. That question reframed the entire approach — the site should start with the problem, not the company.
Chosen direction
C. Problem-Solution
Chosen direction
Immediate recognition from the team. This matched how their customers actually call — they always describe the problem first. The UX mirrors the real conversation.
D. Speed & Locality
Data-strong but emotionally cold
The area-specific response data and structured lead capture were strong for SEO. Some locality elements made it into the final direction, but the concept was too analytical for emergency users.
[05]What was built
The winning concept, enriched with the best of the others.
[--]Diagnosis flow
Interactive problem selector with conditional follow-up questions. Routes to WhatsApp (pre-filled with diagnosis context), phone, or email based on urgency and user preference.
[--]Dynamic hero
Background images crossfade on problem selection. Solution chips appear with staggered animation. The page responds to what the user is telling it.
[--]Portfolio gallery
Before/after slider component with category filtering — boilers, bathrooms, drains, emergency. Real photos from the team's jobs, not stock.
[--]Trust system
Gas Safe badge, 5-star rating (17 verified Google reviews), insurance coverage, 24/7 availability with animated pulse dot. Trust signals appear at decision points, not just in a header strip.
[--]SEO foundation
Structured data (LocalBusiness, FAQ, BreadcrumbList), dynamic OG images, robots/sitemap, and a documented roadmap for 25+ borough-specific area pages.
[--]Analytics
PostHog event capture on every diagnosis step — problem selection, question answers, channel choice. Gives the team visibility into what problems drive the most enquiries.
[06]The result
What shipped.
[07]How I guided the decision
Research, opinion, and proof — not just “what do you prefer?”
Working directly with tradespeople who run their own business means you're talking to the stakeholders, the operators, and the domain experts all at once. They know their customers better than any survey — but they don't know UX patterns, conversion psychology, or what their competitors are doing wrong.
My job wasn't to ask “which one do you like?” — it was to research the competitive landscape, bring data on what works in emergency service UX, build concepts that tested distinct hypotheses, and then give my honest opinion backed by reasoning. I steered them toward Problem-Solution because the research supported it, but I built all four so they could feel the difference themselves and buy in with confidence.
After launch, I didn't just hand over and walk away. I instrumented every step of the diagnosis flow with PostHog — problem selection, each follow-up question, which contact channel they choose. The data validated the approach: people are completing the full diagnosis and sending pre-filled WhatsApp messages with their problem context. The plumbers arrive knowing what they're walking into.
That's the loop: competitor research shapes the concepts, domain expertise from the client shapes the direction, opinionated design steers the decision, analytics after launch prove it worked. Not just delivery — validation.