CASE STUDY

Direct Service Navigation

Overview

Liberty Mutual’s outdated mega-menu became a streamlined, accessible global navigation aligned to the design system — driving a $4.6M revenue impact by reducing support calls and increasing cross-sell.

Project Details

Role: Lead Product Designer
Team: PM, Engineering, Data Science, Customer Success
Timeline: 12 months (concept → launch)

Challenge

Success Metrics

Process

Solution (Key features)

Outcomes

Redesign navigation shown 3 levels deep on desktop and mobile screens

The redesigned menu generated $4.6M by reducing customer calls and increasing cross-sell revenue. Best of all we were meeting our customers' needs.

Challenge

Help customers quickly find policies, billing, claims, and account settings — while exposing helpful education and offers — in a scalable, brand-aligned pattern.

Success Metrics

Higher discoverability and task completion from nav
Reduce customer service calls
Increased engagement with education/cross-sell
WCAG 2.1 alignment with the design system

Process

Research & Discovery: Card sorting and tree‑jack testing; competitive analysis; analytics and support‑ticket review.
Content Governance: Clear taxonomy and labels to reduce cognitive load.
Concept Exploration: Multiple nav concepts explored for usability and scalability.
Iterative Prototyping & Testing: A/B tests on horizontal vs vertical structures.
Mobile‑First Considerations: Vertical nav simplified mobile implementation and accessibility.
Accessibility Compliance: Partnered with SMEs and engineers to ensure WCAG 2.1 adherence.
Brand Alignment: Collaborated with the design‑system team for consistent visuals and interactions.

Outdated mega menu

Screenshot of original "mega menu" navigation

When I joined the team, the Liberty Mutual customer site was off brand and the bloated navigation did not provide users with quick access to relevant information.

Discovery Tests

Screenshots of various user tests from the discovery phase

The greater UX team worked together to streamline menu options to their most essential and direct paths. Card sorting and tree jack tests were used to prioritize customer tasks and frequent flows.

Design Collaboration

Examples of 3 proposed design directions

The design team submitted various visual prototypes to test and explore concepts and directions.

Visual Refinement

Examples of visually refined designs used for testing

Once the team settled on two concepts, I worked closely with our design system lead to refine the visuals and define new patterns. We wanted to test vertical and horizontal versions. Users were used to a horizontal format, but vertical would save time on mobile development.

Testing Results

Users liked both. The formats we tested scored nearly equally with a marginal preference for vertical. We ultimately declared a winner based on the vertical version translating to mobile with no additional tech lift.

Accessibility Rules

Documentation of applied accessibility standards

Designing for everyoneWith a design direction in place, I paired with our Accessibility SME and the developer team to ensure we complied with WCAG 2.1 standards.

Solution (Key features)

Streamlined Vertical Navigation: Improves usability and mobile development efficiency.
Consistent Patterns: Visual and interaction aligned to the design system.
Scalable Architecture: Flexible for future enhancements.
Accessibility: WCAG-compliant interactions and focus states.

Outcomes

$4.6M revenue impact via fewer service calls and better cross‑sell
Higher satisfaction and faster access to key services
Easier maintenance and future scalability

Google Sites

Report abuse