LF.
This portfolio is currently private. Enter the password to continue.
That password didn't match.
Don't have the password? Reach out for access.
Arista Networks · Design Systems · 2026 · In progress
A new visualization component in CloudVision's design system that lets network admins read the current state and the recent history of any entity at a glance — built once, used by every team that needs the same view.
01 · The goal
The Time Series Component is a new visualization element in CloudVision's design system. It lets users clearly identify the state of a particular entity — a device, a link, a service — within a compact timeframe. The aim is a single visualization that helps network admins quickly identify not only the current health of their network, but also surfaces recent history to identify trends and bring awareness to critical events — both the ones happening right now and the ones that may have been missed over the past few hours or overnight.
02 · The problem
Before sketching new visualizations, I looked at the ones CloudVision already had — hoping to find something that already fit. But most of our existing graphs and charts couldn't handle the scalability and flexibility this project needed. They were designed for narrower use cases: single-metric line charts, simple bar graphs, status tiles.
Instead, I took inspiration from outside the product — heatmaps, time graphs, status grids in observability tools — to build the foundation of a new component that could carry the load.
03 · Research · Must-haves
Field research and conversations with operators boiled down to three requirements. These became the constraints every design decision had to pass through.
Must-have 01
"I want to be able to easily identify the state or status of this particular entity at 2:25 AM last night."
Must-have 02
Networks often have thousands of devices. Even though not all of them will show at once, the component needs to handle a large number of items easily.
Must-have 03
"I want items that are important to me to stand out, and to be clear that I can interact with them for more information."
This page covers the design process at a high level and shows the key visuals.
If you'd like an in-depth design analysis with research artifacts, iteration history, decisions, and trade-offs, feel free to reach out and I'll walk you through it.
Get in touch04 · Anatomy and Status
The component breaks down into three layered concerns: the overall composition (header, legend, action strip, body), the individual node row, and the timeline itself. Designing each piece with clear ownership made it easier to reason about variants and states later.
05 · The component in context
The component had to work in two worlds: dashboards built on the newest design system patterns, and older ones still in use. Both shown here.
06 · Customer feedback
Over the months that followed launch, customers told us the empty state's original colour was misleading. It suggested everything was fine even when there were no events in their selected filter. We shipped a quieter neutral tone, and the ambiguity went away.
Before
After
Next project
