Readout · a live lab on data and dashboard design
A dashboard should answer the reader's question before it shows its data.
Below is a working dashboard. Everything under it dissects why it is built this way. The same numbers can mislead or clarify, exclude people or include them, overwhelm or calm. Pick a lens and watch the whole page re-read itself.
uptime 412ms
p95 latency
Growth is real, but it leans on one plan and one cohort. Watch concentration before celebrating the curve.
Same six tiles, three readings. The lens does not change the data. It changes which truth gets the spotlight, and that is a design decision, made on purpose.
EXHIBIT 02 · chart choice
Pick the chart that answers the question, not the one that looks impressive.
The question here is simple: which channel drove the most signups, and by how much? A sorted bar chart answers both at a glance. A pie makes you estimate angles and gives up on ranking entirely.
Rank reads top to bottom. Length is the easiest visual channel to compare, so how much more is obvious: Organic is roughly 35% above Referral and nearly five times Email.
■ Referral
■ Paid
■ Social
Now compare Referral to Paid. You cannot, not without the legend and some mental arithmetic. Pies hide rank, punish more than three slices, and force angle estimation, the hardest visual judgment of all.
EXHIBIT 03 · honesty
A truncated axis is not a zoom. It is a way to make a flat line look like a hockey stick.
Same four numbers: quarterly retention moving from 94.0% to 95.4%, a real but small gain. Start the axis at 93 and the last bar towers over the first. Start it at zero and you see the truth: barely a nudge.
The gain is real and worth reporting. It is also small. A reader sees a steady, modest improvement, which is exactly what happened.
Identical numbers. Now Q4 looks more than double Q1. Nothing here is technically false, and that is what makes it the most common deception in business reporting.
EXHIBIT 04 · drill-down
A number on a dashboard is a door. The reader should be able to open it.
An overview that cannot be questioned is just a poster. Activate any region below, with a click or with the keyboard, to see the channels behind its total. The breadcrumb walks you back. Every bar is reachable by Tab and triggered by Enter or Space.
Tip: the bars are buttons. Tab to one and it shows a focus ring.
| Channel | Signups | Share |
|---|---|---|
| Organic | 980 | 47% |
| Paid | 720 | 34% |
| Referral | 400 | 19% |
| Channel | Signups | Share |
|---|---|---|
| Organic | 1,200 | 43% |
| Paid | 900 | 32% |
| Referral | 700 | 25% |
| Channel | Signups | Share |
|---|---|---|
| Organic | 760 | 40% |
| Paid | 640 | 34% |
| Referral | 500 | 26% |
| Channel | Signups | Share |
|---|---|---|
| Organic | 700 | 44% |
| Paid | 560 | 35% |
| Referral | 340 | 21% |
EXHIBIT 05 · accessibility · the showcase
If the chart only works for someone using a mouse with full colour vision, it does not work.
One specimen, built to a real bar: the two series are told apart by shape and line style, not colour alone. Every point is reachable with the arrow keys and read aloud as you go. The same data is one tap from a proper table. Motion is suppressed when the system asks for it.
Keyboard: focus the chart, then Left and Right arrows move between months. Home and End jump to the ends.
| Month | Activation | Retention |
|---|---|---|
| Jan | 38% | 68% |
| Feb | 41% | 70% |
| Mar | 44% | 71% |
| Apr | 46% | 73% |
| May | 49% | 74% |
| Jun | 52% | 76% |
- Shape and line style distinguish the series, so the chart survives greyscale and the common forms of colour blindness.
- Every data point is reachable and announced without a mouse.
- A real, semantic table is always one control away, never an afterthought.
EXHIBIT 06 · density
Showing everything at once is the same as showing nothing. Rank the data, then hide most of it.
Same nine metrics, two treatments. When every tile shouts at the same volume, the reader has to do the prioritizing the design refused to do. Lead with the one number that matters and let the rest wait behind a disclosure.
Eight more metrics
Which of these should you act on this week? The layout has no opinion, so the answer takes effort that a dashboard is supposed to save.
EXHIBIT 07 · AI trust calibration
When an AI does the reading, the chart owes you its confidence and its evidence, not just a number.
Generated insight is only useful if it can be questioned. A bare assertion asks for blind trust. A calibrated one shows how sure it is and puts the basis one click away, so a person can decide whether to believe it.
"Revenue will grow 23% next quarter."
No range, no confidence, no inputs. If it is wrong, you find out next quarter. This is the kind of number that quietly walks into a board deck and becomes a commitment.
Revenue is likely to grow 18% to 26% next quarter.
Show the evidence
- Last six quarters grew 16, 19, 21, 20, 22, and 24%.
- Assumes the current pipeline closes at its trailing rate.
- Does not account for the pricing change shipping mid-quarter, which widens the range.
A range instead of false precision, a stated confidence, and the assumptions on demand. Now a human can agree, push back, or ask for the model to be re-run.
SANDBOX 08 · compose a view
A good tool gives you choices and an opinion. Pick a question, and it offers the chart that answers it.
This is a constrained surface, not a blank canvas. Choose what you want to know, then choose how to show it. A sound choice gets a quiet confirmation. A poor one gets corrected, with the reason stated plainly, the way a thoughtful default would.
1 · What do you want to know?
2 · How should it be shown?
Pick a question and a chart to see the result.
The point is not to stop you. It is to make the better choice the easy one, and to say why.
EXPLAINER 09 · the lens
Three people open the same dashboard and read three different stories. A good one knows that.
The lens control at the top of this page is the signature idea. It does not filter or recompute anything. It re-annotates, shifting the spotlight to the truth each role came looking for. Same data, honest in every reading, framed for who is reading.
Optimizes for: growth and durability. Looks first at: the trend and where revenue concentrates. The question they bring: is this real, and what could break it?
Optimizes for: the funnel. Looks first at: activation by cohort. The question they bring: where is the drop-off, and which cohort proves the fix is working?
Optimizes for: reliability under load. Looks first at: latency tails, not the green uptime headline. The question they bring: what is quietly degrading before it pages someone?
Scroll back up and switch the lens. The verdict, the tile notes, and the accent colour all change. The numbers never do.
10 · honest framing
What this is, and how I would know it worked.
Readout is a self-initiated design lab, in the same family as my AI Product Design Lab pieces and the Personalization Studio. It is not shipped client work, and it does not pretend to be. There are no real companies here and no claimed results. Every number is synthetic and labelled illustrative, chosen to make a design point clearly rather than to impress.
I built it because the hardest part of dashboard design is rarely the rendering. It is the judgment: which chart, which baseline, which detail to surface, whom the view is for, and how much to trust a machine that offers to read the data for you. This page argues those positions by demonstrating them.
Tools and approach are visible on purpose. Hand-built SVG, no charting library, theme-adaptive colour, and the colour-blind-safe Okabe-Ito palette as the categorical default.
- Every chart passes a greyscale and colour-blind check, not just a colour one.
- Every interactive element is reachable and operable by keyboard with visible focus.
- No truncated baselines, no dual-axis tricks, no decoration that distorts.
- Any AI-stated number carries a confidence and a path to its evidence.
If this shipped, I would test it the way I test real work: task-based usability sessions timing how fast each role finds its answer, an accessibility audit against WCAG AA with assistive-technology testing, and a comprehension check on whether readers correctly judge the size of a change. Those are the outcomes I would hold it to.
Explore more work
The closest neighbours: the dashboard taken to a real operator domain, the same honesty applied to compliance, and the AI lab piece on verifying what a model claims.
Vantage, time to insight
The same hand-built, accessible visualization taken into a live incident console, where the cost of a misread chart is measured in downtime.
View case study
Conformly, EAA compliance agent
Where claims discipline matters most. An accessibility compliance agent built so that what it states is exactly what it can stand behind.
View case study
Ground, verify what AI claims
Exhibit 07 taken further: a lab piece on holding generated insight to its evidence before anyone acts on it.
View case study