Main Navigation Redesign for clarity and scale

DISCLAIMER: redacted project due to signed NDA

Purpose

  • to redesign main navigation to improve usability, clarity, and scalability

  • reduce cognitive load to streamline users workflow

  • create a more intuitive and scalable information architecture

Issue

🔍 UX

  • lack of hierarchy and categorization

  • cognitive overload due to disorganized structure

  • catering to multiple personas with different work flow and views

Goals

🎯 UX

  • establish a clear and intuitive information hierarchy

  • improve wayfinding and task completion across workflow

  • minimize cognitive load through better organization and labeling

Strategy & Approach

  • Card sorting to uncover natural content groupings and align the navigation with user mental models

  • Data analysis to understand user screen sized, device types and common entry points

  • Information architecture audit to identify different workflow and uncover structural gaps across user roles and access level

  • Iterative design process with wireframes and prototypes and ensuring accessibility standards and alignment with the design system

  • Pilot launch of redesigned navigation, followed by user feedback collection and iterations to validate usability and ensure business and user alignment

Design

Metrics

“I forgot about the old navigation, and I don’t want to go back (to the old navigation style).”
— Miranda

Lesson Learned

add before and after

🎨 UI

  • visual clutter and noise

  • occupies excessive screen space

  • scalability challenges with limited support for further growth

🖼️ UI

  • simplify the visual design for clarity and focus

  • reduce screen real estate taken up by navigation

  • create a scalable layout that can grow with the business needs

  • align navigation visuals with the overall design system for consistency

add before and after

✅ 100% of pilot users successfully adapted to the new navigation without additional training

💖 100% of pilot users expressed a clear preference for the new navigation, describing it as more intuitive and user friendly

🔁 92% improvement in navigation speed, reducing frustration and support request

“This is so easy to use and look modern”
— Phil

  1. Early developer collaboration reveals technical constraints:

    a component needed to fixed on the navigation due to non-react code

  2. Design changes can unexpectedly increase feature visibility:
    The redesign unintentionally drew much more attention to notifications and the chatbot, which had existed but were previously overlooked by users

  3. Importance of clear roadmaps and phased designs:
    Without a defined roadmap or phased plan, the conversation often jumped around design elements topics, which add confusion to the devs and design team. Having a clear, phased roadmap improves prioritazation, communication, and cross-team clarity