Screen hierarchy
Every screen has one job, and the design should make that job the first thing the eye lands on. Hierarchy is how a user who can't read every word still knows what this screen is for and what to do next.
The rule
- One job per screen. Name it in a sentence ("show today's money and invite one entry"). If you can't, the screen is doing too much — split it.
- One focal element. The most important thing — the number, the primary action — is the largest, boldest, or the one brand-coloured thing. There is exactly one per screen.
- One primary action. The main action is a single primary button matching the screen's job. Secondary actions drop to lower-emphasis buttons, links, or overflow.
- Demote, don't clutter. Supporting content is smaller, in caption colour, or collapsed behind a tap — present but clearly secondary. If everything is bold, nothing is.
- Reading order top-to-bottom. The eye should travel title → focal value → action in the order the user needs them.
When to use it
On every screen, and especially when a screen has grown during iteration — run the "what's the one job, what's the one focal thing" check before shipping.
When NOT to use it
- A true fork where two paths are equally important may present two equal-weight options — but that's the rare exception, chosen deliberately, not the default.
- A dense data view for an expert (rare in DayTwo) may carry more at once — but our audience is first-time users, so default to one focal thing.
What user problem this solves
Comprehension and confidence. A first-time, low-literacy user reads a screen by prominence before words: if the one important thing is visually the one important thing, they understand the screen without a trainer. Competing emphasis forces them to decode the layout — exactly the friction that makes people abandon an app.
Hierarchy is created by contrast. Spend prominence on the one thing that matters and let everything else recede — that's what makes the next step obvious.