Skip to content
id0
Interface Collection
Developer card

All works Concept

Pogoda

Coffee roaster's shop where every coffee has its own weather

Wipe the misted window to find the coffee of the week, compare flavour on a synoptic map, brew with a recipe and timer, and order a bag, a subscription, or a wholesale supply.

Next.js · React · TypeScript

Pogoda: first screen on a desktop
Pogoda: first screen on a phone

Design problem

Tasting notes such as “bergamot” or “winey” say little before the first cup. A buyer needs to compare acidity, body, and sweetness at a glance and know how to brew the bag they choose.

Down the page

Pogoda on a desktop, further down the page, frame 1Pogoda on a desktop, further down the page, frame 2Pogoda on a desktop, further down the page, frame 3Pogoda on a desktop, further down the page, frame 4
Pogoda on a phone, further down the page, frame 1Pogoda on a phone, further down the page, frame 2Pogoda on a phone, further down the page, frame 3

Main user flow

  1. Wipe the window

    On the first screen the coffee of the week sits behind misted glass. Wipe it with the cursor or a finger to read the name; the glass slowly fogs over again.

  2. Compare on the map

    Each coffee is a station on a synoptic map: brighter acidity to the right, heavier body higher up, and isolines of equal sweetness between them. In the catalogue, pointing at a coffee turns the sky to its weather.

  3. Brew and order

    A coffee page gives the origin, altitude, harvest, roast curve, and recipes; a calculator with a timer guides the brew. The cart leads to an order form, and the subscription and wholesale pages have their own requests.

Next work Polok A riverside banya with private suites and guided rituals