Case Study — Website RebuildSolo — UX, Design & BuildWordPress + WooCommerceLive since Oct 2025
THE REVIEWS WERE FIVE STARS. THE WEBSITE WASN'T.
PurposeFill had 600+ five-star Google reviews and a website that was slow, dark, and confusing enough to need written instructions for its own calendar. This is the rebuild of purposefill.co.nz — structure first, paint second.
$467K+
Net sales, first 9 months on the new site
1,747
Orders processed through the rebuilt flow
+116%
Digital-channel revenue growth over 3 years
600+
Five-star Google reviews the site had to live up to
purposefill.co.nz — redesigned homepage, full page
DetailThe Outcome First — the shipped homepage design: every service visible, reviews in the first screen, one promo bar instead of two, and a booking flow that no longer needs a manual. The rest of this page is how it got here.
// 01// Client's painThe Starting Point
"The old site was costing us bookings we'd already earned everywhere else."
There's no showroom and, for most bookings, no sales call. The website is the only salesperson — it has to persuade and transact in a single visit, or the customer calls the office. Or leaves.
I'd been running PurposeFill's paid media and website for two years before convincing the business to stop patching and rebuild. The site was dark and cluttered, page loads dragged, the illustrations didn't read, and only three of six services were visible without opening the navigation. None of that was one bad decision — it was years of them, stacked.
"ATTENTION: Click first on your delivery date, then second click on your collection date."— literal on-page copy the old date picker needed to function
// 02// Research, such as it wasEvidence Over Budget
No research budget. Two years of support calls, a full flow walkthrough, and 600+ reviews in customers' own words.
The same two questions dominated inbound calls: "What size bin do I need?" and "Can I put this in it?" Neither was answered clearly anywhere on the old site.
★★★★★
Samantha JH books repeatedly and says communication is minimal because it doesn't need to be — everything she needs is on the site and the invoice. Her verdict: "efficient, easy to work with, affordable."
Samantha JH — Verified Google Review
★★★★★
Sybil G. thanked the team for the communication and confirmed "we will be hiring a skip bin again." Not buying. Not using. Hiring — the job, in the customer's own word.
Sybil Gibbs — Verified Google Review
That was the research budget. Enough to see the shape of the problem clearly: trust wasn't the gap — the reviews were doing the convincing. Friction was the gap. The site was losing hires in the ninety seconds it actually takes to book a skip bin online.
// 03// The forkStrategy
Every rebuild has a fork in it. One path fixes how the site looks. The other fixes how it fails.
The business couldn't afford downtime — live bookings kept coming in throughout. That constraint shaped every choice below.
DIRECTION 01
Patch what’s there — Rejected
The Idea
Clean up the visual layer. Lighten the palette, tidy the spacing, leave the booking flow and information architecture alone. Fast, low-risk, ships in weeks.
Why Rejected
A nicer-looking site that loses the same hires at the same rate.
Speed
Weeks — but the leak stays open.
DIRECTION 02
Rebuild around the booking flow — Shipped
The Idea
Reset the information architecture. Redesign the calendar as a single range picker. Surface all six services. Keep WooCommerce underneath, reconfigure everything around it.
Why Shipped
It fixes the leak, not the paint.
Trade-off
Slower and riskier, on a site that couldn’t go down.
A third direction existed briefly: a fully custom checkout, more opinionated and more elegant. I prototyped it and killed it. WooCommerce's native checkout is less exciting, but it's trusted, connects cleanly to Afterpay and Stripe, and was the lower-risk path for a business that couldn't afford a broken payment page. The right call, even if it left something on the table.
// 04// Design systemFoundations First
Before a single page: five typefaces auditioned against real content.
Scada, Raleway, ASAP, Oxygen, Commissioner — each tested across the full type scale and the actual components they'd have to live in, not lorem ipsum.
design-system / typography-audition
DetailSame paragraph, same spec list, same scale — five candidates. Reading real waste-removal copy at text-sm exposes weak candidates faster than any specimen sheet.
design-system / component-matrix
DetailEvery candidate rendered into the real components — stat blocks, product cards, forms, spec lists. The system had to survive contact with the content, then it got to be pretty.
Execution framework.
Working solo on a live business means no drifting between phases. Each step had a hard output before the next began.
Output
Technical audit of the WooCommerce install, full page map, plugin inventory — 34 active, many overlapping.
Output
Support-call patterns, review mining, and a click-by-click walkthrough of the old booking flow.
Output
New sitemap: Residential / Commercial pillars, every service one level deep, two clicks to any product.
Output
Type audition, tokens, spacing scale, and a component library built before any page design.
Output
Homepage and product cards through multiple full rounds — the gallery below is the honest middle.
Output
Clean WordPress rebuild, staged rollout, zero booking downtime while the business kept trading.
// 05// Iteration — the messy middleShown, Not Told
One component, six rounds. This is what design process actually looks like.
"Choose a Size" is the highest-stakes screen on the site — it's where "what size do I need?", the #1 support question, either gets answered or becomes a phone call.
DetailWhite cards, hard borders. Clear, but the checklist repeats six times and the express-delivery badge fights the product for attention.
DetailDark cards. Strong brand presence — and worse scanning. Price and size sink into the background. Rejected for the exact reason the old site failed.
DetailSplit panels. Price isolated left, specs right. Better hierarchy, but three visual treatments competing in one stack.
DetailStripped back. Almost there — calm, scannable, price visible. But the size question still isn't answered, only stated.
DetailHorizontal rows. One bin per row, full width. Room for the spec list to breathe. The layout that survived.
DetailThe answer, not just the number. A human figure for scale, dimensions drawn on the bin, and "= 9 trailer loads" equivalence — answered visually, before checkout.
The shipped card resolves the single most common support call without a word of copy: you see a person standing next to the bin, you see what it equals in trailer loads, you know. It's a stopgap for a full recommender tool — more on that honestly, later — but it moved the burden from the phone line to the page.
// 06// The buildWhat Shipped
The homepage went through four full versions before one earned the right to ship.
Each round is a response to a specific failure of the previous one — not taste, diagnosis.
homepage / v1 — first full draft
DetailV1 — Light, fast, honest — but only three services. Fixed the darkness and clutter, put reviews above the fold. But three of six services stayed invisible without touching navigation.
homepage / v2 — all services surfaced
DetailV2 — Uniform service cards, equal billing. A customer comparing bag vs. skip can now do it without knowing the nav structure exists.
DetailV3 → Shipped — Photography does the explaining. Waste categories switch to real photography with ✓/✗ overlays — "can I put this in it?" answered visually.
product / hardfill-mini-3m3
DetailPrice first, trust beside it. "From $295, up to 6 nights" sits beside the title — pricing before commitment, not after.
Booking was where the old site lost people.
Four targeted fixes, each aimed at a specific observed failure — not 'make it nicer.'
DIRECTION 01
Calendar instruction, deleted
Before
Double-click sequence with an on-page written warning explaining how to operate it.
After
Single date-range picker. The interface teaches itself.
Why
The bottleneck was ability, not motivation — fix the interface, not the copy.
DIRECTION 02
Six date fields → one
Before
Day / Month / Year × 2 — six separate inputs for one booking window.
After
One range selection. Fewer taps, less error surface on mobile.
Why
Every extra field is a place to drop off and default back to calling the office.
DIRECTION 03
Pricing, moved earlier
Before
Total price surfaced only after the hardest step — the date sequence.
After
Price visible before the customer commits to a date.
Why
Reduces post-booking confusion and the support calls that follow it.
DIRECTION 04
Stripe, quietly rebuilt
Before
A misconfigured endpoint surfaced a visible payment error at checkout.
After
Corrected endpoint. Payment works without drama.
Why
Checkout is the exact moment trust matters most — it needs to be invisible.
// 06.5// Under the hoodPerformance
The part nobody reviews, but everybody feels.
NZ-Based Hosting reduced latency for a local audience
Core Web Vitals — All "Good" LCP, FID and CLS, previously below threshold
44 × 44px Touch Targets Apple HIG / Material minimum, applied site-wide
✓Context-aware mobile keyboards — numeric for phone and postcode, email keyboard on the email field.
✓Google Maps autocomplete on the address field — fewer typed errors, faster completion.
✓Compressed, modern image formats with lazy loading below the fold.
✓Waste-acceptance lists rebuilt as photo cards with ✓/✗ overlays — scannable, not paragraph text.
// 07// What happenedXero-Verified
Revenue growth, honestly attributed.
Website-booking revenue from the company's own accounts, four financial years. The rebuild is the largest single intervention in this line — not the only factor, and I won't pretend otherwise.
3-year growth: +116.6%
Straight from Xero. Paid media management and iterative UX work also ran across this period. I don't have clean pre-rebuild conversion-rate data, so I'm not claiming a conversion lift I can't defend — what I have is the mechanism (measurably faster, structurally clearer) and the revenue line above.
$467,166
Net sales, 1,747 orders — first 9 months on the new site
$269.63
Average order value
~$53K/mo
Run-rate, ranging $40K–$70K seasonally
★★★★★
"Always prompt service from Purpose Fill — highly recommend. Prices are reasonable & website bookings easy to organise."
Shelley Hoani — Verified Google Review, post-launch
★★★★★
"Easy booking, delivered and picked up as requested. Great staff. Perfect — thank you! Highly recommend."
Megan Barlow — Verified Google Review, post-launch
// 08// ReflectionNo Varnish
What I'd do differently.
A case study that only lists wins is a brochure. These three cost real time or real money.
The Honest Column
01
The tracking audit should have come first. Post-launch I found 30+ overlapping conversion actions across GTM, GA4 and the native WooCommerce plugin — some purchases counted up to 3×, inflating reported ROAS by roughly 10–13×. I've been de-duplicating since. Next time: audit the tracking environment before the design work starts, not after.
02
The bin-size recommender is still not built. The shipped scale-figure cards help — but they don't replace a structured decision tool for the single most common support question. A proper recommender was a 4–6 week build I cut for scope. It remains the highest-ROI unbuilt feature on the site.
03
Nothing here was formally usability-tested. No budget for moderated sessions. The date-picker redesign was a judgement call I'm confident in but can't prove with a completion-rate delta. Since launch, Hotjar recordings show people moving through service cards into checkout without the hesitation loops support used to describe — directional evidence, and I'm treating it as exactly that.
THE REVIEWS WERE ALWAYS FIVE STARS. NOW THE WEBSITE AGREES.
