Designing a Frictionless, Accessible Path to Wellness

In just 12 weeks, I led a complete end-to-end digital transformation for Nature’s Own. This wasn’t just a reskin; we engineered a mobile-first UI/UX ecosystem grounded in a modern design system. By integrating CRM touchpoints and advanced tracking from day one, we delivered a future-proof platform that launched in Q3 2024.

Year:

2024

Category:

UI/UX design

Client:

Sanofi

My role:

Design Lead

What I did:

UI/UX Design

problem

The legacy Nature’s Own site was a victim of its own longevity. After 10 years of incremental "patching," the platform suffered from:

  • Bloated Codebase: Performance plummeted as features were layered onto a decade-old foundation.

  • Content Decay: Out of 100+ pages, 30% were obsolete, leading to a fragmented and "messy" Information Architecture (IA).

  • Accessibility Gaps: The site failed to meet modern inclusive design standards, alienating a significant portion of the audience.

Insight

A unique technical constraint defined our strategy: critical cybersecurity protocols were non-negotiable and inherently slowed down the site.

To counteract this, we pivoted to a "Lean Stack" philosophy. Our objective was to reclaim performance by stripping back dependency on heavy JavaScript, instead leveraging the power of modern Semantic HTML and Advanced CSS to handle the heavy lifting of the UI.

Solution

We rebuilt the user experience from the ground up, aligning the digital presence with the brand’s premium direction. Our solution focused on two primary user intents: Product Discovery and Expert Health Resources.

  • Streamlined IA: We audited and pruned the 100-page graveyard, creating a lean, intuitive navigation structure.

  • Performance-Driven Design: By prioritizing CSS-based interactions over JS, we achieved a snappier, more responsive feel despite backend security overhead.

  • Accessibility First: Inclusive design was baked into the components, not bolted on at the end.

  • Frictionless Journeys: We mapped the end-to-end user flow to remove "dead ends," ensuring that the transition from reading a health article to finding a product was seamless and intentional.

Impact
Impact
Impact
0%

improvement on performance

0%

improvement on performance

0%

improvement on performance

0

accessibility score

0

accessibility score

0

accessibility score

Nature's own webstie design
Nature's own webstie design
Design System - colours
Design System - colours
Design system - typography
Design system - typography
Nature's Own website