Back to work
EcommerceCase study

Willow & Pine Tea Co.

Boutique ecommerce experience for a small-batch tea brand, blending sensory storytelling, tasting notes, and calm, high-end UI.

EcommerceBrandingUX/UI
Brand, UI/UX, Frontend DevelopmentNext.jsTypeScriptTailwind CSSHeadless CMS

Project snapshot

A warm, story-driven ecommerce experience built around ritual, craft, and sensory exploration.

A fully custom Next.js + headless CMS storefront featuring tasting notes, brewing rituals, and a calm, guided shopping flow.

Book this style

Overview

Willow & Pine Tea Co. is a fictional boutique tea brand offering small-batch blends. The goal was to create a brand-forward ecommerce experience that feels warm, intentional, and immersive—showcasing how SmalCoda builds high-end DTC stores for small businesses.

Challenge

Most small tea brands rely on generic themes that don’t express the nuance of their products. The challenge was to design a shopping experience that communicates aroma, ritual, and calm while still feeling fast, clear, and conversion-friendly.

Approach

I built a modular design system centered around editorial product photography, tasting note badges, scroll-based brewing rituals, and subscription upsells. The content structure encourages exploration: seasonal highlights, flavor discovery, and pairing suggestions, all within a calm, spacious layout.

Hero + product grid mockups

UX & UI Design

The homepage introduces the brand through a simple hero, seasonal picks, and clear entry points into the catalog. Product pages focus on narrative: tasting notes, ingredients, and brewing steps unfold as you scroll. On mobile, a sticky purchase bar and simplified layout keep the experience quick but still premium.

Mobile product page & sticky cart UI

Engineering

Built with Next.js and the App Router, the store uses a headless CMS for product data and image metadata. Server Components and image optimization keep the site performant. Cart interactions are handled via server actions and lightweight client components.

Architecture / data flow diagram placeholder

Outcome

The result is a serene ecommerce experience that combines brand storytelling with practical flows like subscriptions and upsells. It demonstrates how SmalCoda can deliver premium DTC experiences that feel handcrafted but remain easy to manage for a small team.