01) The Problem
TeaHaus has quite the extensive collection of tea. Over 200 tins are stored on a large wall, and many people come in asking for recommendations. The lack of an in-store menu makes customers overwhelmed and causes employees to repeat themselves when helping new customers. As a part-time sales associate, I wanted to improve the tea browsing and tracking experience. Chatting and interviewing our customers on their goals and pain points led me to developing the following personas.
Cara, "The Newbie," a 21-year-old student who doesn't frequently drink tea.
GOALS
Cara wants to buy a gift for her mom, who likes tea. She knows her mom likes green tea, but that's the extent of her knowledge. A friend recommended TeaHaus for their variety of interesting teas.
PAIN POINTS
Overwhelmed with the different types of tea presented in store
Difficulty finding information on tea tasting notes prior to entering the store
SHE SAYS:
"Whoa, it's my first time in here... you guys got a menu or something?"
"There's just way too many options, give me a moment..." (Nervous laughter)
Leon, "The Regular," a 38-year-old accountant who comes in every Tuesday and Thursday evening.
GOALS
Leon has a refined taste in tea, and wants to try every tea on the wall. He keeps a spreadsheet of what he's tried, and wants to find his favorite tea so that he can give recommendations to friends.
PAIN POINTS
Unsure what tea to try next
Difficulty keeping track of what he's tried and his opinions of them
HE SAYS:
"I got this last time and now I'm looking for something different but similar vibes, any recommendations?"
"I'm about halfway through trying all the teas, what should I try next?"
TeaHaus regulars are looking for a way to track the teas they've tried, haven't tried, loved, hated, want to try, and more. TeaHaus newbies are overwhelmed by the 200+ tea options and would like a way to filter through them more easily. This app aims to replace other methods of tracking such as keeping a document or spreadsheet, and integrate the tea wall into a "menu" format.
02) Design Iterations
The TeaHaus app has gone through ideation and iteration, adding more features as I learned more about user needs. I started off with translating our website into an app, which meant that initial iterations included an e-commerce element that I later decided to remove in favor of a Goodreads and Letterboxd-inspired platform to track tea activity.
EARLY DESIGNS
03) Final Designs
visit interactive prototype
The final design is composed of three main pages — Browse, Profile, and Home. Each page is composed of various tea tracking and recommendation features to help the user find the perfect cup!
Browse
Tea is organized into 9 categories, corresponding with the way they're arranged in store. In the Browse tab, users can find tea based on these categories, also split into caffeinated and non-caffeinated.
🌿 CLASSIC VS. AROMA
Users can toggle between these types of tea within each category.
🔍 SEARCH
Search within the category when in that page, delete the tag to search all tea.
User Profile
The profile is comprised of several elements for users to track tea they like, tried, and want to try,
🏅 TOP 3
Inspired by Letterboxd where users can choose their top 4 movies, users can display and edit their top 3 tea on their profile.
🫖 MY TEA
Liked tea is automatically saved to the pinned collection. Users have the ability to make custom collections for tea.
Home
The homepage showcases various recommendations and quizzes for tea, including popular, featured, tea quiz, random tea generator, about TeaHaus, and FAQ.
💡 FEATURED TEA
A new tea is featured weekly to encourage customers to try something new.
❓ ABOUT & FAQ
Learn more about TeaHaus in these sections.
04) Style Guide & Design System
The TeaHaus style guide emphasizes a light green as the main color. Other colorful shades are also utilized throughout the interface. I used the sans-serif font Fustat in varying weights. The UI components consist of recurring elements used in the app, such as tea tiles, buttons, navigation bars, filters, and more.
05) Reflections
Working behind the counter at TeaHaus has become a larger mission as I began to gather information about what our customers like, lack, and need. Designing the TeaHaus app has given me valuable experience in becoming a stronger designer and allowed me to consider how to create more complex features that people might need, such as saving tea into collections, filtering, searching, getting recommendations, and more!
