Systems Architecture for Scalable Usability — rebuilding navigation for a multi-product cybersecurity platform after four acquisitions.
The company had grown through acquisition. Each acquired product came with its own navigation architecture — its own URL structure, its own sidebar logic, its own concept of what "home" meant. When these products were being merged into a single platform, no one had unified the navigation layer. They'd just placed products next to each other and hoped users would figure it out.
The result was a "Frankenstein" navigation experience. Users switching between products felt like they were changing apps. Active states were contradictory — the same section could be highlighted in two different sidebars simultaneously. Deep links broke across suites. 40% of the visible menu items were redundant, appearing in multiple places with different labels for the same destination.
I spent the first phase auditing every navigation surface across the six products. I documented every menu item, every route, every contextual label, and every state — hover, active, disabled, selected. What I found confirmed the scope of the problem:
I proposed a Hub and Spoke IA model. The core idea: separate global navigation from contextual navigation. Stop asking users to find their way through a monolithic sidebar that tried to do everything for every product simultaneously.
This separation gave users a stable global anchor (the hub) while letting each product's navigation be purpose-built for its workflows (the spoke). Users in the SIEM view got a SIEM-optimized sidebar. Users in endpoint management got endpoint-specific navigation. The product switcher moved them between contexts — but the global bar always stayed the same.
The most important decision was sequencing. I refused to open Figma until I had written the behavioral specification — a document defining every navigation state, every transition rule, every edge case. Hover delays for fly-outs (to prevent "diagonal mouse" frustration). How active state should persist when a user is three levels deep in a sub-menu. What breadcrumbs should show after a deep link. What happens when a user's session expires mid-navigation. Engineering needed these answers before a single pixel was placed.
I worked with the engineering lead to define a single JSON routing payload that would govern navigation across all six products. Instead of each product maintaining its own routing table, one structured data file would define: the navigation tree, permission levels per item, active state logic, and deep link mappings. This meant that adding a new product or updating a navigation item required a change in one place — not six. It also meant QA could test routing behavior systematically, not product by product.
Security operations center users work on wide monitors at high information density. They don't need a labeled sidebar eating 240px of horizontal space. I designed a Slim state (icon-only, 56px wide) that collapsed the sidebar without hiding it, preserving spatial awareness while maximizing content area. The transition between Slim and Expanded was state-persisted per user — your preference followed you across sessions. This required a simple localStorage flag but dramatically improved the experience for power users who spent 8-hour shifts in the platform.
The behavioral matrix was the most valuable deliverable of this project. It wasn't a Figma file — it was a structured document that engineering could implement directly. Here's a representative sample of what it covered:
Previous handoffs had been Figma-first: hand the engineer the frames, answer questions as they come up, patch issues in QA. This project flipped that model. I delivered three artifacts before a single Figma frame was handed over:
Figma frames came last — and they were faster to build because the hard decisions had already been made. Engineering had fewer questions. QA had fewer surprises. The spec became the source of truth.
One of the most impactful late changes was the tenant switcher. The initial design used a search field — type to find your organization. In usability testing, this caused immediate confusion: users didn't know what to search for, and the input field felt like it required knowledge they didn't have (exact tenant names).
I replaced the search box with a dropdown — a pre-populated list of tenants the user was authorized to access, surfaced in priority order. The dropdown moved to the top global bar, making it a permanent "where am I?" anchor rather than a buried utility. This one change resolved the tenant switching confusion pattern that had appeared in multiple support tickets. Users could see their options instead of having to remember them.
The framework shipped and was adopted across all six products within four months. The JSON-driven routing eliminated the per-product navigation maintenance burden that had been generating ongoing engineering debt.
The biggest takeaway: navigation design is information architecture, not visual design. The visual execution took a fraction of the time once the structure was right. The work that mattered was the audit, the matrix, and the specification — the unglamorous foundation that let everything else ship cleanly.