UX DESIGN ✻ DATA VISUALIZATION
Role
Product designer
Collaborators
1 product designer
timeline
1 week, Mar 2024
I was tasked with solving a critical "context-loss" problem in our troubleshooting workflow for one of our largest enterprise customers who conditioned their contract renewal on the delivery of a superior drill-down experience. The challenge was to enable users to drill down through five or more layers of hierarchical data, often exceeding 100,000+ entities per layer, without losing their place in the diagnostic chain. I successfully delivered the experience, de-risking the account and securing renewal.
Our power users (DevOps and SREs) reported that deep-dive troubleshooting was a cognitive minefield. As they navigated from Clusters down to Pods, they frequently lost the "lineage" of their investigation. We also juggled a set of constraints for the solution.
Massive scale
Each layer of the hierarchy could contain tens of thousands of violating entities, requiring a solution that could support loading constraints.
Systemic gaps
Our company-wide design system (Magnetic) lacked a pattern that could retain context beyond three levels of nesting.
Critical stakes
This wasn't just about "browsing"; it was about identifying health violations in real-time. Losing context meant losing time during a system outage.
THE CHALLENGE
I initially explored a Magnetic Design System-compliant approach using nested cards and drawers. While this adhered to brand guidelines, my usability audit proved it failed the core user requirement: context retention.
The breaking point: Once a user hit the fourth level, the system forced a page refresh, completely severing the visual link to the parent entities.
Miller columns are a horizontal navigation framework common in file systems but rare in complex observability data. This allowed for an infinite "scroll-to-the-right" mental model where every parent remains visible with a small vertical footprint. Nested trees tend to breakdown in utility after 3 layers as data gets squished, but with these columns, users could traverse deeply until the final leaf and still retain the path they took to get there.
Looking at examples of miller columns across different products, I complied a list of common anatomy traits between them.
Recognizing the technical constraints, I integrated gloabl search and lazy loading within each column. This ensured that even at massive scales, the UI remained responsive and searchable.
