Intro
- Our product suite already used Apps and Domains as two top-level navigation layers in the header. Adding Projects as a third created severe navigation overload across the suite.
- Because Apps, Domains, and Projects mix in non-linear ways with no natural hierarchy, users struggled to maintain context and switch environments efficiently.
- I explored and validated interaction and visual patterns to solve two core challenges: how to display three navigation levels without cluttering the header, and how to let users switch contexts quickly without overwhelming them with nested menus.
Solution
Through iterative explorations and prototype testing, I reworked the navigation model into a clean, balanced structure that handles three distinct organizational layers without overwhelming the interface.
Visual Hierarchy
To solve visual clutter, I separated macro navigation from contextual controls by moving the App switcher into the side menu. I also replaced the persistent search bar with an icon overlay to free up horizontal space, leaving only the essential Domain and Project controls visible in the header.
Interaction & Workflow
I designed simple single-click dropdowns for each level, replacing complex nested menus with a predictable step-by-step navigation pattern.
The updated layout maintains clear context as users switch between levels, ensuring consistent visual hierarchy across all views.
Moving the App switcher to the sidebar established a clear structural relationship of App > Domain > Project that scales across the entire product suite.
User Feedback & Validation
Usability testing confirmed that all participants preferred the cleaned-up header layout over having all three navigation levels crammed into the top bar.
Testing revealed that users found multi-level flyout menus confusing, whereas the single-click step-by-step pattern aligned perfectly with their expectations.
Participants successfully completed complex context-switching tasks with zero navigation errors, citing that the new structure felt significantly cleaner and easier to predict.
Key Explorations & Decision Trade-Offs
Before arriving at the final design, I established a baseline ordering of App > Domain > Project after team alignment to maintain structural consistency across pages. From there, I narrowed our explorations down to two primary layout options and two interaction methods.
Layout Concepts
- Layout A kept all three dropdowns (App, Domain, and Project) in the main top header.
- Layout B moved the App switcher into the side menu to separate macro application switching from contextual filtering.
Interaction Concepts
- Single-click dropdowns allowed users to navigate one level at a time.
- Nested flyout menus allowed users to jump across multiple levels in a single action (such as going from Domain A / Project A directly to Domain C / Project C).
Research Insights & Final Pivot
Partnering with user research, we tested these combinations against multi-step scenarios, such as navigating from the Admin Center to specific apps and domains.
Participants universally rejected Layout A due to header clutter. While multi-level flyouts seemed efficient during early brainstorming, testing proved they felt overwhelming in practice. Users actually preferred moving one level at a time because multi-level jumping was rarely needed, making Layout B with single-click dropdowns the clear, validated winner.