Honeycomb Trace Explorer

Product shot of the redesigned Honeycomb trace waterfall interface shown on a desktop monitor. The new design has lighter, brighter colors, a visual summary of the trace at the top of the page, pinned fields in the sidebar, and zoom and isolate features for subtrees of the trace. Design mockup showing the new Honeycomb trace zoom feature. The trace waterfall is zoomed into the time span of a trace subtree. There is a small box on the visual trace summary showing what part of the trace the user has zoomed in on.

About This Project

Honeycomb is an observability platform that offers distributed tracing, which is a method for tracking the path an application's requests take through a system. As a product, Honeycomb can ingest, store, aggregate, query, and display trace data.

The Honeycomb Trace Waterfall is an interactive visual interface for exploring data within an individual trace, and it's part of the core exploration loop within the product. I partnered with Product and Engineering to research customer needs and pain points and with our Visual Design team to explore a new look and feel that reflects the next iteration of our design system.

This redesign includes time span zoom, subtree isolation, an interactive trace summary, better error navigation, improved visual design, and pinned fields in the sidebar to make it easier for teams to highlight and share important information during investigations.

Early analytics and feedback from the trace summary release show significant improvement in the speed of finding critical spans during investigations. This redesign was so much fun to work on, and I can't wait to see where our teams and customers take it next.

To view one of the iterations as a clickable prototype, please contact me.

Objective

Redesign the Honeycomb Trace Waterfall to improve the speed of finding critical spans

Tools

Figma, ProdPad

Categories

Responsive Design, User Research, DevEx, UI, Visual Design