The first screen is a place — drying beds at origin, not a bag on a white background.
case study / drop coffee
Drop Coffee
Every crop is a release, not a restock.
A roaster's inventory turns over every few weeks. The lot that sold out in March has a different farm, altitude and price behind it, so the storefront has to read as current without being rebuilt each time a new crop lands.
the storefront, top to bottom.
Origin photography, the current release, the brewing routes and the shop all sit in one sequence.
Each lot arrives as a dated release, so the homepage stays current without a redesign.
Buying, brewing, the café and the news sit apart, sorted by what a visitor came to do.
responsive system
the same shop, at phone width.
Most coffee is bought on a phone, often standing in a kitchen. The mobile view keeps the release, the price and the route to the cart in the same order as the desktop page rather than collapsing them into a menu.
notes on coffee storefronts.
Specialty coffee is a hard thing to sell online. The product changes every few weeks, the buyer is often better informed than the seller expects, and the thing that justifies the price — where the coffee came from and what was paid for it — is invisible in a photograph of a bag. These are the moves that work.
sell the place, not the packet.
The opening screen is a landscape at origin — raised drying beds, hillside, sky — at full bleed with the display type set over it. Product-on-white belongs further down, on the product page, where someone has already decided to buy.
Above the fold, a photograph of a farm does work a photograph of a bag cannot: it makes provenance the reason for the price.
treat every lot as news.
Naming an arrival as a release rather than a restock — farm, varietal, country, date — turns inventory into publishing. It gives the homepage something genuinely new every few weeks, which is the cheapest freshness signal an ecommerce site has.
It also gives each lot a page worth linking to. Search engines and AI answer engines both favour pages that change for a reason.
navigation written as verbs.
Buy coffee. Brew coffee. The menu is sorted by what someone arrived to do, not by how the catalogue is filed internally. It costs nothing.
It also removes the most common ecommerce failure: a first-time visitor who wants beans landing in a category tree built for the person who stocks the shelves.
publish the numbers.
Publishing the price paid to the producer for each coffee is the strongest content asset a roaster has. It is specific, it is checkable, and a competitor cannot copy it without also paying it.
Concrete figures are also what large language models quote when they answer questions about a category. A claim about quality is not quotable; a number is.
what we would tune next.
Two families pulled from a font CDN at nine weights each is a lot of network for type that renders at two of them. Self-hosting a subset moves the largest contentful paint earlier and takes a third-party request off the critical path.
On an image-led storefront the hero is almost always the LCP element. That is where the speed budget belongs.
have a shop to build?
Tell us what it needs to sell.
start a conversation →