Harbourline Electrical
Design & Conversion Rationale

The brief was to design and build a fictional small-business website that proves a web design agency can deliver a conversion-focused site for a local trades business — not just something that looks good in a screenshot.

Harbourline Electrical is a fictional residential and commercial electrical contractor based in Western Sydney. The site needed to appeal to homeowners, landlords, and small business owners searching for a reliable local electrician.

The benchmark for success: a prospective trade client should be able to look at this demo and immediately understand what a well-built website would do for their business — and why it would be worth paying for.

Many trade business websites fall into two failure modes: either they're too plain and look untrustworthy, or they're overloaded with noisy design elements that obscure the core message. This demo was designed to avoid both.

The primary design goal was clarity over decoration. Every section should serve a purpose. If a visitor can't find the phone number or understand what the business does within five seconds, the design has failed — regardless of how polished it looks.

Secondary goals: look professional enough that a homeowner would trust the business with access to their property; communicate local credibility (Western Sydney, not a national operator); and make it easy to take the next step from any page.

Every layout decision on this site has a conversion rationale behind it.

Over 60% of local trade service searches happen on mobile. The site was built mobile-first: layouts, tap targets, and content priority were all decided with a phone screen in mind, then expanded for desktop.

The sticky CTA bar uses a minimum 56px touch target on both buttons, following Apple and Google accessibility guidelines. The "Call Now" button shows the actual phone number below the label, so the user never has to remember or look it up.

The main navigation collapses to a clean hamburger menu with generous padding. No hidden traps, no tiny text, no buttons that require precise tapping.

This site uses a layered trust approach rather than a single "trust us" badge. The goal is to address different objections at different points in the visitor's journey.

First layer (immediate): the trust bar cards — licensed, insured, local. These answer the basic question of whether the business is legitimate.

Second layer (as they scroll): the "Why Choose Us" section with six specific reasons, each with a brief explanation. This goes deeper for visitors who need more persuasion.

Third layer (social proof): fictional testimonials — clearly labeled as demo content — from recognisable Western Sydney suburb names (Parramatta, Penrith, Liverpool). Real implementations would replace these with verified reviews.

Fourth layer (credentials): the About page lists the ABN, electrical licence number, and insurance — the documents that a serious client would eventually ask for.

The site is built with Next.js 16 (App Router), TypeScript, and Tailwind CSS v4. All pages are statically generated — no client-side data fetching, no loading states, no spinners. For a local business site, fast first paint matters more than dynamic content.

All text content is separated into a single file (lib/content.ts). A real implementation would make this easy to hand off to a client for editing, or integrate with a lightweight CMS like Sanity or Keystatic.

Component hierarchy: shared primitives (Button, SectionHeader, ContactForm), layout components (Header, Footer, MobileCTABar), and page-specific section components. No component does more than one job.

The contact form simulates success without a backend. In production, the form would connect to a service like Resend or a simple serverless function to email enquiries to the business owner.

Accessibility: semantic HTML throughout, aria labels on interactive elements, skip-to-content not yet implemented (would be added in production), colour contrast meets WCAG AA on all text elements.