UI designer · Chicago, IL · Seven years · product UI and design systems
A screen is nine screens.
Every portfolio shows the happy path: a list with six well-named items and a form with nothing wrong in it. That screen is about a ninth of the work. The other eight states are below, built as live markup rather than shown as pictures, with how often each one happens and what it costs when nobody draws it.
Saved addresses · Checkout, account settings, and the delivery step of three different flows
One component, 9 states, all of them rendered.
One component, nine states, all of them live markup on this page. None of these is a screenshot. If a portfolio shows you a picture of an empty state, it has shown you that somebody drew an empty state, which is a different claim.
Add one now, or skip and enter it at checkout. Both take about the same time.
Add an addressLoading saved addresses.Skeletons at the real row height, so nothing moves when the data lands.
The address service timed out. Nothing has been lost — this is a read, not a save.
Try againThese three are the ones your device had already. You can pick one; saving a new one has to wait.
Shared accounts hide them by default. Whoever owns the account can turn it on — your data is there.
94 characters, in a slot drawn for 30. It wraps rather than truncating, because an address you cannot read in full is not an address.
The same component at 200%. Nothing is clipped and the row action is still one target.
The frequencies are from one product over one year, and the point is not the exact numbers — it is that eight of the nine happen often enough to have a number at all. A state reached by 2.4% of loads is reached by thousands of people a month, and it is the state they will tell somebody about.
6 shipped products · 54 cells · 8 missing
Where the states actually are.
Fifty-four cells. Browser default is not a failure — sometimes the browser’s behaviour is genuinely correct and drawing over it is worse. Missing is a failure, and there are enough of them here that leaving them off would have made the table decorative.
Drawn, specified, and in the handover file.
Left to the browser on purpose. Sometimes that is the right answer.
Nobody decided. This is the only one of the three that is a failure.
| Product | Ideal | Empty | Loading | Error | Offline | No permission | Too much | Too long | At 200% zoom |
|---|---|---|---|---|---|---|---|---|---|
| Checkout, retailThe one that was resourced properly. Offline is still the browser’s, and that was a decision rather than an oversight. | Designed | Designed | Designed | Designed | Browser default | Designed | Designed | Designed | Designed |
| Internal admin consoleInternal tools get the least state work and have the most permission states. This one had eleven roles and three designed permission screens. | Designed | Designed | Designed | Browser default | Missing | Designed | Designed | Browser default | Missing |
| Booking flow, clinicHealthcare, so zoom and error strings were audited by somebody outside the team. Too-much-data was left because a patient cannot have 4,000 appointments. | Designed | Designed | Designed | Designed | Designed | Designed | Browser default | Designed | Designed |
| Reporting dashboardThe worst on this list and the best-looking. Every screenshot of it is full of data, which is exactly the problem the page is about. | Designed | Missing | Designed | Browser default | Missing | Browser default | Designed | Missing | Browser default |
| Design system, v2A system is where states are cheapest to fix, because you fix them once. Eight of nine designed, and the ninth is deliberate. | Designed | Designed | Designed | Designed | Browser default | Designed | Designed | Designed | Designed |
| Marketing site CMSTwo weeks and no budget for states. I am including it because a portfolio of only the well-funded work is a portfolio of budgets. | Designed | Browser default | Browser default | Browser default | Missing | Missing | Browser default | Missing | Browser default |
“The handover had the empty state, the permission state and a 94-character company name already in it. I have built maybe forty of these and it is the first time I have not had to invent half of it myself on the Thursday.”
Front-end engineer, retail checkout — 2025
Under the component
Eight numbers that decide how it feels.
None of these are visible in a screenshot and all of them are visible in use. Every one is a decision that somebody makes, and when a designer does not make it an engineer does.
| Decision | Here | Why that number |
|---|---|---|
| Minimum hit target | 44 × 44 px | WCAG 2.5.8 asks for 24; Apple and the actual behaviour of thumbs ask for 44. The row action here is 44 and the visible icon inside it is 20. |
| Type scale ratio | 1.2 | Minor third, six steps, 14 to 34 px. A 1.25 or 1.333 scale looks better on a specimen sheet and produces a heading that is too big three levels down. |
| Base line height | 1.55 | On body copy. WCAG 1.4.12 requires that 1.5 does not break the layout, which is a different and stricter thing than choosing 1.5. |
| Table collapses at | 640 px | The width at which this row stops being a row and becomes a stacked block. Chosen from the longest realistic address, not from a device size. |
| Longest content tested | 94 chars | The longest organisation name in the real database. Every text slot on the page was checked against it, which took an afternoon and found four breaks. |
| Focus ring | 3 px, 2 px offset | Same ring everywhere, never removed, and checked at 3:1 against every background it can land on. It is the single most commonly deleted line of CSS in this trade. |
| Motion | 120–180 ms | Long enough to be seen, short enough not to be waited for, and all of it inside a prefers-reduced-motion query that turns it off completely. |
| Colours carrying meaning | 0 | No state on this page is communicated by hue alone. Every one prints a word, and the audit cells carry a glyph as well. |
What arrives at the end
Five things, and the last one matters most.
- Every state, drawn
- All nine, per component, in the same file. Not a happy-path screen with a note saying “also empty state”. The note is where the state goes to not get built.
- The real strings
- Error copy agreed with whoever knows what can fail, before handover. “Something went wrong” is what gets written when that conversation did not happen.
- The longest content in the database
- An actual query result, not filler text. Half the layout breaks in a product are one record somebody typed a full legal entity name into.
- Tokens, not hex codes
- Named to their role rather than their colour. A token called `--danger` survives a rebrand; one called `--red-600` becomes a lie the first time the red changes.
- Two hours with the engineer
- Booked before the last week. Everything above is worth less than this, and it is the first thing cut from a schedule.
Common questions
Mostly about the other eight.
Why not just show the finished screens?
Because the finished screen is the part of the job everybody can already do. The reason a product feels unfinished is almost never the ideal state — it is the empty one that is a blank box, the error that says “Something went wrong”, and the table that breaks when somebody has four thousand rows.
Are these really rendered, or are they images?
Rendered. Everything in the nine-state section is live markup in this page, which you can confirm by resizing the window or by opening the inspector. A picture of an empty state proves somebody drew one; it does not prove it works.
Is “browser default” a failure?
No, and that is why it is its own verdict rather than being folded into Missing. Sometimes the browser’s behaviour is genuinely the right answer and drawing over it is worse — the offline page is the usual example. It is a failure when nobody decided, which is most of the time.
Do you work in Figma or in code?
Both, and the states are the reason. Nine states across a component set is where a design file becomes unmaintainable and where a coded prototype starts paying for itself. I hand over both and the code is the one that is correct.
What about the dashboard on this page that scores badly?
It is the best-looking thing I have made and it has three missing states. Leaving it off would have made the audit decorative, which is the exact failure mode of every portfolio that only shows work that went well.
Can you work with our existing design system?
Usually the fastest route, yes. The first thing I would do is audit it against these nine states, which takes about a day per component set and generally finds that the ideal state is beautiful and the other eight do not exist.
Hire me
Which component, and which state is broken?
Two days a week available from April. Fields marked with an asterisk are required.