When everything is important, nothing feels important

The dashboard had grown feature by feature. Each addition solved a real problem, but together they turned the home screen into a wall of competing signals.

Every number was on the screen; none of it was ranked. The balance, the thing people open the app to check, carried no more weight than a quick link. Primary actions sat far from the moments you'd reach for them. Status lived in colour alone, and each corner of the screen spoke its own visual language.

So people had to decode the interface before they could act on it.

The design question became:

How do we make the dashboard easier to read without dropping anything people rely on?

This is the screen people opened every morning.

I walked the screen with the three questions customers bring to it, and marked every place where the design got in the way of an answer.

“It feels messy” doesn't give anyone a brief. A count does.

I pulled every distinct value off the legacy screen onto one board: each colour, type size, button, card treatment, corner radius and status signal. Laid out together, the duplication was hard to argue with: the same decision, made over and over.

Every legacy pattern got one owner: a single design component, then a single code component.

I mapped each piece of the old screen to the component that would replace it. Where two legacy patterns did the same job, they merged. The KPI tiles, the accounts table and the Quick Links card all became variants of one “Card Section”. The code components carry the same names as the design, so a designer and an engineer can point at the same thing and call it by the same word.

Motion here earns its place by making the data easier to read. On a dashboard this dense, every animation has to explain something, or it gets cut.

Each one maps to something true about the number: the balance counts up to its value, the utilisation bar fills from zero, the chart draws left to right. One easing curve runs through all of it, and under reduced-motion every pattern skips to its end state, so the dashboard works the same without it.

The old screen made you hunt. Every number landed at once, so the three questions the app is really for got buried: how much do I have, what needs me, what can I do next. This is the same account, grouped around those questions and running live.

The audit board was the most useful thing I made here. It turned a question of taste into a question of counting, and a count is much easier to agree on. From there, the component map and the build were mostly bookkeeping: every decision the audit removed was one less to make again in design, in code, and in the next feature.

Building the frame 1:1 earned its keep for the same reason. It tests the system where systems usually break. Anything the existing tokens and components couldn't express pointed to a gap, and I fixed the system rather than hard-coding a value.