HARRYWATSONCREATIVE.
Person wearing a dark green t-shirt printed with the Tea app's tea-bag logo, seated in a cafe

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 the original ten-app brainstorm list through wireframes and final screens, since it's the project that best shows how I actually work — not just what I landed on.

Role

UI/UX Designer

Project Type

Mobile App — UI/UX Case Study

Deliverables

Concept Sketches
Wireframes
UI Screens
Packaging Concepts

Tools

Figma
Adobe Illustrator

Process

  1. 01

    Finding the Concept

    Started with a list of ten possible apps — a volleyball meetup app, a running-and-cafe app, a food-tracking app, a few others — before circling "Tea" as the winner. Early character sketches explored a teapot or teacup mascot before settling on a simpler tea-bag mark, and a rough site map laid out the core pages: login, world map, favorite teas, discover more.

    Handwritten ten-app brainstorm list with 'Tea' circled as the winner, plus early character sketches and a site map
  2. 02

    Wireframing

    Sketched the core screens by hand first — discovery, tea detail, location, favorites — marking up what wasn't working directly on the page as I went: combining two logo treatments into one, switching square thumbnails to round, and flagging a "world map" feature to explore for browsing teas by origin.

    Hand-drawn wireframe sketches for the Tea app with handwritten annotations like 'round is better' and 'a world map!'
  3. 03

    Refining the Flow

    Rebuilt the hand-drawn screens as cleaner digital wireframes to test the full flow: login, a Discovery feed with Popular/Recent/For You tabs, a New Post flow for logging a tea with its ingredients and instructions, and Favorites. This is the stage where the tea-detail screen — the actual center of the app — got locked in.

    Mid-fidelity digital wireframes showing login, discovery feed, new post, and tea detail screens
  4. 04

    Final UI

    The wireframe tea-bag mark carried straight through to the finished app: a simple line-art tea bag on a deep green splash screen, set against a clean sans-serif wordmark. Restrained on purpose, so the photography and user-submitted recipes stay the focus once you're past the loading screen.

    Final Tea app splash screen with a white tea-bag icon on a deep green background
  5. 05

    Beyond the App

    The identity extended past the screen into a small packaging system — kraft subscription boxes stamped with the tea-bag mark and a "Love Tea" pattern — to test whether the mark held up as a physical brand touchpoint, not just an app icon.

    Stack of kraft cardboard Tea subscription boxes printed with the tea-bag logo and a 'Love Tea' pattern

Try It

This is the real UI from the case study above, not a recreation — tap around or swipe between Home, Favorites, and Account to try the flow yourself.

Tea app screen