Tea
UI/UX • Mobile App • Process
Project Overview
Tea is a UI/UX case study for a mobile app concept built for home brewers of specialty loose-leaf tea — a subscription-and-brewing-guide service that helps people discover small-batch teas from independent importers and actually learn to brew them properly, instead of defaulting to bagged tea out of convenience.
The goal was to make an intimidating, ritual-heavy category feel approachable: clear step-by-step brewing guidance (temperature, steep time, leaf-to-water ratio) paired with a curated discovery feed, so a first-time user and a longtime tea drinker both feel at home.
This case study documents the process end to end, from competitor research through final UI decisions, since it's the project that best shows how I actually work — not just what I landed on.
Process
-
01
Competitor Research
Looked across existing tea-subscription and brewing-timer apps to see where they fell short. Most split into two disconnected categories: discovery-first apps with beautiful product photography but no real brewing guidance, and utility timers with none of the discovery or storytelling. No single app treated brewing knowledge as part of the product experience rather than an afterthought.
-
02
Mood Boards
Pulled reference across warm, botanical, low-saturation palettes — steam, ceramic, raw leaf textures — steering away from the bright, minimal "wellness app" look most competitors default to. The goal was something that felt more like a well-used ceramics shop than a productivity tool.
-
03
Style Tiles
Narrowed the mood boards into three style tiles testing different type pairings — one clean editorial serif-forward option, one warm rounded-sans option, and one hybrid — before landing on the hybrid: a serif for tea names and origin stories, a rounded sans for brewing instructions and UI chrome.
-
04
Iteration
Early wireframes buried brewing instructions two taps deep behind a product page. Testing paper prototypes with tea drinkers showed people wanted brew guidance visible immediately, not hunted for — so the brewing card was promoted to the first thing you see after selecting a tea, with discovery content moved to a secondary tab.
-
05
Final Decisions
Landed on a two-tab structure — Brew and Discover — with brewing instructions rendered as a simple, glanceable card (temperature, steep time, ratio) that stays pinned while steeping. The visual system leans on warm neutrals and real leaf photography instead of illustration, reinforcing that this is a product about an actual physical ritual, not just a subscription box.
