Howsafe
Navigation
Redesign.

The current navigation is fighting your customers.

Howsafe stocks 60+ brands across thousands of products. The current navigation puts most of that catalogue behind a single button — making the site work harder than it should for both first-time visitors and returning trade buyers.

Data first, then structure, then design.

Every decision in this deck is traceable to either GA4 traffic data, revenue data, or a documented business goal. We started with what your customers actually do — not opinions about what they should do.

Footwear is the business. The data is unambiguous.

90 days of GA4 sessions across category pages. The top five category destinations are all Safety Footwear sub-pages — by a margin. Workwear and PPE follow at meaningful but lower volumes. Skincare and Cleaning don't break the top 100.

Six decisions that reshape the navbar.

These structural choices come before any visual design. Each is supported by the data on the previous slide.

Four layout patterns, each chosen by the data.

Not one template stretched across every menu. Different data shapes need different layouts. Each menu uses the pattern that fits what its sub-categories are doing.

Navbar layout — three options for you to pick.

The IA below is what we're recommending — data-backed, designed to be impactful. The structure is still yours to shape. Same menu structure here, three ways to render it. Each works — pick the one that feels most you.

Option 1 Left-aligned, light

Logo and search left, navbar items left-aligned underneath. Familiar layout, follows reading order. Closest to the current site's structure.

Option 2 Centred, light

Logo centred, navbar centred underneath. More balanced and modern. Reads as a more retail-focused brand.

Option 3 Centred, dark navbar

Same layout as Option 2 but the navbar bar itself is dark. Stronger visual anchor, the menu reads as a clear horizontal stripe.

From "Click to Shop" to a navigation that scales with your traffic.

The current site hides 3,500+ products behind a single red button. The redesign exposes the seven top-level categories directly, with each menu shaped by its own data.

Before Today

• "Click to Shop" hides all 3,500+ products behind one button
• Top-row navigation reads as marketing pages, not categories
• No way to see the structure of the catalogue at a glance

After Redesign

• Seven top-level categories visible immediately
• Mega menus surface sub-categories shaped by traffic data
• Brands surfaced as its own first-class menu, no longer buried
• Navbar chrome reduced from 222 px to 182 px — ~18% more vertical space for catalogue on every page

Mobile drawer — same IA, redesigned chrome, persistent account access.

Mobile keeps the existing Shop / Website split — the mechanic works. The Website tab now mirrors the desktop top-bar flyouts in parallel, so anyone moving between desktop and mobile finds the same content in the same place. New persistent My Account / Contact button at the bottom for instant access.

01 · Home

02 · Search active

03 · Shop · L1

04 · Shop · L2

05 · Shop · L3

06 · Website · L1

07 · Website · L2

Mobile keeps what works, sharpens what doesn't.

The tab pattern was the right call originally — we kept it. What we changed: the tab order, the Website tab's structure to mirror desktop flyouts, hierarchy markers throughout, and a persistent My Account / Contact button.

Before Today

What changed

Tab order matched to desktop

Website tab's contents now mirror the desktop top-bar flyouts (Find Us, About, Help & Guides). Anyone switching device finds the same content in the same place.

Hierarchy markers throughout

Three drill-down levels in Shop (L1 → L2 → L3) and two in Website. Active tab clearly indicated. Demoted categories visually de-emphasised.

My Account / Contact persistent

Always accessible at the bottom of the drawer regardless of which tab or level — instead of being buried inside the Website tab.

Chrome shrunk from 149 px to 120 px

~19% less mobile chrome, ~29 px more catalogue visible above the fold. Search bar, account and basket still persistent across all states. Cleaner header, larger tap targets.

After Redesign

Three flyouts, one phone number — non-shopping content lives up here.

Find Us

Workwear Store, Safety Footwear Store, Printed & Embroidered Workwear — local-SEO landing pages live here.

About

About Us, Embroidery & Printing, Environmental Policy, Blog, Contact Us. Anything "about Howsafe as a company".

Help & Guides

Footwear Sizing, Standards, Toe Cap Guide, Industrial Work Gloves, DTF Printing for Events. Content marketing surfaces naturally.

Removed

Email and social icons removed from top bar — they live in the footer only. Cleaner.

Safety Footwear — your highest-traffic category, designed accordingly.

Why this layout

Three featured photo columns — Trainers, Boots, Women's — chosen because they're the top three traffic destinations by a clear margin.

Featured selection

Safety Trainers1,235

Safety Boots669

Women's Safety658

90-day GA4 sessions

Brand row

Eight footwear brands ordered by revenue. Cofra leads at £7.9K.

Workwear — twelve sub-categories, three earn featured treatment.

Why this layout

Trousers and Hi-Vis dominate workwear traffic. Each gets a featured photo column with sub-categories listed inline.

Why these three columns earn the featured treatment

Trousers & Shorts332

Kneepad Trousers alone — the top workwear sub-category

High-Visability277 + 196

Hi-Vis Coats & Jackets and Hi-Vis Sweatshirts both in your top 15

Casual Workwear174

Polo Shirts — the leading non-Hi-Vis casual line

90-day GA4 sessions · everything else sits in "Browse All Workwear"

Brand row — workwear-specific

Different brands than Footwear. Portwest leads at £3.8K. Pulsar, Orn, Helly Hansen Workwear follow.

PPE Option A — text columns, fast to scan.

Strengths

• All 22 sub-categories visible immediately
• Trade buyers reach sub-category in one click
• No photo curation required — low maintenance
• Translates cleanly to mobile accordion

Trade-offs

• Less visual interest — text doing the work
• Newer customers may struggle to recognise category by name alone

PPE Option B — image tiles, faster recognition.

Strengths

• Image registers faster than text label
• Premium feel, suits new customer acquisition
• Most Popular sidebar surfaces volume sub-cats
• Distinctive vs trade-supplier competitors

Trade-offs

• Trade buyers add a click to reach sub-cat
• Photo curation maintained over time as range evolves

On assets

You already have imagery for every PPE grouping — this would be a curation job, not a new shoot.

For your decision

PPE is the only menu where data doesn't dictate one pattern. The choice depends on positioning — trade catalogue (A) or premium retailer (B).

Brands — same top-level entry, but no longer buried behind the catalogue.

Structural change

Brands was already a top-level link, but it sat outside the shop and took multiple clicks to reach. The redesign makes it a first-class navbar item with its own mega menu — you have 60+ brands and brand-led shopping is one of the strongest signals in your GA4 data.

Why this layout

Hero brand tiles for visual recognition, full A-Z text grid for buyers who already know the brand they want.

Top brands by revenue

Cofra£7.9K

Portwest£3.8K

Skechers£1.4K

Orn£992

Workplace — two featured columns, supporting categories alongside.

Why this layout

Safety Signs and First Aid have the most depth of sub-categories. Both get a featured photo with sub-cats inline. Five remaining workplace lines as a Browse All column.

No brand row

Workplace categories aren't strongly brand-led — buyers shop by need (compliance, safety) not brand preference.

Use case

Compliance-driven purchases. Signs and First Aid are volume sellers; Industrial Flooring, Spill Containment serve specific job-site needs.

Clearance keeps prominence. More quietly demotes low-traffic categories.

Clearance

Three landing destinations

Clearance Footwear, Stock Clearance, Special Offers — bargain hunters get a clear path. Promotional artwork carries the visual energy.

More — structural change

Skincare, Cleaning & Eco-Friendly move in here

All three were top-level categories competing for navbar real-estate, but the data doesn't support it — combined Skincare hub is 79 sessions in 90 days; Cleaning and Eco-Friendly aren't in the top 100. They keep a stable home in More. Reversible if any grow.

Click through it yourself.

Final artwork is in Figma. Two views — the design file for inspecting components and tokens, the prototype for clicking through the navigation as a customer would.

Both links work in the browser. Figma account not required for view-only access. PPE has both Option A and Option B in the file — switch between them to compare.

What your team will own once this ships.

We're not just delivering a fixed design — we're installing Snowdog Pro, which means the menu becomes yours to curate. These are the inputs your team will be making once it's live, plus what we need from you to get there.

Measure the impact, refine over time.

A site-wide navigation change isn't a clean A/B test — every visitor experiences it, and the gains compound across categories. The honest approach is before-vs-after measurement against your existing baselines, then a continuous refinement programme.

A navigation that improves with your data.

The hierarchy in this deck reflects today's traffic and revenue. Categories grow and shrink. Seasonal patterns shift the picture. We propose a quarterly review cycle — keep the navigation aligned with what your customers actually want to buy.

Some other things we noticed.

We've focused on navigation, so we haven't been into checkout, purchase flow, or product detail in any depth. Within scope, two areas stood out as worth a deeper look — not a definitive next-priority list, just what we spotted along the way.

Test ideas that surfaced whilst working on this project.

Not a comprehensive list — these are ideas that came out of the navigation data, not a full audit. With a project to do this properly we'd score them, find others, and come back with what's actually worth running first.

From sign-off to launch.

Indicative timeline. Actual dates depend on dev team capacity and the timing of the inputs we've outlined.

GA4 reference data — 90 days.

Source data informing the IA decisions. Period: 29 January – 28 April 2026.