2026
Altitude Roast
Coffee sold by the mountain it grew on — and a subscription that bends to your week.
A DTC specialty-coffee store with a taste quiz, origin stories mapped by altitude and a flexible subscription (skip, swap, pause).
A self-initiated concept, designed like a real product.
The brief we set ourselves
Design a direct-to-consumer store for a small specialty roaster that sells six coffees from six altitudes: a taste quiz instead of a wall of products, origin told by altitude, and a subscription you can skip, swap or pause without writing to support.
Who it is for
Home brewers aged 25–45 who already buy beans online and want to understand why one coffee tastes of red currant and another of hazelnut.
What we designed
Home with the quiz built into the hero, the shop with a flavour-wheel filter, a product page with an altitude chart, the subscription with a cart drawer — and the packaging the whole store is photographed with.
Design facts from the concept files — not business results.
02ResearchSpecialty coffee is already a habit. The store has to explain the bag.
We checked who drinks specialty coffee, collected coffee e-commerce and subscription work on Behance, and looked for the one thing that makes six similar bags different from each other.
We checked who drinks specialty coffee, collected coffee e-commerce and subscription work on Behance, and looked for the one thing that makes six similar bags different from each other.
- Audience
66% of Americans drank coffee in the past day, and 64% of people aged 25–39 had specialty coffee in the past week (SCA 2025 data via CoffeeBI).
DecisionDesign for people who already drink good coffee at home: no «what is specialty» lesson, straight to taste and origin.
- Choice
Coffee shops in the galleries we collected show a grid of near-identical bags with tasting notes in small print — the shopper has to read every card to choose.
DecisionLead with a four-question taste quiz in the hero and a flavour wheel in the shop, so the grid is already filtered when it appears.
- Story
Altitude is the one origin fact that is a number, and it changes the cup: higher farms, slower cherries, brighter acidity.
DecisionMake altitude the brand idea: a dotted «altitude line» on the hero photo, metres on every card, label and filter, and an altitude chart on the product page.
Patterns we borrowed
- Coffee e-commerce shots
- A full-bleed origin photo on the home page and packshot cards with origin, process and notes
- Subscription boxes
- A delivery timeline with skip / swap per delivery and a pause that is one click away
- Retail filters
- Facet checkboxes with counts and a range slider — here for farm altitude
- Cart drawers
- A drawer over the page with a free-shipping meter, steppers and one upsell
What we left out
Names, labels, photos and copy of any existing roaster. Altitude Roast has its own mark, label system and packshots made for the concept; the six farms are invented.
Moodboard references
From a product grid to a store that asks what you like.
Every «before» is generated from the very same page markup, reduced to outlines, readable labels and grey word-bars — no colour, photos or packaging. Drag a handle to compare.
- 01
Hierarchy
The quiz card overlaps the hero, so the first action is «tell us what you like», with «Shop the range» as the second; the range below lines up names and prices under each bag.
- 02
Grid & density
A 12-column grid with a 240 px filter rail in the shop, six product cards in two rows, and the product page split into photo and decision columns.
- 03
States
Quiz option selected / hover, a sold-out limited lot with «Notify me», a selected format tile, subscribe vs one-time, a skipped and a swapped delivery, an expired promo code.
- 04
Packaging system
Seven labels drawn in our code — same layout, a colour band per coffee — were sent to the image generator as references; the photographed bags came back with our labels and replaced the CSS pouch everywhere.
- 05
One studio colour
A small script white-balances every packshot to the same studio colour #ECE4D5 and fades its edges into it, so the photo rectangle disappears on the tiles.
- 06
Real-looking data
Six coffees with region, farm, altitude, process and notes, prices per format, a €73.20 cart and delivery dates — real lengths in every card.
Roast brown for every action, cherry orange only to tempt.
Roast brown carries buttons and links (8.97:1 with white text); cherry orange is 2.68:1 on parchment — the quiz CTA, hover and decoration with dark text, never body text. Gloock sets the editorial headings, Instrument Sans the shop.
An «AR» monogram: the «A» is a peak with a snow line, a roasted bean sits where the bowl of the «R» would be. Picked from four sketched directions because it is the simplest and reads at 24–64 px.
#6B3E26
vs bg 7.84:1 · label 8.97:1
#D97B3F
on bg 2.68:1
#24180F
on bg 15.15:1
#F5EFE6
text on it 15.15:1
#FFFDF8
text on it 17.04:1
#6B5A4C
on bg 5.76:1
Accent / bg 2.68:1 — cherry orange is for fills, hover and the quiz CTA with dark text, never for text or signal icons.
Gloock 400Altitude Roast
Gloock 400Home brewers 25–45 who buy beans online
Instrument Sans 400 · 16/26A DTC specialty-coffee store with a taste quiz, origin stories mapped by altitude and a flexible subscription (skip, swap, pause).
Instrument Sans 600 · 12DTC e-commerce / specialty coffee
Labels drawn in code, photographed on real bags.
The first version used a CSS label on an empty pouch. For the final we drew every label in the same code as the site, sent them to the image generator as references, checked every photo at 2× and kept only the ones where our label survived.
- 01
Labels in code
Seven labels from one template: mark, name, region and farm, altitude and process, tasting notes, and a colour band per coffee — 250 g whole bean, plus the 1 kg bag.
- 02
References for the generator
The mark and the exact label artwork went with every image request, together with the format, weight line and material — so the photos carry our label, not an invented one.
- 03
Photographed scene
The new hero was requested as two variants of a pouch and a tin above the fog; one had typos on the label, the other is now the home page and a thumbnail on the product page.
Drip box
The band said «250 G · WHOLE BEAN» — untrue for a box of drip bags — and the mark was distorted. The format is not shown until it is regenerated.
Hero, variant 1
Typos on the labels and the coffee name doubled on the tin. Variant 2 was used; its remaining small-text slips are about 6 px on the page.
From the first sip of the quiz to the next delivery.
Home
The photo hero with the altitude line and a pin on the bag, the taste quiz overlapping it, three promises, and «The range» — six bags with altitude, name and price under each.
Shop
A flavour wheel (Fruity + Nutty selected, Sweet on hover), format and altitude filters, and six cards — every coffee in its own format, one limited lot sold out.
Product page
Highland Washed No. 4: lot and altitude tags on the photo, five thumbnails, an altitude chart of the whole range, format tiles with photos, grind, and subscribe vs one-time.
Subscription + cart drawer
Your rhythm, the next three deliveries — next, skipped, swapped — a pause for up to three months, and the cart drawer with free shipping unlocked, an upsell and an expired code.
Component sheet
Packaging system with five formats, the product card in three states, flavour wheel, altitude chart, plan selector, cart drawer, buttons, inputs and the newsletter block.
CraftedEarthyTactile
07SEOFound by taste, by origin and by the way people brew.
A small roaster's store competes with marketplaces and big brands for every coffee search. The plan: make the shop and its filters crawlable without duplicate pages, map searches by flavour, process and brew method, give every coffee and guide its own page, and keep a photo-led store fast.
A small roaster's store competes with marketplaces and big brands for every coffee search. The plan: make the shop and its filters crawlable without duplicate pages, map searches by flavour, process and brew method, give every coffee and guide its own page, and keep a photo-led store fast.
Search snippets as we would write them — titles and descriptions drafted from this concept's own page copy, shown without any search engine's branding.
- 01
Audit
An e-commerce site creates duplicates by itself — filters, variants and sold-out lots are where we look first.
What we check- Faceted filters (flavour, format, altitude): which combinations are indexed, the rest canonical or noindex
- Grind, size and format as variants on one product URL, not near-duplicate pages
- Sold-out lots keep their page, show availability and link to the closest coffee
- Product photos with alt text, explicit sizes and lazy loading below the fold
- Cart, account and quiz results kept out of the index
- 02
Keyword map
Clusters follow how home brewers search: by what it tastes like, how it was grown and processed, and what they brew with.
Example clusters · no volumes, conceptFlavourfruity coffee beansnutty chocolate coffeelow acidity coffeeOriginhigh altitude coffee beanssingle origin washed coffeeBrewcoffee for pour overespresso beans for homeSubscribecoffee subscription you can pausefresh roasted coffee delivery - 03
Site structure
Collections answer the flavour searches, product pages the specific ones, and brew guides the questions in between.
Page planStructured dataProductOffer + availabilityAggregateOfferOrganizationBreadcrumbList/Home/shop/Shop/shop/fruity/Flavour collections/shop/<coffee>/Six product pages
/subscription/Subscription/guides/Brew guides/guides/pour-over/Pour-over/guides/espresso/Espresso
/altitude/Why altitude matters
- 04
Speed & Core Web Vitals
Packaging photography sells the coffee, so images get a budget before anything else.
Targets · 75th percentile of visitsLCP< 2.5 sHero and product photos in AVIF / WebP with explicit sizes; the first image preloadedINP< 200 msFlavour wheel filter and cart drawer respond without blocking scriptsCLS< 0.1Fixed card image ratios; the cart drawer overlays the page instead of pushing itThresholds are Google's published «good» values for Core Web Vitals — targets for the build, not measured results.
Questions & answers
Is Altitude Roast a real product?
No. Altitude Roast is a self-initiated concept by Omnisense — a brief we set ourselves, with no client and no business metrics. Coffees, farms, lots, prices and dates are sample data, and the six farms are invented.
Who is the store for?
Home brewers aged 25–45 who already buy beans online and want to understand why one coffee tastes of red currant and another of hazelnut.
How do I find the right coffee?
A four-question taste quiz sits in the hero and a flavour wheel filters the shop, so the grid is already filtered when it appears. Altitude is the brand idea: metres on every card, label and filter.
Can I change my subscription?
Yes. In the concept you can skip, swap or pause the subscription without writing to support.
What did you design?
Four key pages — home with the quiz, the shop with a flavour-wheel filter, a product page with an altitude chart, and the subscription with a cart drawer — plus the packaging system, component sheet, logo, palette and type.
Did you plan SEO for the store?
Yes. The plan makes the shop and its filters crawlable without duplicate pages, maps searches by flavour, process and brew method, gives every coffee and guide its own page, and keeps a photo-led store fast.
