Case study · Work

Drinks brand

A family wine estate, forty screens of Figma, and thirty years of tasting notes that lived in a folder of PDFs, three spreadsheets and the winemaker's head.

A crate of dark grapes with vine leaves, a glass of red wine, a wine bottle with a blank label and a corkscrew

The numbers

PlatformCraft CMS 5
Block kit16 blocks
ArchiveEvery vintage since 1994
Figma to live7 weeks
HostingWith us, managed
Client contacted by usNever

The studio arrived with a rebrand for a family wine estate that was nearly finished: new labels, new type, a hand-drawn map of the vineyard, and a forty-screen Figma covering everything from the family's story to an archive of every vintage back to 1994. What they didn't have was anyone to build it, and the client had already promised its importers a new site in time for the spring trade tasting.

Where it started

The studio sent the file on a Tuesday with a note that said, roughly, tell us if this is buildable before we show the client a date. We spent two days in it before quoting: walked all forty screens, sorted the blocks from the one-offs, and flagged the two places where the design assumed content nobody had yet (tasting notes for the older vintages, and a record of which parcel each wine comes from). The fixed quote went back at the end of that week with the block list attached, so everyone could see what they were buying.

That block list became the project's shared vocabulary. When the studio said 'the cellar block' on a call, we both meant the same artboard, then the same Twig file, and eventually the same thing their client drags into a release page.

The build

Every section in the file became a block, sixteen in all, from the full-bleed vineyard hero down to a pull quote with the estate's hand-drawn rule under it. Wines are structured entries rather than styled text. Each wine holds its vintages, and each vintage holds its own blend, alcohol, tasting note and drinking window as fields, which lets the archive assemble itself and gives every vintage a page a search engine can read.

The trade sheets come off the same fields. Importers and sommeliers want one page of facts per vintage, and the estate used to have the studio lay each one out by hand at every release. Now a vintage has a second template, set for A4 and reached from a download link, so the sheet a buyer prints can't disagree with the page a customer reads.

The awkward one was the archive itself. Thirty years of tasting notes lived in a folder of PDFs, three spreadsheets and the winemaker's head. A console command imported what the spreadsheets could vouch for and flagged every gap instead of guessing at it, and the winemaker filled those in over a fortnight of evenings, on the same screens the estate's team uses now.

The Craft underneath

Each of the sixteen blocks is an entry type with its own Twig partial. A block can gain a field without touching its neighbours, and a page is whatever order the editor stacks them in. The archive that looks expensive is one eager-loaded query, so a wine with twenty-six vintages costs the same to render as one with two. Live preview is wired so an editor sees a new vintage on the real page before publishing.

Speed came from the less glamorous parts of Craft. Project config in version control meant the three environments couldn't drift, so a block approved on staging was, byte for byte, the block that shipped, and most of the seven weeks went on the design rather than on deployment problems.

The parts that took the time

The longest single line on the timesheet was the map. The studio had drawn the vineyard by hand, parcel by parcel, and it looked superb as an illustration and did nothing at all as an interface. It ships as inline SVG in which every parcel links to the wines grown there, reachable by keyboard and backed by a plain list for anyone who would rather read than point. The whole drawing weighs under 40KB, which is less than the aerial photograph it replaced.

The drinking window is small on purpose. Each vintage stores two years, drink from and drink by, and the template works the sentence out from those, so the archive never tells anyone that a 2011 is still too young. The sum happens on the server, which means the page reads the same with JavaScript off.

Weeks one and two went on the content model and a grey-box version of all sixteen blocks. The overlay pass ran across weeks three to five, block by block against the studio's file. Week six was the importer and the map. Week seven was content load, which is where the winemaker came back with notes on the wording but not the structure, because the structure had been agreed in week two.

Content load ran as a phase of its own rather than something that happened to the site at the end. We entered the current releases ourselves, working from the studio's copy deck, on the basis that nothing tests a content model like having to use it. Two field labels changed, one block gained an optional caption, and the estate's team loaded the back vintages without a single support call.

The checks

Every block went through the same checks before it reached staging: a keyboard walk, a screen-reader pass, and contrast checks against the vineyard photography, which failed twice and moved two text styles onto solid panels with the studio's blessing. We test Lighthouse per block, so a dipping score always names its culprit, and the site went out at 98 with the map inline. The same pass covers motion (a one-time reveal as blocks enter and a slow drift on the hero photograph, all of it removed under reduced motion) and the fluid type scale, checked so headings track the viewport instead of jumping at arbitrary widths.

Blocks landed on staging in weekly drops and were reviewed on a Friday call with the overlay up and the Figma beside it. Most weeks the call lasted about ten minutes. Launch was quiet: the old site's ninety-odd URLs mapped to new homes, DNS moved at seven in the morning, and the trade tasting was beaten by two days, which the studio presented to their client as planned.

After launch

The estate's own team adds each new vintage and builds its release page from the block kit, and none of those pages touch the studio, which is how the studio likes it. The site sits on our hosting, so Craft and plugin updates happen without anyone raising a ticket. Eighteen months on the block count is still sixteen, and nobody has needed a seventeenth.

The client thinks the studio's dev team built it. Contractually, we did.
The studio's founder, who we can't name

Yours could
be next

Send one component from your current Figma and we'll build it for free. Check it against the file yourself before you sign anything.