I designed one card that became eleven dashboards
A lending portfolio's analytics, rebuilt on one frozen card in a one-week sprint.
The product reports on a loan book for a lending company's credit, risk and portfolio teams. Its headline measure is PAR, portfolio at risk: the share of principal overdue past 30, 60, 90 or 180 days.
In one week before a conference, I built the Storybook and a working v2 on an API that couldn't change, by designing one card well and freezing it.
- Senior Experience Designer
- Role
- Sole designer · 3–5 developers
- Team
- One week · 2026
- Timeline
- Shown at conferences and pitches
- Status
01 / Context
Eleven dashboards, one week.
A first version had existed for over a year. The v2 brief was a new presentation layer on an API that wouldn't change, and the navigation already listed eleven dashboards. Designing eleven data-heavy pages one at a time would have meant eleven separate efforts, with consistency resting on memory.
The opportunity
What if one card, designed well and frozen, could carry every dashboard?
The rules were strict: the backend stays untouched, the Storybook is locked, the template page is frozen once it's done, and nothing runs until I've approved the plan.
02 / The template
A card that carries the whole product.
Every dashboard is a twelve-column grid of the same card. It holds a chart or a table, its own filters, measures and group-by, comments, and a one-line AI insight. Because the card does so much, a new dashboard only has to say which cards it has and where they sit: one generic page reads each dashboard's layout from the API and draws it.
03 / Charts
Making three lines of risk tell apart.
The inherited charts were flat and heavy. The first pass used a purple ramp with a same-hue border, and on a chart with several metrics the border made neighbouring bars read as one shape. The bars lost their borders, kept a gradient that ends solid at the baseline, and rounded only their top corners.
Stacks took three rounds
Rounding every segment made a column a pile of pills; rounding none looked dated. The shipped stack rounds the base's top corners, every segment above on all corners, with a 2px gap between them.
04 / Colour
Breaking up the purple wall.
Brand purple looked right on one card and wrong on a page: twelve cards became one purple wall. The palette went through three generations, and then a rotation rule: each card starts one step further along it, so the first leads with purple, the next with blue, the next with teal.
No two neighbours alike
A column of line charts reads as one long line, so no two adjacent cards, in a row or a column, default to the same chart type. People can still switch any card.
05 / Restraint
Modern, then pulled back.
From a reference image I asked for something less "monotonous and boring": gradients, a glow under each series, glass tooltips. About half survived real data. Gradients that faded to nothing looked disabled, lines went from 2.5px to 1.5px, and the reference's ribbons became an interaction instead: hover a bar and the others go grey.
PAR 30+ · Jun: 4.8%
Use the arrow keys to move between bars.The AI insights card
Of four directions I combined the two most minimal: figures highlighted in the text, and a gradient on the border only. A glow went on and came off twice: "No, the glow isn't working. I want the gradient border."
06 / Honesty
The Sankey we didn't draw.
One rule decides which chart types a card offers: bar and line always, stacked when there's more than one series, pie for parts of a whole, and Sankey only when the data says how much moved from where to where.
Stacked: the card has more than one series.
Pie: one series of parts that add up to a whole.
Sankey: the data says how much moved from where to where.
Roll rates looked like the obvious place for a Sankey: loans moving between overdue buckets month to month. But the API sends a rate per bucket per month, not volumes. A Sankey drawn from rates would invent the volumes behind each band, and on a risk product a convincing chart built on a guess is worse than no chart. Roll rates stayed a table, and the backend got a request for real flow data.
07 / Scaling
Adding beside the template, not bending it.
Most dashboards needed nothing new. Asset-liability management leads with single numbers, so instead of squeezing a big number into the chart card I asked for a separate, quiet KPI card: "Don't try to fit it in the existing components."
Comments that remember
A comment carries the filters, dates and view it was written in, so the next reader can apply that context and see exactly what the author saw.
08 / Impact
Every dashboard after the first was a layout.
The product isn't launched yet; it's being shown at conferences and in sales pitches.
09 / Takeaway
Freeze one thing, then multiply it.
“Don't draw what the data can't say.”
The week spent on one card paid for every dashboard after it. Colour had to work on a page, not just on a card. And trying an idea in the product, then cutting what didn't hold up, was faster than debating it.