Enterprise Left Navigation
Unified navigation framework for a 20+ product enterprise platform, redesigned after a major rebrand to feel consistent across every application.
MY ROLE
Interaction design · Visual hierarchy · Accessibility · Component states · Motion Design
Outcome
Delivered a more modern navigation system with the capacity and interaction range to scale across 20+ different products. The goal was to unify every product under one framework, eliminating the need for multiple one-off variations going forward.
The Challenge
The goal wasn't a visual refresh — the navigation needed to work across a large enterprise ecosystem, support both expanded and collapsed states, remain clear in light and dark themes, and provide predictable feedback across products. It also needed enough structure for consistency without blocking individual applications from supporting their own navigation needs.
Previous design
What I did
01
Standardized the core navigation structure across 20+ enterprise applications
02
Designed expanded and collapsed states for different product workflows
03
Defined default, hover, active, selected, and focus states
04
Established accessible color and contrast behavior across light and dark themes
05
Refined spacing, alignment, icon treatment, and hierarchy for faster scanning
06
Documented reusable patterns and specifications for design and development teams
Key design decisions
Expanded and collapsed states
Designed both navigation modes to preserve orientation and recognizability as users moved between full labels and a compact icon-based view.
A scalable shared framework
Created a common navigation structure reusable across the product suite, while still letting individual applications support their own content and workflows.
Clear interaction feedback
Defined consistent hover, selected, active, and focus states so users could quickly understand their current location and how the navigation would respond.
Accessibility across themes
Refined contrast, focus treatment, and color relationships to maintain readability and interaction clarity in both light and dark modes.
Consistent hierarchy and spacing
Standardized padding, alignment, icon placement, and spacing to improve scanability and reduce visual differences between products.
Motion Design
Built a motion demo to show hover, active, selected, and focus states in motion, with real timing — so both designers and developers could see exactly how the navigation should feel to use, not just how it should look.