story-screens

The story turns answers into a reason to care. It has an angle and depth; it is never a list of facts.

The arc (4–5 beats)

1. You. A profile from their answers: their rhythm, their pattern, with the brand's hero inside it (not a stock person).
2. The honest part. Their own number, felt: the little losses scattered through their day, gathering into one block; the year counting up in red; a stamp that lands once. One heading. The sum is shown small underneath so it can be checked.
3. Scale. A year, then ten years, in the same place. Bigger units land harder than small ones ("2,600 hours" beats "32 workdays"); the maths stays the same.
4. The good news. It starts exactly where the bad news ended and fills it back in, row by row, in the brand's hopeful colour. A number that counts up and lands.
5. How. The three or four ways the app delivers it, each one big motion on the ground with one bold line, in tabs or beats. No cards with paragraphs.

Rules

• One visual per beat that does the explaining. The heading names it; nothing else is needed.
• Their numbers, honest maths. Exaggerate scale, never facts. No invented statistics.
• Hopeful after honest. Never end on the bad news.
• Continue appears after a moment (about 1.5 s) so the first beat is seen; a tap moves on.
• No segmented bars at the top of story beats.

A stamp that looks like a stamp

Two nested borders, uppercase, heavy weight, rotated a few degrees, ink grain from a noise mask, dropped from 2.3× scale in 230 ms with one rigid haptic and a 240 ms shake of the page. Once.

Anti-patterns

• A stat card grid.
• "Did you know…?" facts that are not theirs.
• Persona illustrations that could belong to any app.

Merges and numbers

• A merge is one shape growing. When pieces gather (minutes into an hour, slips into a block), one block grows from where they collect and each piece slides into its edge and becomes part of it, one after another. Never fade the pieces out and pop a finished block in.
• No lines drawn across the content to show time passing; let the pieces appear in time order.
• Keep the margins. Pieces that gather inside a container stop at its inner padding, left and right alike.
• Make the default dramatic, keep the answer theirs. Default the estimate to the answer that makes the story land (two hours a day reads as ten hours a week back), and always use what the person picks.

Holding it together

A story is only as good as its joins. Plan them with continuity: what carries from each beat to the next, and which way the story moves.