Case Study

Moss & Matcha

A calm, welcoming website for a small matcha label — product stories, brand narrative, and a smooth shopping flow that feels like the tea tastes.

ROLE: Design & Build
TIMELINE: 6 weeks
STACK: Next.js · Sass
STATUS: Live in production

The Moss and Matcha founders laughing together while reviewing the new site

Overview

Moss & Matcha had beautiful tea and a tired website. Product pages were hard to scan, the brand story was buried three clicks deep, and checkout leaked visitors on mobile. The brief was simple: make the site feel like the product — calm, crafted, and unhurried.

I rebuilt the storefront around rituals instead of SKUs: how each blend is whisked, where it is grown, and what it pairs with. Conversion followed the storytelling, and mobile checkout completions climbed after launch.

What’s included

Editorial product pages with rituals, origins, and pairings
Brand story told through scroll-driven chapters
One-page checkout tuned for thumbs and slow connections
Subscriptions for monthly refills with pause-anytime control

Process

How it came together

01 — TASTE

Learn the product

I spent a day at the tasting counter watching customers choose blends, noting the exact words they used — those words became the site’s copy.

02 — STORY

Design the narrative

Growers, grading, and whisking each got a chapter. Motion is gentle by design — slow fades and soft parallax, never jarring.

03 — SELL

Remove checkout friction

The cart became a slide-over, checkout a single page, and every step got a guest path. Fewer fields, faster tea.

Matcha powder in a bowl beside a bamboo whisk

Matcha whisk, spoon and cup on a light surface

Under the hood

Calm pages, quick loads

Next.js with static generation for instant product pages, Sass for the editorial typography, and GSAP for the soft scroll storytelling. The full source is available to serious collaborators — just ask.

Next.js Sass GSAP Git

Request the source