Case study · coffee roastery
A landing page for a small Prague roastery. Three directions on the table, one survived — and it wasn't the one that looks like every other coffee site.
Full disclosure: ZRNO is a fictional brand and the brief is ours — we wrote it to have a realistic problem to solve. Everything else on this page is real: the directions, the reasoning, the mistakes a phone screen found for us.
A roastery with one drum, twenty kilos a week, and a café attached. They don't have a warehouse, so what's roasted on Wednesday is poured on Thursday. That fact is the entire business — and most coffee websites bury it under photos of cups.
The page had two jobs: convince a walk-in customer that the coffee here is fresher than in the chain across the street, and let wholesale buyers see what's currently in the drum without writing an email.
Constraints: no professional photos yet, no online shop, text in Czech, and it has to work on a phone in the tram.
Before writing any code we sketched three ways the page could look and feel. Only one of them survived contact with the brief.
Cream background, high-contrast serif, terracotta accent, big photo of a cup. The safe answer — and the one every second coffee shop already has.
RejectedEditorial layout, huge type, full-bleed photography. Beautiful when you have a photographer — but the client has none, and stock photos would undo the whole point.
RejectedConcrete, steel, yellow floor-marking. The roastery is an industrial room in Holešovice, so the page looks like the room: data first, decoration last.
Built thisThe deciding argument was simple. A cosy look asks the visitor to trust a mood; the workshop look hands them evidence. If freshness is the product, show the batch — not the latte art.
Speciality coffee already has a language for this. Every bag carries altitude, varietal, processing method, roast date and a roast level. Customers who care read it; customers who don't at least see that someone bothered.
So we made that the hero. Three batch cards, each with the same fields you'd find on the bag, and a gradient scale from light to dark with a marker showing where this particular lot sits. It's the only decorative element on the page that carries actual information.
The desktop version was done in an afternoon. Then we opened it at 375 pixels wide and found two problems that no amount of design taste catches — only testing does.
min-width: auto, so the longest Czech word pushed the whole block past the screen edge and got clipped.min-width: 0 on the grid children and a lower floor in the clamp() for the headline. Nothing overflows, the type still fills the screen.The second problem was subtler: the batch cards were fine, but the roast scale label sat under the marker and collided with the card edge on narrow screens. We moved the legend to a separate row instead of trying to squeeze it.
Both fixes took ten minutes. Finding them took opening the page on a phone — which is why that step is in every project we run, not an optional extra at the end.
The demo stops where a real project would continue. With an actual roastery on the other side of the table, the next three things would be:
None of that changes the design. That's the point of deciding the direction before building: the page can grow without being redrawn.