Emotional Design
TeaLeaf
TeaLeaf is a redesign of the tea app "TeaPal," built around emotional design: the idea that how an app makes you feel matters as much as what it does. The aim was to turn a plain tracker into something people actually feel attached to, so a quiet cup of tea feels just as good on screen as in your hands.
Me and Myself
Responsibilities
Research
- Embodied Research
- Interaction Map
Concept
- How Might We
- Design Principles
- Core Pillars
Design
- UI Redesign
- Prototyping
... create a tea app for both casual drinkers and enthusiasts that makes the whole journey feel seamless, personal, emotionally fulfilling and inspiring?
The Process
Four Core Pillars
I started by pinning down what shapes the whole app — who it's for, what they do in it, and why it matters to them. These four pillars became the backbone every later decision was measured against.
A tea lover, somewhere between casual sipper and full-on enthusiast, on their own tea-drinking journey.
Track and record their own tea experiences and share them with others — to enjoy tea, connect with fellow tea lovers, and stay informed.
- Keep track of their own journey, to explore and remember different teas.
- Follow others' journeys, to stay informed and find teas that match their interests.
- Reflect on their own experiences, to feel more mindful and connected to their tea ritual.
- Learn from others' journeys, to feel inspired and discover new teas.
Interaction Map
Looking at the original app, I mapped who uses it, when, and how it makes them feel. Tea isn't just a product here, it's a ritual. The app already hints at warmth and curiosity, but the feeling fades fast and never quite holds together. That gap became the starting point.
Design Principles
Emotional Warmth
Create a cozy, inviting atmosphere that makes every interaction feel like coming home.
Mindful Flow
Promote relaxation and awareness of the moment throughout the tea experience.
Playful Discovery
Awaken curiosity and engagement by making exploration rewarding and fun.
Personal Growth
Give users a sense of progress and development on their tea journey.
Motivating Progress
Promote regular use through rewarding feedback and meaningful milestones.
Embodied Research
From Feeling to Form
For the embodied research, I collected everyday moments where the target emotions actually show up, and paid close attention to how each one feels. It's a way to turn a vague goal into something concrete you can design for.
For example: Emotional Warmth → the first ray of sunshine. Little anchors like that kept the final design honest and true to the feeling.
Visual Language
Colour
A calm, sage-driven palette, paired with a playful display face and clean body text, carries that emotional warmth into every screen.
The Redesign
A visually & acoustically appealing experience
A warm, personalized home screen — the tea of the day, a lofi player for an ambient mood, and a growing leaf that turns progress into something alive and rewarding.
The home screen, in motion
A quick walkthrough of how it actually feels to open TeaLeaf — calm, warm and quietly alive.
Gamification & personal customization
"Find my Tea" reads the user's current mood, body, taste and situation — a personalized recommendation and a mindful moment of self-reflection before each cup.
Seamless in everyday life
Home-screen widgets, quick logging and effortless sharing let the ritual slip into daily life — never a chore, always just a tap away.
A community of tea lovers
Through "Leaflet", users swap recommendations and little notes — turning a quiet, solo ritual into a shared, inspiring journey.
Don Norman's Three Levels
Using Don Norman's three levels of emotional design, we answer the How Might We question: why this redesign creates a more intense, lasting emotional experience.
