TotalDIY.
A ground-up WooCommerce redesign, starting in Figma, that turned a cluttered category structure into a catalogue shoppers - and Google - can actually find their way around.
A redesign built in Figma first.
TotalDIY sells across two very different worlds under one roof - paint, hardware, plumbing and electrical supplies alongside dog, cat, small animal and farm pet food. That range had grown into a category structure that made sense internally but was hard for shoppers, and search engines, to make sense of from outside.
The brief was a full redesign, not a patch on the existing site. We designed the new category structure, navigation and page templates in Figma first, then built a whole new WooCommerce site around that design, with SEO and internal linking handled as part of the build rather than bolted on afterwards.
- CLIENT
- TotalDIY - online hardware, DIY and pet supplies retailer, Ireland
- INDUSTRY
- Ecommerce & Retail
- SERVICES
- Figma design, full WooCommerce rebuild, category and information architecture, SEO and internal linking
- TECHNOLOGY
- Figma, WordPress, WooCommerce
- TIMELINE
- Delivered as a full redesign and rebuild project
- ENGAGEMENT
- Fixed-scope redesign and rebuild project
Understanding the problem.
What we found once we mapped the existing catalogue and category tree.
- 01/
Categories had grown without a plan
New product lines were added to whichever category was closest at the time, so painting, hardware and pet supplies overlapped in ways that made sense to staff but not to shoppers.
- 02/
Two very different catalogues, one navigation
DIY and hardware shoppers and pet food shoppers were looking for completely different things, but shared a single navigation structure that served neither well.
- 03/
Category pages were not built to be found
Thin category content and inconsistent internal linking meant several high-intent category pages were not surfacing for the terms shoppers were actually searching on Google.
From strategy to execution.
A structured redesign and rebuild, from Figma through to a live WooCommerce store.
- 01/ PHASE 1
Catalogue and category audit
A full pass through the existing catalogue and category tree, mapping which categories overlapped, which pages had no clear owner, and where shoppers were most likely to get lost.
- 02/ PHASE 2
Figma design
The new category structure, navigation and page templates designed in Figma before any development started, so the information architecture was settled first.
- 03/ PHASE 3
WooCommerce rebuild
A new WooCommerce site built from the Figma design, with the category and navigation structure wired in from the start rather than retrofitted onto the old one.
- 04/ PHASE 4
SEO, internal linking and launch
Internal linking, on-page SEO and metadata built into the new site, then rolled out live on the same WooCommerce platform TotalDIY already ran on.
What we built.
Three connected pieces of work, delivered as one redesign.
- PART 01 - DESIGN
A new design, planned in Figma first
Category structure, navigation and page templates were designed and signed off in Figma before a line of code was written, so the new information architecture was settled early.
DELIVERED Full Figma designNew category & navigation structureListing and product page templatesDesign signed off before development - PART 02 - DEVELOPMENT
A new WooCommerce site, built from that design
The whole storefront was rebuilt on WooCommerce from the Figma design, with products placed where a shopper looking for them would expect to find them, rather than patching the existing theme and structure.
DELIVERED Full WooCommerce rebuildNew category structure implementedSeparated DIY/hardware and pet cataloguesCleaner primary navigation - PART 03 - SEO & FINDABILITY
Built to be found from day one
Internal linking, on-page content and metadata across category pages were built into the new site as part of the rebuild, so the new structure was as easy for Google to crawl and rank as it is for shoppers to browse.
DELIVERED On-page SEO for category pagesInternal linking built into the new siteCleaner URL and navigation structureMetadata and content optimisation
Designed before it was built.
- 01/
Designed before it was built
The new navigation and category structure were designed and agreed in Figma first, so the WooCommerce build followed a settled plan instead of being figured out live.
- 02/
Two catalogues, two clear paths
DIY and hardware shoppers and pet owners now browse structures built around what they are actually looking for, rather than one navigation trying to serve both.
- 03/
Products placed where shoppers look
Category placement was rebuilt around how a shopper searches, not around wherever a product happened to be added historically.
- 04/
Optimised as part of the rebuild
Internal linking and on-page SEO were built into the new site from the start, not added after launch.
FIGMA DESIGN - CATEGORY NAVIGATION 
NEW WOOCOMMERCE SITE - CATEGORY LISTING How it was built.
Designed in Figma, then built on the WooCommerce platform TotalDIY already runs on.
-
DESIGN
- Figma
-
PLATFORM
- WordPress
- WooCommerce
-
SEO & FINDABILITY
- On-page SEO
- Internal linking
- Google Search Console
- WHY THIS APPROACH
Designing the new structure in Figma first meant the category and navigation decisions were settled before development started, rather than being worked out inside WooCommerce as we built.
- THE HARD PART
Untangling two very different product ranges - DIY/hardware and pet supplies - that had been organised under one navigation for years.
- HANDOVER
The team can keep adding new products using the placement rules the new structure is built around, without the category tree drifting back into the same clutter.
Business impact.
Measured against the pre-launch baseline, since the redesigned site went live.
- +34%
Organic traffic
Increase in organic sessions since the redesigned site went live.
- 0
Ranking loss
No drop in existing search rankings through the full rebuild and relaunch.
- 40+
Categories rebuilt
Across the DIY, hardware and pet ranges, each with a clear place in the new structure.
- 2.1s
Median page load
On the new WooCommerce build.
Figures supplied by TotalDIY from analytics and Google Search Console reporting.
The finished platform.
Drag to browse. Screens shown with sample catalogue data.
-
The new homepage design, agreed in Figma before development started.
-
The finished TotalDIY homepage spanning the DIY, hardware and pet ranges.
-
The rebuilt category listing for the painting range.
-
Mobile navigation, search and account flows on the rebuilt site.
-
A rebuilt product page with clearer details, FAQs and related products.
“The new site finally makes sense, both to us and to our customers. The team took the time to understand how our range actually works before designing anything, and the site that came out of Figma is exactly what got built.”
-
Thrivin
An ongoing partnership scaling an existing Shopify Plus store through automation, custom development and an internal operations app built around how the team actually works.
-
House Clearance UK
A WordPress site for a UK house clearance, probate valuation and asset purchasing business, built to guide each type of visitor to the right service quickly.
-
SWB Advisors
A WordPress site for a US M&A and cross-border tax advisory firm, presenting their service lines and industry focus to private equity, hedge fund and family office clients.