Case study · MatDS

The decision

The problem: Project pages that showed the results and hid the reasoning.
What I chose: One template built around decisions: what was chosen, what was ruled out, why, and what it cost, one screen per decision.
Ruled out: Filling in a why by guessing. Every reason comes from an interview, or it isn't written.
What it cost: Six cases rebuilt from interviews, with every fact confirmed one by one.

Anatomy

Every project page follows the same sequence, so the reader always knows where they are. See it live on Menunow.

hero 100svh media behind the navbar, bottom fade, project card facts band four facts: team, time, reach, result the bet the statement: the problem as a tension, then its paragraph media images at full bleed, opened with a mask decisions one full screen per decision, the last one blue how it went timeline that fills with the scroll, then the results what went wrong a lede on the left, the story on the right if I did it today three boxes closing the statement again, a screen of its own, lit word by word more work marquee, then the previous and the next project chapter index floats from the bet to the closing line

Facts band

Team: 2
First prototype: 8 weeks
Venues: ~100
Downloads: 10k+

Four facts for the reader who gives a case thirty seconds. Numbers at the statement size and in its light weight, a hairline above each one and no cards: they are data, not buttons.

Decision fields

Left out: Delivery
Advertising
Dish ratings
What stayed: The menu of the place you're in, clear and up to date.
Why: An app that tries to do everything ends up doing everything badly.
What it cost: Offers to buy it. We said no.

Each decision gets a full screen, under a title at display size. The fields say what was chosen, what was ruled out, why, and what it cost; what was chosen reads at full contrast. Ideas that were left out become struck pills: the stroke is thin and grey, so the text stays readable. The last decision takes the blue plate that ends the About journey, with its labels in white at 90% (4.74:1 over the blue; 75% only reaches 3.72:1). A decision stays pinned to the screen only if it fits: each one is measured, and the ones taller than the screen scroll like normal blocks, because a pinned plate taller than the screen hides its bottom for good.

Timeline

Early April 2020The idea
End of MayFirst prototype
After testingLaunch
A year laterSwitched off

In a case it fills with the scroll, one stretch after another, and each step lights up when its stretch is full. Here it is shown full. The last stretch fills in grey rather than blue: an ending is not an achievement.

Chapter index

A glass capsule fixed at the bottom of the screen, in the navbar's material. It is built from the chapters a case marks, so a new case only marks its chapters. It appears once the hero is gone and leaves when the closing line arrives, so it never sits on top of it; it is hidden on phones. The geometry is concentric: 32px links, 4px inset, a 20px radius. The active chapter takes the primary button material, and the cursor takes the exact shape of the link.

Three movements

All tied to reading. The case images open from the bottom with a mask. The timeline fills with the scroll. The closing line has a screen of its own and lights up word by word. None of them run under prefers-reduced-motion, and without them everything is visible, full and lit.