Defining Behavior Before Visuals.
The company had 6 distinct products that were being merged into a single "Platform." However, each product had its own navigation logic. Users felt like they were leaving one website and entering another every time they switched tools.
The tech debt was massive.
We needed a single source of truth for routing that solved three core issues:
I audited every menu item across 6 products. I discovered that 40% of the links were redundant. I proposed a "Hub and Spoke" model:
• The Global Bar: Product switcher, User profile, Global search.
• The Side Rail: Contextual navigation for the active product.
Navigation isn't just a list of links; it's a series of behaviors. I defined:
• Active state logic: What happens when a user is in a sub-sub-menu?
• Hover behaviors: Delay timings for fly-out menus to prevent "diagonal mouse" frustration.
• Responsiveness: A "Slim" vs. "Expanded" state for the sidebar.
Instead of just handing off Figma files, I delivered a Navigation Matrix—a spreadsheet mapping every URL path to a navigation state. This became the source of truth for the engineering team.
A key refinement was the site-switching experience. Initially, complex controls confused users about their location. By simplifying the tenant switcher from a search box to a dropdown and moving it to the top global bar, I provided a clear "where am I?" anchor. This small shift in IA made the entire platform feel more integrated.