[ Work / 01 of 05 ][ ← All projects ]

Red Clay

A storefront that starts with the land.

Role
Design engineer
Stack
Next.js, TypeScript, GSAP
Field · Year
Commerce / editorial · 2026
[ Context ]

Red Clay brings place, harvest and process into the shopping journey. The challenge: make a catalogue feel cultivated without losing the directness people need to actually buy coffee.

[ What I did ]
  1. 01Built the responsive storefront in Next.js and TypeScript.
  2. 02Paced the editorial story so it hands off cleanly to product browsing.
  3. 03Built a variant-aware bag and checkout that keeps the same visual language.

The visual story

[ live site, captured Oct 2026 ]
Red Clay home — Coffee, held by place, over a Kiambu dirt road
01Place leads. The landscape introduces origin before the catalogue asks for a purchase.
Red Clay origin page — Kayanza, Burundi, with drying beds
02Origin pages. Kayanza, Burundi — drying beds, hills and two contrasting profiles.
Red Clay home on a phone
03The small screen. Same story, more direct.
Red Clay — Four ways into the current harvest
04Four ways in. The current harvest, presented as a short, readable choice.
[ Engineering & interaction ]

The key interaction is the handoff from documentary imagery to commerce. Images and motion carry the origin story; product choices stay easy to find.

Challenge

Make a catalogue feel cultivated and tactile while keeping the directness shopping requires.

Approach

Editorial pacing, product-led storytelling and a variant-aware bag share one visual language.

[ Outcome ]

A responsive storefront where origin stories, product browsing and the bag live in one public experience.

Visit site ↗
[ Next project / 02 ]Get paid without the ceremony.Lumina →