Willow & Pine Tea Co.
Concept demonstration showcasing boutique ecommerce design for a small-batch tea brand, blending sensory storytelling, tasting notes, and calm, high-end UI.
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.
Overview
Willow & Pine Tea Co. is a concept demonstration for a boutique tea brand. This project showcases how SmalCoda approaches brand-forward ecommerce experiences that feel warm, intentional, and immersive—demonstrating design thinking and technical capabilities for high-end DTC stores.
Design 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.
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.
Technical Implementation
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.
Want this approach for your business?
This concept demonstrates how we think about design and technical implementation. Let's discuss how we can apply these strategies to your project.