WorkProcessContact
Work
( Concept Build )E-commerce

HARU

A matcha storefront with an AI concierge that helps you choose — and sells.

DTC — Single-Origin Matcha/2025/In-house build

HARU is a brand we invented and a storefront we built for ourselves — not a client engagement. The AI concierge is real and runs live on Claude, but the shop around it is a front-end build: the cart and checkout are working UI rather than a live payment integration, and the catalogue is structured demo data.

HARU — website
Services
Brand-led DesignStorefront Build (Front-End)AI Shopping ConciergeUX — quiz, subscription, cartMotion Design
Stack
Next.js 16React 19TypeScriptTailwind v4Motion (Framer Motion)Claude APIVercel AI SDKResend
Year
2025
(00)Overview

HARU is our own build — a single-origin matcha brand we invented, stone-ground in Uji and whisked in Amsterdam, so we could design a full DTC storefront end to end without waiting for a client to hand us one. It's an editorial, photography-led front end built around a single idea: freshness and provenance. Then we gave it a custom AI concierge — a Claude-powered shopping assistant that helps visitors find the right matcha, answers prep and provenance questions, and moves them toward a purchase with in-chat product cards and add-to-cart.

(01)The Challenge

The problem

Most matcha sold in Europe is stale, blended and bitter — and on the shelf it all looks the same. HARU's edge is the opposite: direct-trade single-farm sourcing in Uji, freshness-dated tins, cold and fast shipping. The task was to make a commodity feel like a considered ritual worth a premium — carried almost entirely by design and story.

(02)The Approach

What we
built.

We built a warm, minimal, editorial storefront where every choice serves the freshness-and-provenance story: misty Uji tea fields, a farmer in the field, latte-art bowls; a light serif display over clean sans; generous whitespace and no hard sell. The commerce experience is considered end to end — a matcha-finder quiz, a subscription band framed around perishability, product pages with prep guides and cross-sell, and a full cart flow. On top of that we built a custom AI concierge — no third-party chat widget, just Claude. It greets every visitor, asks one question at a time to understand who they're buying for, then recommends one or two real products from HARU's catalogue as in-chat cards with a live 'Add to cart' — cross-selling the whisk-and-bowl set and framing the subscription around freshness. It only ever recommends real, in-catalogue products, and captures emails for a first-order discount. It's a working demo of AI that doesn't just answer questions — it sells, pulling the exact levers that lift average order value and turn first-time buyers into repeat subscribers. The storefront itself is a front-end build: cart and checkout are functional UI demos rather than a live payment integration, and content is structured demo data — so the whole thing is ready to scale into real commerce.

  • 01Custom AI concierge (Claude) that recommends real products and adds them to the cart in-chat — no third-party bot
  • 02Concierge asks one question at a time, cross-sells the whisk-and-bowl set, and frames the subscription around freshness
  • 03Concierge captures emails for a first-order discount and speaks the visitor's own language
  • 04Editorial home — hero, featured products, origin story, trust signals, reviews, subscription, newsletter
  • 05Shop grid and product detail pages with a purchase module, prep guide and cross-sell
  • 06Matcha-finder quiz to guide first-time buyers
  • 07Subscription band framed around freshness (matcha is perishable)
  • 08Reusable image system with crop control for on-brand photography
  • 09Scroll reveals and micro-interactions via Motion for an unhurried feel
  • 10Typed data files for products, reviews and quiz — backend/CMS/checkout ready
(03)What it demonstrates
  • 01Guided selling built to lift average order value — the concierge cross-sells the whisk-and-bowl set and frames a bundle on every recommendation.
  • 02A subscription positioned around freshness, showing how a one-off buyer becomes recurring revenue rather than a single transaction.
  • 03A 24/7 concierge that qualifies and recommends at software cost — the shape of the ROI case for AI over a human shop assistant.
  • 04A commodity repositioned as a premium ritual — margin defended through brand and design instead of discounting.

Want one like this?