How Brightcurrent was made

01Palette — the meter box at night

The whole page is argued from what an electrician actually sells: clean current in a dark enclosure. Graphite is the workshop and the switchboard cabinet; porcelain is switchgear housing and carries every line of body copy; amber is the energised conductor — reserved for lines, marks, the primary CTA fill and display-size figures, never small copy; blue is the neutral/data side — secondary buttons, form focus, the cold half of the circuit diagram.

Two inks were derived per the collection's line/ink split: raw #3D7BD9 measures ~4.1:1 on graphite, so links and small blue text use #8FB4EE (~8:1) while the raw blue keeps to strokes and fills. Amber passes contrast on graphite but stays out of small copy by rule — during hardening the two places it had crept in (the header fault-line label, the triage tags) were demoted to porcelain/ink with amber dot marks.

02Type

03The signature — Switchboard Health Check

One detailed SVG switchboard — meter, main switch, RCD block, an eight-pole circuit bank — wired to four questions. Everything is a single hand-drawn SVG with the breaker and ceramic-fuse banks built procedurally in JS (eight modules each, generated into two swappable groups). Each answer visibly re-wires the board: fuses swap to breakers, the RCD row ghosts, empties to a dashed blank slot or lights blue, a pre-2000 board swaps its enclosure gradient and test sticker for a skewed 1987 one, and "yes, something trips" runs an animated amber fault trace through the enclosure. Four transparent tap zones over the board (role="button", keyboard-operable) drive the same state machine as the chip buttons, so you can literally tap the meter sticker to age the board.

The verdict is a three-tier state machine, and the honesty is in the tiers: ceramic fuses, or a pre-2000 board with no RCDs → upgrade recommended ($1,800–$3,500); symptoms, fewer than two RCDs, or an old-but-breakered board → book a $180 inspection (with "RCDs from $350" only when RCDs are actually short); everything else → OK for now, which says so plainly, shows no price and no CTA — just "save our number and test your RCDs twice a year". Every anchor equals the services grid figure for the same job, so the page never argues with itself. The verdict CTA pre-fills the enquiry form with the configured scenario and the matching service, turning the demo interaction into a warmer lead. At rest the board sits mid-rewire — two questions answered, a dashed amber wire still being pulled, verdict pending — so the static thumbnail reads as a demonstration already underway.

Techniques overall: inline SVG throughout (board, hero meter-box illustration, Perth service-area map with coastline, Swan River and drive-time rings from Wangara), CSS keyframe dash-flow for the fault trace and rest wire, a state probe at window.__electrician exposing answers/verdict/form status for headless QA, and zero libraries — the page is one file on a 4G budget.

04Conversion decisions

• Call beats form for this trade. The primary CTA everywhere is the phone: header shows the number with a 24/7 fault-line label, the hero's first button is Call, and at 375px a sticky bottom bar keeps Call + Quote thumbs-reachable (50px targets). The quote form is for planned work; emergency copy explicitly says skip it.
• Triage before selling. The strip under the hero routes life-threatening emergencies to 000 and fallen lines / street-wide outages to Western Power's real 13 13 51 — the honest move, and it positions Brightcurrent as safety-literal before a dollar is mentioned.
• Five form fields, no more: name, phone, suburb, service, job description. Suburb matters for a trade (routing and honesty about travel); anything else is friction. Empty submit flags every field with a written reason; success renders a local confirmation with a callback promise ("2 business hours") and a plain demo disclosure — no fake network round-trip.
• Anchors, not bait. Every service card carries a real WA-market figure (after-hours from $220, board upgrades $1,800–$3,500, EV circuits $1,400–$2,800) and the health check quotes identical numbers. The OK tier deliberately sells nothing — the trust that builds is the conversion asset.

05Local SEO we'd implement for the real business

This demo page ships only WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. A real Brightcurrent would ship this, fed by live data:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Electrician",
  "name": "Brightcurrent Electrical",
  "url": "https://brightcurrentelectrical.com.au",
  "telephone": "+61-8-XXXX-XXXX",
  "image": "https://brightcurrentelectrical.com.au/og.jpg",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Wangara",
    "addressRegion": "WA",
    "postalCode": "6065",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.79, "longitude": 115.83 },
  "areaServed": ["Wangara","Joondalup","Wanneroo","Hillarys","Duncraig",
                 "Balcatta","Stirling","Scarborough","Morley","Perth"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:00", "closes": "17:00" }
  ],
  "hasCredential": "EC licence number",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "187"
  }
}
</script>

Plus per-review Review markup from a live Google reviews feed, a Google Business Profile wired to the same NAP, suburb service pages for the top 8–10 areas, and FAQ schema from the questions section — each answer above is already written to earn a featured snippet.

06What would change for the real client

• Job management integration: the quote form posts straight into ServiceM8, Simpro, Tradify or AroFlo — whichever runs their day — so an enquiry becomes a job card with the health-check scenario attached, not an email to lose. Booking links can go direct to ServiceM8's online booking.
• Live reviews: the demo's written testimonials become a Google reviews feed with schema, count and rating pulled nightly.
• Real numbers: their EC licence, ABN, insurance certificate and actual pricing replace the placeholder-patterned ones; call tracking numbers per channel measure what the page earns.
• Their proof: van, boards they've replaced, the team — photography slots into the procedural art direction without redesign, or the SVG illustration style stays as the brand's look.

07Iteration log