Swift IdeasElectrician
Benjamin Bailey Electrics
A one-person electrician's site, scored from 25 to 38 out of 40 in our design review.
The hero is one of the client's own jobs: exterior uplighting on a listed building in Forest Row.
Project facts
- Problem
- Our first build for a one-person electrician worked but looked generic: 25 out of 40 in our own design review.
- Approach
- 21 pages Google can list, his own job photos, and design passes until the issues left were content, not design.
- Result
- Live, with the homepage at 38 out of 40 and the service template at 40 out of 40 in our review.
- Client
- Benjamin Bailey Electrics
- Where
- Forest Row, East Sussex
- Year
- 2026
- Status
- Live
- Work
- Local SEO sites, Brand websites
Our role
Built with
Next.js 15 (App Router), React 19, TypeScript, Tailwind CSS v4, schema-dts, Resend, GA4 via @next/third-parties, Vercel Analytics and Speed Insights, Server-side enquiry reporting, IndexNow, node:test, Vercel
The problem
Benjamin Bailey Electrics is one registered electrician with a van. Work comes from local search and word of mouth, and a visitor from Google decides in seconds whether to call. The site had to show who turns up, what he is qualified to do and where he works, before any scrolling.
Three visitors needed different fast paths. The emergency caller needs a phone number now. The homeowner comparing quotes needs proof of real work. The landlord needs an EICR and the paperwork that comes with it.
Our first build worked but looked generic. Our scored design review of the homepage gave it 25 out of 40. It found a left-border stripe on every service card, the default cream background, grey text too faint to pass accessibility checks, and an emergency badge that could not be tapped.
What we did
We built the site as 21 pages Google can list: a homepage, 8 service pages and 10 village pages, each with its own copy, FAQs and structured data that tells Google the business type and the service. Stock images were replaced with the electrician's own job photos in the first week.
We then ran our design review on each page template, pass after pass. Each pass scored 10 standard usability checks out of 4, ranked the issues from critical to minor, and named the fix. We fixed the list, re-scored, and stopped when the remaining issues were content, not design.
After launch we added contact email that shows a reference code if sending fails, Google Analytics behind a consent banner, Google Search Console, a count of enquiries by the page each visit started on, and IndexNow to tell search engines about changes.
Before and after
What we considered
The decisions behind the build, with the reasoning and the evidence for each.
DesignRemove the signs of a generated site first
Visitors cannot name the reasons, but they notice when a site looks like every other template. The first critique listed the patterns, and we removed each one before adding anything new.
- 4px amber left-border stripe on service cards: removed everywhere, 0 instances left
- Default #FAFAF7 cream body replaced by white, with #F5F3EE for alternating sections so the rhythm is visible
- Eight identical service cards became four featured cards and four compact links
- Tracked uppercase eyebrows removed, and em dashes rewritten out of the hero copy
TestingA scored design review instead of taste
Design review is easy to argue with and hard to finish. Our fixed 40-point rubric with prioritised issues made each pass measurable and gave a clear stopping point.
- Homepage: 25 → 32 → 38 out of 40, from 29 May to 1 June 2026
- Service template: 29 → 35 → 37 → 40
- Area template: 27 → 37 in one pass, by sharing the service template's components
- Nine critique reports kept in the repo with scores, priorities and the verdict for each pass
StrategyBuilt for the emergency caller
An electrical emergency is a phone call, not a form. The critique's persona check found that the emergency badge looked tappable but was not, and that the phone digits were hidden on mobile.
- Emergency badge became a tel: link. Emergency red #B8452A is used for emergency actions only
- Sticky mobile bar with Call now and Request a quote, at least 44px tall
- WhatsApp button with a prefilled message, for non-urgent questions
- Hero overlay changed from a flat 80% to a gradient, so the job photo stays visible
AccessibilityText contrast fixed with numbers, not by eye
Light grey labels on a warm background look refined but fail WCAG AA, the accessibility standard for readable text. Each failing pair was measured and replaced with the lightest value that passes.
- #8A8A8A on #F5F3EE measured 3.11:1; replaced with #6B6B6B site-wide
- Area testimonial metadata #6B6B6B on cream measured 4.40:1; replaced with #5A5A5A
- Skip link to the main content, and a 2px navy focus outline on every control
- Reduced motion cuts animation and transition durations to 0.01ms
DesignTwo page templates, one system
Service and village pages have different content but the same job. When they shared hero buttons, anchor navigation, sidebar and FAQ accordion exactly, the critique scored them as one system.
- 'On this page' scroll-spy uses IntersectionObserver with a -20% / -70% root margin
- Sticky sidebar with the quote card follows the reader on desktop
- Mobile navigation starts below 1280px, so desktop nav links never wrap
- Raw hex values moved into @theme tokens: navy, gold, emergency, cream-deep and text levels
ShowHide the other 4 decisions
Search18 unique landing pages with checked structured data
Searchers type the job and the village. Each of the 8 services and 10 villages has its own page, and the JSON-LD is typed with schema-dts so a wrong property fails at compile time, not in Google Search Console.
- Villages include Forest Row, East Grinstead, Hartfield, Groombridge, Coleman's Hatch and Wych Cross
- Electrician (changed from a generic LocalBusiness), Service, FAQPage and BreadcrumbList
- Open Graph image generated with next/og, plus favicon and web manifest
- 21-URL sitemap referenced in robots.txt
ContentReal jobs, real paperwork
A one-person trade wins on proof that he does tidy, certified work. Every photo on the site is from a real job, and each service page ends with what the customer receives.
- Stock imagery replaced with the client's project photos on 27 February 2026
- Project cards name the job and the town, for example a dual consumer unit with RCBO and surge protection in Forest Row
- Service pages list deliverables such as a metal-clad unit to the 2016 fire standard and Part P notification
InfrastructureA contact form that says why it failed
When an enquiry email fails, a silent error loses a job. The form keeps what the visitor typed and shows a short reference code, so the electrician can find the exact failure in the logs.
- Delivery through Resend, with reference codes such as resend-validation_error-<detail>
- Field values preserved on any error
- UK postcode validation with a local example in the message (RH18 5AA)
DataMeasurement a sole trader can read
The owner needs to know which page brought the call. Analytics respects consent, and enquiry counts do not depend on it.
- GA4 through @next/third-parties behind a consent banner, plus Vercel Analytics and Speed Insights
- Contact enquiries counted per landing page in our own monitoring, sending page paths only
- Phone and WhatsApp taps tracked as events
- 9 node:test tests for landing-page logic and enquiry reporting
Colour and type
- Navy#1B3A4BPrimary buttons, headings accents, call-to-action sections
- Navy deep#0D1E28Hero gradient overlay
- Gold#C8873EWarm accent, used sparingly
- Emergency#B8452AEmergency badge and 24/7 actions only
- Cream deep#F5F3EEAlternating section background
- Ink#1A1A1AHeadings, body text and footer
- Text muted#6B6B6BLabels and captions. Replaced #8A8A8A to pass AA
Consumer Unit Upgrades
Bold and semi-bold at -0.5px tracking. A classic serif gives a one-person trade the weight of an established firm.
RCBO per circuit, so a fault in the kitchen does not trip the whole house.
16px body at 1.75 line height for long service explanations. Used for all buttons, forms and navigation.
The build, screen by screen
By the numbers
- Homepage score out of 40 in our design review
- 25 → 38
- Source: Our design review reports, 29 May to 1 June 2026
- Service template score out of 40 in our design review
- 29 → 40
- Source: Our design review reports, 31 May to 1 June 2026
- Muted text contrast, fixed site-wide
- 3.11:1 → AA
- Source: Measured in our first design review, fix confirmed in the project's commit history
- Indexable URLs: 8 services, 10 villages, 3 hubs
- 21
- Source: The live site's sitemap
- Commits from first build to IndexNow
- 38
- Source: The project's commit history, February to September 2026
Where it landed
The site is live at benjaminbaileyelectrics.com with 21 pages Google can list, structured data that tells Google this is an electrician and what each service covers, and a contact form that delivers to the owner's inbox.
The final verdicts in our design review read "Deliberately art-directed local-trade landing page" for the homepage (38 out of 40) and "Genuinely crafted" for the service template (40 out of 40). The village template reached 37 out of 40 after sharing the service template's components.
Measurement is in place for the next stage: Google Analytics with consent, Google Search Console, IndexNow, and enquiry counts per landing page in our own monitoring. Turning the colours and type into shared design settings also made the page components reusable for later builds.