Example 01Coffee Storefront

Roasted every Tuesday and Friday, shipped within two days. Free shipping over $40.

RoasterySmall batch coffee

ShopSingle originHuila

The bag: compostable kraft, roast date on the back

Single origin Colombia

Huila

A round, sweet everyday coffee that works in any brewer.

$33.00

$6.60 per 100 g, about 33 cups

Tastes like

Milk chocolate
Red apple
Brown sugar

Roast Medium

Size

250 g$18 500 g$33 1 kg$60

Grind

Whole bean Filter Espresso French press

Stays fresh longest. Choose this if you grind at home.

Purchase

One-time purchase$33.00

Subscribe & save 10%~~$33.00~~$29.70

You save $3.30 on every delivery.

Free shipping on orders over $40.

Roasted to order, ships within two days
Roast date printed on every bag

The coffee

Grown on the slopes of Huila

This coffee comes from a group of small family farms in southern Colombia, picked ripe and washed the same day. We roast it to a medium so the sweetness leads and nothing tastes burnt, with milk or without.

Region: Huila, Colombia
Altitude: 1,700 to 1,900 m
Variety: Caturra, Castillo
Process: Washed
Harvest: Spring 2026
Roast: Medium

How to brew it

Three ways we like it

Pour over

Coffee: 15 g
Water: 250 g at 94 °C
Time: About 3 minutes

Bloom with 40 g of water for 30 seconds, then pour slowly in circles.

French press

Coffee: 30 g
Water: 500 g just off the boil
Time: 4 minutes

Stir once at one minute, skim the crust, then press gently.

Espresso

In: 18 g
Out: 36 g
Time: 27 to 30 seconds

Sweetest a week after roasting. Lovely in a flat white.

Reviews

What people say

4.7 out of 5

Based on 126 reviews from customers

5 stars98
4 stars20
3 stars5
2 stars2
1 star1

5 out of 5 stars

Our everyday pot

Sweet and easy, with a bit of apple as it cools. We get 500 g every three weeks and have skipped twice with no fuss.

Maya R. Subscriber, Filter

4 out of 5 stars

Great in milk

A chocolatey shot that holds up in a flat white. A little mild for me as a straight espresso, so four stars.

Dan K. Espresso

5 out of 5 stars

Properly fresh

The roast date was four days before it arrived. Clean and sweet in the French press, no bitterness.

Priya S. Whole bean

Huila

500 g, Whole bean

Case notes

A product page for a small roaster

A concept piece for a fictional client, built to show how I approach this kind of project.

The brief

The roaster sells a handful of coffees online and most of their visitors arrive on a phone, from a link to one coffee. They wanted that one page to answer every question a buyer has (what it tastes like, which size and grind, what a subscription really commits you to) and to make buying it feel calm and certain, without pushing.

What I focused on

Options you can see, with the price beside themSize and grind are segmented controls, not dropdowns, so every choice is visible at once and one tap away. Each size shows its price and the page works out the price per 100 g and roughly how many cups you get, so the bigger bag's value is plain without a "best value" badge. The grind explains itself in one line, because "which grind do I need?" is the question that stops people.
An honest subscriptionThe saving is shown in money ($3.30 on every delivery), not only as a percentage, and the terms sit right under the choice in plain words: skip or cancel anytime, no minimum, an email before each bag ships. Nothing is pre-selected; One-time stays the default.
Feedback you can feel, without a popupAdd to cart answers in place: the button turns to "Added" with a tick, the cart count in the header bumps, and screen readers hear what was added. The cart does not fly open and take over the page, so you can keep reading.
A cart that keeps you on the pageThe cart is a drawer, not a new page. Quantities change in place, removing an item leaves an Undo right where it was, and the free shipping progress is shown both here and in the cart, in dollars to go rather than a vague bar.
The buy button stays in reach on phonesOn a phone the options and button scroll away as you read about origin and brewing. Once this row leaves the screen, a slim bar slides up from the bottom with your current choice and price, right under your thumb. It is watched with an IntersectionObserver, so scrolling stays smooth.
Product images without photosEvery view (the bag, the beans, the brew card, the cup) is drawn in SVG, so it is sharp at any size and weighs almost nothing. The thumbnails are tabs: arrow keys move between them, and the bag's label follows the size you pick.

Skills

E-commerce UX
UI design
Interaction design
Accessibility
Responsive layout
SVG illustration
Vanilla JS