Case study · Patrick James Bathrooms
Everything that went into the rebuild.
Patrick James Bathrooms has more than 30 years of clients who come back and bring their friends. They needed a website that matched that standard. Here is a full account of what I designed, how I built it, and every decision along the way.
The brief
A site as good as the work
Patrick James Bathrooms has renovated bathrooms across Sydney since 1994, with more than 2,000 projects to their name. Their reputation was built on word of mouth, but the old website did not reflect the quality of the work. It was slow, awkward on a phone, and gave a new customer no easy way to gauge cost or get in touch.
The goal: a website that looks as premium as the bathrooms, earns trust instantly, and makes it effortless for a homeowner to picture the project and request a quote. Everything is custom. No plugins, no themes, no templates.
What I built
The full inventory
Eleven interactive features on the homepage alone, each built by hand and each there to answer a real question a client has.
Cinematic hero
A slow Ken Burns pan, a cursor blob with spring physics, a glow that follows the mouse, floating particles, and a scroll cue. All of it switches off cleanly for reduced-motion.
Photo gallery with lightbox
Eleven project photos in a masonry grid. Click any image for a full-screen lightbox with backdrop blur. Close by clicking outside, Escape, or the button. Keyboard accessible with focus return.
Before / after drag slider
Drag a handle to reveal before and after a renovation. Works on mouse and touch with CSS clip-path. Data-driven so Patrick can add new pairs without touching the HTML.
Renovation cost calculator
Four bathroom sizes, three finish tiers, and six add-ons. Calculates a price range and updates instantly, entirely in the browser with no server or API.
Style picker
Five bathroom aesthetics, each with a palette, signature finishes, and a description. Helps clients work out what they actually want before they call.
Package cards
Bronze, Silver, and Gold packages with feature lists and a "Most popular" badge. Enquire pre-fills the contact form with the package name and scrolls to it.
NDIS accessible bathrooms
A dedicated section on step-free showers, grab rails, non-slip tiles and more, structured to rank for NDIS bathroom searches and written in the site's own tone.
FAQ accordion
Six questions on cost, timeline, NDIS, warranty and areas served. Smooth expand and collapse, full ARIA, and the same questions in FAQ schema for rich snippets.
Testimonials with marquee
Glass testimonial cards with hover lift, plus an auto-scrolling review marquee that pauses on hover and stops for reduced-motion. Reviews sit in the schema markup too.
Contact form with send modal
On submit it builds a pre-addressed email and an SMS draft, then asks which to open. Patrick gets the full enquiry however he prefers. Zero server required.
Mobile sticky call bar
On mobile, a fixed bar with call and WhatsApp buttons at all times. Tap-to-contact with no intermediate steps, sitting above the system navigation bar.
Design decisions
Six choices that shaped the rebuild
Good design is mostly the absence of bad decisions. Here is where the thinking went.
An editorial type pairing
Playfair Display carries the headlines with italic on the key phrase only; DM Sans handles all UI and body. It reads like a magazine before it reads like a tradie website. That order matters.
A palette that restrains itself
Navy as the primary ink, blue for interactive only, champagne gold as the single accent that earns its place. Paper instead of cold white. The colour does not do the heavy lifting.
Animation that holds back
A slow hero pan, a reading-progress bar, scroll-triggered fade-ups. A custom easing curve that overshoots then settles. Nothing bounces or loops forever. Reduced-motion is respected throughout.
Every feature earns its place
The calculator, lightbox, slider, FAQ and forms all run without a backend. Zero server dependency, zero hosting lock-in. Patrick can move the site to any host tomorrow and nothing breaks.
Honest, durable markup
Static HTML, no framework, no build pipeline, no CMS. Markup you can read top to bottom. AVIF and WebP with fallbacks, far-future caching. Built to load fast on mediocre NBN.
Local presence, built in
Twenty-four suburb landing pages with unique copy and their own structured data, plus eight articles on topics people actually search. Authority built into the structure, not bolted on.
The payoff
Engineered to score
Because the build ships almost nothing the browser does not need, it aces the audits Google actually uses. You can run it through Lighthouse and check for yourself.
This build versus a generic site
A generic template
- Loads a heavy theme and scripts the visitor never asked for.
- Thin or duplicated location text that Google quietly ignores.
- A monthly fee, and you never actually own it.
- Looks like a thousand other businesses.
This build
- Ships only the code each page needs, so it loads in under a second.
- Unique copy on every page, the way Google actually rewards.
- Paid once, owned outright, hosted anywhere.
- A custom identity that looks like nobody else.
The credit
Patrick and the crew own the work. The website is a wrapper around 30+ years of bathrooms.
Patrick and his crew own the bathrooms. The website is mine. If you want one built with the same care for your trade, your practice, or any small business where the online presence does not yet match the actual work, write to me at zac@zacwebsites.com.au or call 0461 519 696.