Modernising Laguna's website and creating a reusable design system to support growth, ecommerce, and internal teams.

Role

Sole UX/UI Designer

Responsibilties

Discovery workshops · UX/UI design · Dev handoff

Scope

~15 responsive page templates · Reusable WordPress blocks · Ecommerce + marketing · Responsive design

Success metric

Improved conversions, search ranking, and reduced bounce rate

The challenge

Laguna Tools sells professional woodworking and metalworking machinery to a wide range of customers — from hobbyists buying their first bandsaw to cabinet makers, job shops, CNC operators, and industrial buyers outfitting entire workshops. Their website had evolved over many years without dedicated design ownership, and it showed. There were competing visual hierarchies, misalignment, a lack of a solid grid, and typography without a coherent system. Conversion points like forms were bloated. Trust signals — strong testimonials, clear CTA blocks — were largely absent. And despite having excellent photography and video assets, the site wasn't doing them justice.

The marketing team also relied heavily on developers to make any page changes. They needed both a visual refresh and a scalable foundation they could actually build on.

Approach

We ran interactive discovery sessions with Laguna stakeholders, including a couple of online whiteboard workshops. These covered audience profiling — mapping customer segments, demographics, professional characteristics, and online habits — and journey mapping across the full customer lifecycle: awareness, consideration, purchase, post-purchase, support, and loyalty. A card sorting exercise helped simplify a cluttered navigation structure.

From there, I audited the existing site and studied Laguna's social media to understand where their visual identity currently sat. There was a lot of inconsistency in the brand assets, so part of my job was identifying the stronger visual motifs and pulling those through to create a more cohesive digital identity. I showed the client examples of how other brands with strong photography (sports brands, outdoor gear) use their assets to really elevate pages — and used that to show them what was possible with what they already had.

Audience profiling workshop in progress

Key design decisions

Establishing a clear visual system. Before designing any templates, I defined a proper grid, spacing scale, and typographic system, and rationalised colour usage. This instantly made pages feel calmer, more professional, and easier to scan.

The typography system

Unlocking the brand's visual assets. The before/after on testimonials — particularly video testimonials — was probably the single biggest improvement. Where they had been buried or poorly implemented, they became impactful and prominent. Strong photography that had been undersized or misused was given the space it deserved.

Before and after: The video testimonial section

Scalable templates and components. Because Laguna's team would be building future pages in WordPress themselves, it was critical to hand over everything they needed. As well as fully responsive page and block designs, I provided component designs (buttons, form fields, filter chips), a typographic scale, colour tokens, breakpoints, grid rules, and fluid type/spacing clamp rules. The result was a system that empowered non-designers to build new pages consistently, without needing a designer in the room.

Responsive block components in Figma

Outcome

The redesign improved search ranking, conversion rates, and reduced bounce rate. The client noted that thorough documentation and design mapping was critical to their team's success building on the system. Rather than redesigning pages, I built a foundation — one that looks better today and can scale without accumulating design debt.

Back