Healthcare Design Systems
Executive dashboards for U.S. hospital systems. Each engagement asks a version of the same question: where do we rank against hospitals like us, and what do we do about it. Around six dashboards per client, about ten engagements, all of it built on a data visualization design system I created at Vizient.
Sr. Designer, Data Intelligence & Visualization
Vizient, U.S. hospital systems
2022 to present
Figma, Power BI, Tableau
Surgical Value Optimization
Rank in the top percentile against hospitals like us
Hospitals do not come to us for a dashboard. They come with a goal: move into the top percentile of a cohort of comparable hospitals. The cohort is matched on size, case mix and type, so the comparison holds.
That framing decides everything downstream. A hospital already knows its own readmission rate. What it is buying is the ability to see that number sitting next to the hospitals it considers peers, and to find the service line where the gap is worth closing this year.
The engagement starts in a room. Executives, analysts, and the people who will actually open the file every Monday. We work out which measures the goal depends on, who reads them, and what decision each one is supposed to trigger. The output is a suite of around six dashboards on the client's BI platform.
I have run about ten of these. Six dashboards each is where the fifty comes from.
Wireframes
Structure before color
I go back to square one on every engagement: boxes, greyscale, no styling. A palette cannot rescue a card that is answering the wrong question, and color arguments are much harder to have once someone has fallen in love with a layout.
Each component gets argued as structure. What is the reader looking at. What do they need beside it to trust it. What are they currently leaving the screen to find out.
Card anatomy
Designing the KPI card
The card exists to answer a comparative question, so every element on it is there to close a gap the reader would otherwise go somewhere else to close.
- What is the number?
- What was expected?
- How many encounters is it based on?
- Where does it sit against the cohort?
This is also where the KPI explainers get written. Case Mix Index and relative expected mortality are not self-evident, and a measure the reader cannot define is a measure they will not act on. The definition ships with the card.
The percentile indicator uses shape and a label, not hue alone. That is the accessibility rule showing up as a layout decision rather than as a color choice, which is the point of doing structure first.
The color study
Why this ramp and not the brand one
Color is the touchy part of every engagement. It is the one design decision everybody has an opinion about, and it usually arrives attached to a brand guide that was drawn for a website.
So I stopped arriving with a preference and started arriving with evidence. I audited dashboards that were already shipping and tested the brand palette against three questions, in order.
01 / Does text stay readable at every tint?
Brand colors ship at 60%, 30% and 10%. Contrast had to hold at every step, not only at full strength.
02 / Do series stay distinguishable under color-vision deficiency?
All three types, at partial severity as well as full. Most people with a color-vision deficiency are not at 100%, so a standard built only for the extreme case fails the majority of the people it is for.
03 / Does it survive without color?
Greyscale printing and projector washout expose the same failure as CVD: color can no longer carry the information by itself.
Four rules came out of it, and they are the whole standard.
- 4.5:1
- Text on any fill. AA contrast for body-size labels, checked at every tint step, not only at 100%.
- 3:1
- Adjacent fills. Non-text contrast between neighboring segments, so a boundary holds without an extra stroke.
- ΔE 10
- Series separation. A minimum perceptual distance between any two series after CVD simulation.
- 5
- Categorical ceiling. Past five series, color stops being a reliable encoding. Group, facet, or use position.
The conversation goes differently now. Nobody is being told their brand color does not work. They are being shown what it does at 30% behind a data label, and what the alternative is.
Four rounds, and what they are for
Everything goes through internal review before a client sees it. Then it gets presented, and typically runs four revision cycles.
The rounds are not cosmetic. Early ones argue about which measures earn a place on the top-level view, which is really an argument about what the executive team is accountable for. Later ones tighten labeling, defaults and filter behavior. By the fourth pass the changes are small, which is the signal that the structure underneath was right.
What makes four rounds possible rather than painful is that the rules are already written down. Revisions happen inside a standard instead of relitigating it.
Built, not handed over as a picture
The design work does not end at a Figma file. I work hand in hand with development through the build, in Power BI and Tableau, which is where a visualization standard either holds or quietly falls apart. Tools have their own defaults, their own color pickers, and their own opinions about what a chart should look like.
Being in the file myself is the only reliable way to find the parts of a design the tool cannot express, and to fix them before a developer inherits the problem.
What gets delivered
What the room actually sees, and what they keep
Two things transfer at the end.
The first is the executive readout. It takes the measures that survived and puts them where a decision gets made, using the same ramps and the same rules, so a slide and a dashboard cannot disagree with each other in front of a board.
The second is the style guide. Hex values, the rule for when each applies, the KPI definitions, and components that already obey them. The client keeps building after we leave, and this is what decides whether what they build next still matches what we handed them.
Why it repeats
None of the above would survive ten engagements as a personal habit. It survives because it is a Figma library: verified palettes as styles, chart components with the tints pre-applied, KPI card patterns, and annotation patterns for the cases where color alone is not enough.
Designers stopped picking colors for every chart. They picked a component, and compliance came with it. The accessible option became the fastest option, which is the only version of a standard that survives a deadline.
The library and the standard
