Main Navigation Redesign for
Clarity & Scalability
Project Overview
A nationwide federal case management platform had outgrown its tab-based navigation, creating visual clutter, buried workflows, and no room to scale across 22 access levels.
UX Role
Research:
Open card sorting
Usability testing
Analytics review
Strategy:
Proactive problem framing
Facilitated design workout session
Design:
Responsive prototyping
Design system alignment
Team
3 UX Designers
2 Front-end
4 Back-end
Training Team
3 Business Owners
Outcome
A scalable dropdown navigation grounded in how users actually think and work
NOTE: Details have been modified to protect confidentiality while preserving the integrity of the work.
PROBLEM
Tabs-Based Navigation Increases Cognitive Strain
The UX team identified a critical structural problem: the platform's tab-based navigation had grown unmanageable. Spanning multiple rows of tabs, it consumed a significant portion of screen real estate. With 22 access levels and continuously expanding features, the navigation had no logical hierarchy, no room to grow, and no clear path for users to find what they needed.
The platform serves a diverse mix of users, including supervisors, administrators, and case workers, each with different workflows and access levels, all navigating the same broken structure.
UI Issues
Multiple rows of tabs consumed excessive screen real estate
Visual clutter and noise are competing with core workflows
Tabs are misused as global navigation, a component designed for content switching, not system-wide wayfinding
UX Issues
No hierarchy or categorization, as all items are treated as equal, regardless of importance or frequency of use
Cognitive overload from a flat, disorganized structure that offered no wayfinding support
Structurally unable to scale as new features and access levels were added
Design Goals
The team set out to replace a navigation pattern that had outlived its usefulness.
Establish a clear information hierarchy that reflects how users across roles navigate the system
Improve wayfinding and task completion by reducing the cognitive effort required to find anything
Reclaim screen real estate for the work that actually matters
Create a scalable navigation architecture that can absorb future growth without breaking
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
and discovered:
users categorization
labelling language
and what was surprising is that most users do not have access to the full list
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:
Smaller logo to maximize usable space
Tucked most tabs under dropdown menu to streamline the header
NOTE: A tab appears when a link is selected from the dropdownConsistent 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:
Reduced cognitive load by displaying only relevant tabs within the current workflow.
Scalable navigation structure by adding link list labels that support business growth.
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 video at the top of the page) 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's 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. In addition, the tab row is now limited to one row with the last tab addressing the overflow tabs.
-
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.
28% 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
Next steps
Set up queries to track users’ journey in analytics
Collect qualitative feedback through a survey, first within 3 months, then 6 months, and maybe 9 months
Start identifying phase 2 enhancements based on feedback