Fieldnote

Fieldnote Tools makes modular tools for desks, studios and small workshops: trays, rails, clamps and cases that clip together in whatever order the owner needs. The range had reached 38 parts and the storefront had grown with it, one page at a time. We rebuilt the shop so every object is presented with the precision of a technical drawing.

What we walked into

The site read like a catalogue export. Products were listed alphabetically, compatibility lived in a PDF, and the two best-selling rail systems sat four clicks from the homepage. Customers were emailing to ask whether a part fitted a rail they already owned, a question the shop should have answered first.

Fieldnote already had a printed language they trusted: a tight grid, hairline rules and a warm near black on every box. None of it had made the trip to the browser. The brief was to close that gap and hand the internal team a system they could run without us.

How we worked

The decision that shaped everything was to treat compatibility as navigation rather than content. Every product carries a fit strip naming the rails and widths it works with, and each name is a link, so browsing became a way of assembling a desk instead of reading a list. It cost a fortnight of data work: 38 products produce just over 200 compatibility pairs, and nobody had ever written them down in one place.

Photography set the limits. Fieldnote shoots in a small studio with one light and no budget for a set, so we designed for flat, evenly lit images on a warm grey ground and let typography carry the drama. We tried a configurator early, a drag-together builder for assembling a rail on screen, and dropped it after two rounds of testing. People wanted to know what fitted, not to play with it.

What shipped

A 40 page storefront on a nine column grid, a product detail framework built around material, scale and use, and the fit strip running across the range. Underneath sits a flexible commerce system with variants for finish and length, stock shown as a status line rather than a warning, and a two step checkout.

We also shipped the parts that keep Fieldnote moving: launch templates for new drops, CMS blocks covering every layout, and one page of rules for type, spacing and the single accent colour. A new object goes live in under an hour, entered by their operations lead rather than by us.

What we took away

Six weeks after launch, pre-sale enquiries were down by roughly two thirds and the average basket had risen from 1.4 items to 2.1, which is what happens when a shop tells you what else fits. The lesson we keep is that a specification is not an appendix. Put the technical truth where the browsing happens.