Case Study — MKU Website Redesign

A defense brand that feels like a consumer product.

New design language, navigation, catalog, and end-user pages for MKU's entire web presence — across Netro Optronics, Kavro Protection, and MRO.

Role

UX Design Lead

Timeline

2024

Scope

Full website redesign

Company

MKU Limited

Device mockup Device mockup

What changed.

You

A unified design language

Primary
Accent
Sub Brands
Smart Features
Color
Typography Typography
Typography
Iconography Iconography
[ Iconography ]
Iconography
color.text.primary
color.text.disabled
color.bg.overlay
color.text.secondary
color.bg.surface
color.border.default
color.text.primary
color.text.disabled
color.bg.overlay
color.text.secondary
color.bg.surface
color.border.default
gotham.title.bold
gotham.body.book
gotham.body.medium
gotham.heading.bold
gotham.label.bold
gotham.caption.regular
gotham.title.bold
gotham.body.book
gotham.body.medium
gotham.heading.bold
gotham.label.bold
gotham.caption.regular
size.button.icon
size.button.small
size.button.medium
size.button.full-width
size.icon.sm
size.icon.md
size.icon.lg
size.button.icon
size.button.small
size.button.medium
size.button.full-width
size.icon.sm
size.icon.md
size.icon.lg
padding.input-field.small
padding.input-field.medium
padding.input-field.large
padding.button.small
padding.button.medium
padding.button.large
padding.button.compact
padding.input-field.small
padding.input-field.medium
padding.input-field.large
padding.button.small
padding.button.medium
padding.button.large
padding.button.compact
color.icon.primary
color.icon.secondary
color.icon.accent.teal
color.icon.disabled
color.icon.inverse
radius.card.sm
radius.card.md
color.icon.primary
color.icon.secondary
color.icon.accent.teal
color.icon.disabled
color.icon.inverse
radius.card.sm
radius.card.md
Tokens
Primary
Secondary
Ghost & Accent
[ Product Image ]
Ballistic NIJ IV
ACH 114T Combat Helmet
Advanced composite shell — NIJ Level IV certified for high-threat environments.
Product Card
Campaign — 2024
Turning Darkness
Into Confidence.
Explore campaign →
Campaign Card
Insight
The Ultimate Fighter — What the Modern Soldier Carries
8 min read · MKU Editorial
Editorial Card
Category Tags
Ballistic Protection Optics Tactical Gear Body Armour Helmets MRO
Segment Tags
Military Law Enforcement Homeland Security VIP Protection
Certification Badges
NIJ Level IV NIJ Level IIIA VPAM BRV EN 1063 STANAG 4569
Status Tags
In Stock Custom Order Restricted New
Sub-brands
Netro Optronics
Kavro Protection
MRO
Categories
Body Armour
Helmets & Head Protection
Optics & Sighting
Vehicle Protection
Segments
Military
Law Enforcement
Homeland Security
Home / Products / Body Armour / ACH 114T

Click "Products" to toggle mega-nav

Search
Body Armour Helmets Optics
Inputs
Select & Filters
Checkboxes
Military
Law Enforcement
Homeland Security
VIP Protection
Pulse Indicator
Active connection
Ripple on Click
Click to see ripple
Toggle Switch
Wishlist
Compare
Loading Progress
Loading catalogue…
Skeleton Loader
Count Interaction
0
Enquiry qty

Same experience. Every product

The old product pages had no consistent structure. Some had specs, some didn't. No way to tell sub-brands apart.

Product page overview

Dynamic Filters

The original catalog had no filters. Buyers scrolled a flat list to find what they needed. I added contextual filters, richer product cards, and an applied filters strip to make navigation faster and comparison effortless.

Contextual Filters

Three base filters always visible: Segment, Category, Sub Category. Deeper filters — Protection, Calibre, Fragmentation, Suspension — appear only when relevant to the selected subcategory.

Tags

Applied filter tags appear on each card and in the active filters strip — making it easy to see what's active and remove individual criteria at a glance.

Multi-Category Browsing

The old site loaded one sub-category at a time. Selecting two meant browsing separately. The catalog now loads products across multiple sub-categories simultaneously.

Catalog filtering UI Catalog filtering UI

Same experience. Every product

The old product pages had no consistent structure. Some had specs, some didn't. No way to tell sub-brands apart.

Heroes Program overview

A home for every end user

MKU's products span three sub-brands. But an army personnel doesn't think in sub-brands. They need a helmet and a compatible night vision — one from Kavro, one from Netro. Previously, they had to find both separately and match compatibility themselves. End user pages put everything relevant to them in one place.

Segment-first architecture

Products organised around who's using them, not who makes them. Each page surfaces only what's relevant to that segment — cutting through the sub-brand structure entirely.

Context-aware product presentation

Same product, reframed per segment. Imagery, copy, and use cases shift to match the buyer's world — building familiarity before they've read a single spec.

Reduced path to compatibility

Related products surface together by default. No cross-referencing sub-brands, no manual spec matching. Shorter decision paths, lower drop-off.

End user page UI End user page UI

View more projects

Sales Pro

Browse projects

Explore the blog

60 Minutes to Ship: How a Sleeping TV Sparked a Better Event Experience

Read posts