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 slow and confusing enough to need written instructions for its own calendar. I rebuilt purposefill.co.nz around the booking flow rather than the paint.
$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
DetailWhat shipped. Every service visible, reviews in the first screen, one promo bar instead of two, and a booking flow that no longer needs a manual.
// 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 site has to persuade and transact in one visit. Otherwise the customer rings the office, or goes somewhere else.
I'd been running PurposeFill's paid media and website for two years before I convinced 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. Nobody made one bad decision here. The site had accumulated years of small ones.
"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 wants is on the site and the invoice. Her words: "efficient, easy to work with, affordable."
Samantha JH — Verified Google Review
★★★★★
Sybil G. thanked the team and confirmed "we will be hiring a skip bin again." She said hiring, not buying. That's the word the rebuilt site uses too.
Sybil Gibbs — Verified Google Review
That was the research budget, and it was enough. The reviews were already doing the convincing, so trust wasn't the problem. Friction was. The site lost hires in the ninety seconds it takes to book a skip bin online.
// 03// The forkStrategy
Every rebuild has a fork in it: fix how the site looks, or fix how it fails.
Live bookings kept coming in the whole time, so downtime wasn't an option. That ruled a few things out.
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. 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 part that loses bookings.
Trade-off
Slower and riskier, on a site that couldn’t go down.
A third direction lasted about a week: a fully custom checkout, more opinionated and better looking. I prototyped it and killed it. WooCommerce's native checkout is duller, but customers recognise it and it connects cleanly to Afterpay and Stripe. For a business that couldn't afford a broken payment page, that was the safer bet. I still think it was the right one.
// 04// Design systemFoundations First
Before a single page: five typefaces auditioned against real content.
Scada, Raleway, ASAP, Oxygen, Commissioner. Each one set across the full type scale and inside the actual components it would have to live in, using real copy.
design-system / typography-audition
DetailFive candidates in the same paragraph, spec list, and scale. Reading real waste-removal copy at text-sm kills a weak face 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 the content before 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 several full rounds, most of them shown below.
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. Five of them wrong.
"Choose a Size" is the highest-stakes screen on the site. It's where "what size do I need?", the most common 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, worse scanning. Price and size sink into the background. Rejected for the same reason the old site failed.
DetailSplit panels. Price isolated left, specs right. Better hierarchy, but three visual treatments competing in one stack.
DetailStripped back. Calm, scannable, price visible. But the size question is still stated rather than answered.
DetailHorizontal rows. One bin per row, full width. Room for the spec list to breathe. The layout that survived.
DetailThe answer, in the picture. A person standing beside the bin for scale, dimensions drawn on it, and "= 9 trailer loads" printed underneath.
The shipped card answers the most common support call without a word of copy. There's a person standing next to the bin and a trailer-load equivalent underneath it. It's a stopgap for a proper recommender tool, but it moved the question off the phone line and onto the page.
// 06// The buildWhat Shipped
Four full versions of the homepage before one was good enough to ship.
Each round answers a specific failure in the one before it. I kept notes on what broke, so this wasn't taste.
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, so "can I put this in it?" gets answered in a picture.
product / hardfill-mini-3m3
DetailPrice first, trust beside it. "From $295, up to 6 nights" sits beside the title, so the price arrives before the commitment does.
Booking was where the old site lost people.
Four fixes, each aimed at a failure I had watched happen in a support call or a session recording.
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
People wanted to book and couldn’t work the widget. That is an interface problem, so I fixed the interface.
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 endpoint, corrected
Before
A misconfigured endpoint surfaced a visible payment error at checkout.
After
Corrected endpoint. Payment goes through without drama.
Why
Checkout is where trust is thinnest. It should be invisible.
// 06.5// Under the hoodPerformance
Nobody writes a review about load times.
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 instead of paragraphs.
// 07// What happenedXero-Verified
Revenue growth, honestly attributed.
Website-booking revenue from the company's own accounts, four financial years. The rebuild is the biggest single change in that line, and it isn't the only one.
3-year growth: +116.6%
Straight from Xero. Paid media and ongoing UX work ran across the same period. I don't have clean pre-rebuild conversion data, so I'm not claiming a conversion lift. What I have is a measurably faster, clearer site 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 the tracking gets audited before the design work starts.
02
The bin-size recommender is still not built. The shipped scale-figure cards help, but they don't replace a decision tool for the most common support question. A proper recommender was a 4–6 week build I cut for scope. It's still the most valuable thing missing from that site.
03
Nothing here was formally usability-tested. There was 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. Hotjar recordings since launch show people moving through service cards into checkout without the hesitation loops support used to describe. That's directional, not proof.
THE REVIEWS WERE ALWAYS FIVE STARS. NOW THE WEBSITE AGREES.
Check out another project
