Main Navigation Redesign

for Clarity & Scalability

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

  • reduce cognitive load to streamline users’ workflow

  • create a more intuitive and scalable information architecture

Project Goal:

Project details have been modified to protect confidential business information.

  • 3 UX designers (including me)

  • 2 Front-end Developers

  • 4 Back-end Developers

  • Training Team

  • 3 Business Owners

Team:

  • 6 weeks of discovery and design

  • 3 weeks of development time

  • 2 weeks of pilot testing

Timeline:

  • Research

    • open card sort

    • analytics review

    • usability study

  • Design

    • responsive prototyping

    • new component introduction

    • design alignment with existing branding

UX Role:

Tabs-based Navigation Increases Cognitive Strain:

PROBLEM

  • lack of hierarchy and categorization

  • cognitive overload due to a disorganized structure

  • scalability challenges with limited support for further growth

🔍 UX Issues:

  • visual clutter and noise

  • occupies excessive screen space

  • misapplied tab usage

🎨 UI Issues:

DEFINING THE INTENTIONS

  • establish a clear and intuitive information hierarchy

  • improve wayfinding and task completion across the workflow

  • minimize cognitive load through better organization and labeling

🎯 UX Goals:

  • 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

🖼️ UI Goals:

Jump to Prototype

RESEARCH

Open Card Sort to Reflect Users’ Mental Model:

We decided on an open card sort to:

  • understand how users naturally group things. This way, we are aligning with their mental model.

  • guide the labeling of the grouping,

  • and to support the design decisions of the menu items

All the while, we also looked into:

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

  • Information architecture audit to identify different views on 22 types of access levels and their user journey

DESIGN

New & Improved Navigation with Scalability & Intuitiveness!

Above view is a supervisor view with the most access to the navigation links

UI Improvements:

  1. Smaller logo to maximize usable space

  2. Tucked most tabs under dropdown menu to streamline the header.
    NOTE: A tab appears when a link is selected from the dropdown

  3. Consistent and proximate icons usage for visual clarity

  • Most navigation items were consolidated into a menu dropdown to simplify navigation. However, the most frequently used “Tasks” and “Management” links remained visible at the same hierarchy level, ensuring quick access. This reduced visual clutter, freed up more screen real estate for content, and allowed users to focus on their workflows without scanning through an overwhelming list of tabs.

  • Preserved the familiar tab interaction to avoid disorienting users. Once a link is clicked, it opens as a tab along the row, mimicking both the legacy system and common internet browsers. This made the redesign feel natural while improving scalability. And to optimize space, the tab row was limited to one line, with a “More” dropdown capturing additional tabs as needed.

  • The card sorting results informed the development of a new labeling and categorization system. Grouping items into clear categories reduced cognitive load, created intuitive navigation, and established a structure that can scale as the business grows.

  • Using a smaller logo to maximize usable space

  • Consistent use of icons and placing them close together for visual clarity

The Whys behind the design:

UX Improvements:

  1. Reduced cognitive load by displaying only relevant tabs within the current workflow

  2. Scalable navigation structure by adding link list labels that supports business growth

  3. Familiar interaction patterns to ease the transition from the legacy design

Navigation for all users:

The system supported 22 different access levels, meaning each user type could see a different combination of navigation items and content. To design effectively, we compared the highest supervisor access level view (see above) with the lowest level 1 access view (see below). This approach ensured the navigation worked seamlessly across the spectrum of permissions, without overwhelming or limiting users.

Above is a level 1 view with the least access to the navigation links

  • so, the original project was completed for a government agency. And to respect confidentiality, this case study presents a recreated version that still captures the core work and insights. I chose plants as a subject because…who doesn’t like plants?! ☘️ I’m happy to share more details during our chat 📞

  • No! I recreated and had fun with a whole new design system to present here. Thanks for noticing it though. I honestly just picked different color combinations and that it!

  • Good observation! Tabs are still needed, but we minimized the visual noise and introduced a more common navigation style. Each tabs represent a single task page that the user still needs to toggle between tabs or reference other tabs to complete the workflow.

  • Due to code limitations, the tablet component needed to be on the far right — for now.

Pilot Launch Plan

  • timebox rollout per location to prevent a jarring change in a heavily used system

  • validating information architecture with users’ expectations

  • ensuring technical stability and capturing bugs early

  • gather qualitative insights to fine-tune before scaling

  • giving the training team time to write up the user guide

They love it, and kept it!

METRICS

100% of pilot users successfully adapted to the new navigation without additional training and expressed a clear preference for the new navigation, describing it as more intuitive and clean-looking.

62% of users began utilizing other features, especially notifications, leading to a higher task completion rate.

I forgot about the old navigation, and I don't want to go back.

-Miranda

This is easy to use and looks clean.

-Thai

I use notification features all the time now. I didn’t know we had it.

-Kevin

LESSONS

What stays with me

  • Early developer collaboration reveals technical constraints:
    A component needed to be placed fixed on the far right (the tablet icon) due to non-react code

  • 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

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

  1. Set up queries to track users’ journey in analytics

  2. Collect qualitative feedback through a survey, first within 3 months, then 6 months, and maybe 9 months

  3. Start identifying phase 2 enhancements based on feedback

Next steps