Kingdom Exterior Cleaning – Website Design & Development

Project Overview

Kingdom Exterior Cleaning is a domestic and commercial exterior cleaning business based in Kidderminster, serving homes and businesses across Worcestershire and the wider West Midlands. Their services span window cleaning, gutters, fascias and soffits, roofs, pressure washing, driveway and patio restoration, conservatories and commercial shopfronts.

They needed a website with one clear job: turn local searches into enquiries. Someone searching "gutter cleaning Kidderminster" should land on a page about exactly that, see proof that the work is good, and pick up the phone or fill in a form. The business also had an archive of more than 500 job photos sitting on a phone, and no way of getting them in front of customers.

Client Goals

• Rank locally for every service: A dedicated, search-optimised page for each of the eight services, plus location pages for the towns they cover.
• Let the work speak for itself: Turn a large, unsorted photo archive into a filterable gallery with genuine before and after comparisons.
• Make contact effortless: Phone, WhatsApp, email and a quote form available from every page, on every device.
• Content the owner can run from the van: Add photos, write up jobs, edit page copy and update business details from a phone, without calling a developer.
• Protect customers' privacy: Photos of real homes must never leak location data onto the public web.
• Measure what matters: Track calls, WhatsApp messages, emails and form submissions as leads, not just page views.

Approach and Solutions

1. Next.js 16 with a Headless Sanity CMS

The site is built on Next.js 16 (App Router) and React 19, hosted on Vercel, with Sanity as the headless CMS. The Sanity Studio is deployed to Sanity's own hosting rather than bolted onto the website, so the editing tool stays up even during a redeploy and there is no admin surface attached to the public site.

• A deliberately small content model: Seven content types (services, locations, pages, gallery items, case studies, reviews and site settings) with named fields that match the design, rather than a free-form page builder. The owner can change what the site says without being able to break how it looks.
• Publish and it is live: Every page is statically generated and every content fetch carries a cache tag. When something is published in the Studio, a signed webhook tells the site exactly which pages to rebuild, so changes appear within seconds rather than waiting for a timer or a redeploy. The webhook signature is verified before anything happens, so nobody else can trigger rebuilds.
• Built for the future: The review schema uses the same field names as Google's Places API, so connecting live Google reviews later is a simple sync rather than a migration.
• Safe launch content: Every page was seeded with draft copy so the site could be built and tested against realistic text from day one. Each document carries a "needs review" flag surfaced as a filtered view in the Studio, and placeholder reviews carry a flag that stops them rendering in production at all.

2. Design System and Brand Identity

The visual identity is built directly from the company's logo and van livery: a deep navy (#1C2947), a logo-exact gold (#BB9D67) and a soft silver-grey, with a crown motif and a gold swash used as the signature brand devices.

• Tailwind CSS v4 with the design tokens defined once in a CSS-first @theme block. Colours and fonts are the only extensions; spacing, radii and breakpoints stay on Tailwind's defaults so the system stays predictable.
• Typography pairing: Montserrat for headings and the wordmark gives a confident, premium tone; Source Sans 3 handles body copy for comfortable reading at 17 to 19px.
• Accessibility built into the palette: Gold is never used as small text on white. A darker gold tone is reserved for text, and a dedicated mobile accessibility audit covered landmarks, tap target sizes (WCAG 2.5.8) and contrast across every page.
• Gold "stamp" buttons with action-led labels ("Get a quote", never "Submit"), and a live "Open now" status pill driven by the opening hours held in the CMS.

3. A Shared Service Template

All eight service pages are built from one template that takes content as props: a hero with the service's own photograph, a plain-English explanation of what the work involves, a sticky quote panel with the service pre-selected, recent jobs pulled from the gallery, and an FAQ accordion.

Because the template makes each extra page almost free, services that overlap (pressure washing and driveway restoration, for example) each get their own page, scoped clearly and cross-linked so they support each other in search rather than competing for the same terms.

4. From 533 Phone Photos to a Working Gallery

The photo archive was the heart of the project, and getting it online safely was the biggest single piece of work.

• Location data stripped: Sampling found that 39 of 40 photos carried GPS coordinates accurate to a customer's address. A custom import script strips all EXIF metadata before any image reaches the public CDN.
• Optimised on the way in: Originals straight off the phone were 4000x3000 and averaged 4MB. Capping them at 2560px and converting to WebP cut the archive by 82%, and Sanity's image CDN then serves each visitor a correctly sized version for their device.
• Automatic tagging and pairing: Photos are tagged by service from the folders they came from, and photos from the same day are split at the largest gap in the timestamps to find genuine before and after pairs. Where the split is clean, the item renders as a comparison with a Before/After toggle; everything else publishes as a normal photo rather than being blocked.
• Custom Studio tools: After watching screen recordings of the owner trying to organise his photos, I built three custom actions into the Studio to pair, split and swap photos in one step, with a thumbnail picker showing every candidate from the same day and service.

The result is a gallery of more than 370 real job photos, filterable by service, with a lightbox and before/after comparisons, where every image is genuinely the company's own work.

5. Contact, WhatsApp and Lead Capture

Every route to the business is one tap away.

• Persistent header contact: Click-to-call number, a WhatsApp button and a "Get a quote" button on every page, with a compact call button on mobile.
• WhatsApp-first quoting: Customers are encouraged to send photos of the job by WhatsApp for a faster, more accurate quote, which suits how the business actually works.
• A robust enquiry form: Server-side validation, a honeypot to filter out bots, and clear success and failure states. If anything goes wrong, the form never pretends otherwise; it tells the visitor and offers the phone number instead.
• Reliable delivery: Enquiries are sent through Resend from the company's own verified domain, signed with DKIM so they land in the inbox rather than spam. The existing business email was left completely untouched throughout the DNS work.

6. Lead Tracking and Analytics

Google Tag Manager feeds GA4 with four lead events: form submissions, phone taps, WhatsApp taps and email taps. Links are matched by type rather than by the specific number or address, so tracking keeps working when the owner updates his phone number in the CMS, and even covers contact links he writes into page copy himself. Unit tests guard the event names, because a renamed event would silently stop reporting.

7. SEO and Technical Foundations

• LocalBusiness structured data generated from the CMS, including opening hours and the towns served
• Per-page titles, meta descriptions, canonical URLs and Open Graph images
• Automatically generated sitemap and robots file, with Google Search Console verified
• Location pages for each town covered, linking to the services offered there
• Semantic HTML with a clean heading hierarchy, and smooth page transitions using React's View Transitions
• Restrained, CSS-driven scroll animations with a capped stagger, so content never feels slow to arrive
• An automated test suite (Vitest) covering analytics, enquiries, gallery pairing, SEO, structured data, the sitemap and the design tokens

Results and Impact

• A site that sells the work: Every service now has its own page, and every page is backed by real photographs of real jobs, which is exactly the kind of proof that converts in a trade built on trust.
• Privacy handled properly: Hundreds of photos of customers' homes went online with all location data removed, protecting both the customers and the business.
• Full ownership of content: The owner can add photos, pair before and afters, update services and change business details from his phone, with no developer involvement for routine updates.
• Every lead counted: Calls, WhatsApp messages, emails and form enquiries are all tracked, so the business can see which pages and services are generating work.
• Fast and low maintenance: Static pages, on-demand revalidation and a global image CDN keep the site quick on mobile data, with no servers to manage.

Summary

Kingdom Exterior Cleaning now has a production-grade, lead-focused website that reflects the standard of work the business is known for. Built on Next.js 16, React 19, Sanity, Tailwind CSS v4 and TypeScript, with a privacy-first photo pipeline, a filterable before and after gallery, custom CMS tools, multi-channel contact and full lead tracking, the site gives a local trade business a polished, credible presence and a content system the owner can genuinely run himself.