A cloud resource dashboard with filters, a drill-down graph view and an export action

Capital One

Resource Dashboard

Engineers responsible for cloud resources had no single place to see them. Answering “what do I own, and what needs attention” meant three tools and a spreadsheet. I designed and built the dashboard that replaced that: one surface, two ways through it, and an export at every level.

RoleDesign engineer,
front end
StackReact, TypeScript,
MUI, AG Grid
ScopeIA, components,
end-to-end flows
StatusShipped to
enterprise users
NoteIf you would like the detail, please get in touch
Context

Everything was somewhere, nothing was anywhere

The data already existed. Ownership lived in one system, compliance jobs in another, the resource inventory in a third, and the way you answered a question about your own infrastructure was to open all three and reconcile them by hand.

That is a shape of problem I keep running into: nothing is broken, every individual tool works, and the entire cost sits in the seams between them. It never gets filed as a bug because no single step is wrong. It just quietly taxes everyone who has to do it.

Video / loopworkflow demo, looping

The three-tool reconciliation, before the dashboard existed

A screen recording of the old workflow, so the reader feels the cost instead of being told about it. Cut it tight: the point is how many windows it takes to answer one question.

  • Window 1: ownership lookup, paste an identifier
  • Window 2: the compliance job list, find the same resource
  • Window 3: the inventory, confirm what it actually is
  • End on all three open at once
Size 799x391Format muted mp4 + webm, or animated webpLength 8-12s, seamless loopCursor visible
Key decisions

Two views over one dataset

Two groups of people arrive at a tool like this with genuinely different questions. One has a job to do today and wants the shortest path to it. The other is exploring, and needs to understand the shape of what they own.

Rather than average them into one compromised view, the dashboard has two and makes the default the urgent one. The job-focused view opens first, sorted by due date, because someone arriving without a plan is usually arriving because something is due. The hierarchy explorer is one toggle away for everyone else.

Annotated stilldots-to-lines callouts

The default view, annotated

One clean capture of the job-focused view with four callouts drawn onto it: a dot on the element, a hairline out to a short label in the margin. Same device the reference build uses to explain a screen.

  • Callout: the urgency sort, and why it is the default
  • Callout: the view toggle
  • Callout: filters that persist across both views
  • Callout: the export, scoped to what is on screen
Size 799x391 @2xFormat PNG, no OS chromeNote leave ~120px clear on the right for labels

Drilling without getting lost

The explorer goes environment, then region, then type, then the resource itself. Four levels is enough to get lost in, so every level carries its own counts and a breadcrumb back out.

The counts are the part that earns its place. A level that only lists categories tells you where you can go; a level that lists categories with how much is in each tells you where you should go. It is a small addition that changes the drill-down from navigation into triage.

Sequencezoom-in sequence, four steps

Drilling environment to region to type to resource

Four frames of the same explorer, one per level, so the reader sees the descent rather than one arbitrary level. Keep the breadcrumb visible in every frame; it is what makes the sequence read as a single movement.

  • Frame 1: environments, with counts
  • Frame 2: regions inside the chosen environment
  • Frame 3: resource types
  • Frame 4: the resources themselves
Size 799x391 @2x eachFormat 4 PNGs, or one cross-fading loopNote same window size and scroll position in all four

An export at every level

Every table exports, and what it exports is exactly what you are looking at: current filters, current level, nothing else.

This sounds like a checkbox feature and was one of the most-used things in the tool. People do not live in dashboards. They come in, narrow down to the thing they care about, and then need it somewhere else — a ticket, a spreadsheet, a message to the team that owns it. A dashboard that cannot hand off its own answer sends everyone back to the reconciling-by-hand it was built to remove.

Impact

From three tools to one

The reconciliation step is gone. What used to be a cross-tool search is a paste-an-identifier lookup, and what used to be invisible — which of your resources have work outstanding — is the screen that opens by default.

The dashboard shipped to enterprise users. Figures below describe the shape of the work rather than usage numbers, which are not mine to publish.

BeforeAfter

No single view of your resources

One surface, two ways through it

Search across several tools

Paste an identifier, get the resource

Outstanding work invisible

Default view, sorted by urgency

Manual, fragmented exports

One-click export at any level

Metadata hard to parse

Organised for scanning

No compliance history

Event timeline and table