What I did:
Project Overview
VarieTea (pronounced: variety) is recipe web application contains recipes for tea blends, other tea based drinks and snacks. VarieTea strives to make tea accessible to a variety of people, from tea enthusiasts to novices.
Problem
Tea has been on the rise since 2020 but the majority of non-alcoholic beverage recipes websites cater predominately to coffee drinkers. As a result tea has been largely overlooked by most despite its versatile uses.
Solution
Create a friendly web app that teaches tea-based recipes for all skill levels. It will include various types beverage recipes and tea-based baked goods to showcase the variety of tea.
User Research
Competitor Research
I sketched some screens I liked from various popular recipe websites and tea blogs to figure out common UI patterns and popular features. I used the sketches as an index to refer back to as the project progressed.
User Personas
Using the information I gathered from user interviews and competitor analysis, I used chatGPT to synthesize the information to created user personas to represent my target users.
Low-Fidelity Wireframes
To map the user journey, I sketched key screens and verified navigation through usability testing. All users completed tasks quickly, so I proceeded to define the features for key screens.
A/B Test
This test was to see which layout users preferred for organizing their saved recipes and folders.
The results were that 57% of users preferred B. Participants liked that they could access both recipe collections and individual recipes in one view.
Design System
The design system evokes the comfort of hot tea on a cool day, using high-contrast, accessibility-tested colors inspired by loose leaf tea and legible typography that matches the brand's friendly, casual tone.
Font
Color Palette
Components
Usability Test
After implementing the design system, I conducted another usability test and gained additional insights for feature expectations.
The “user home” should have more “personal touches” since they created an account.
Because there is a rating system, there should be a commenting section for further review and input.
Next Steps
Features for a second iteration:
Tea diary - where users can note their preferences or experiences with certain recipes.
Community features - tea tasting club (subscription boxes or meet ups) and chat rooms.
Additional user input to determine if skill level rating should be determined by user community or by host of site.
Connect users with professional tea sommeliers.
Project Reflection
VarieTea was a passion project addressing the lack of user-friendly tea-focused platforms. Existing tea websites felt intimidating to navigate, so I researched recipe apps and tea blogs to determine VarieTea's design direction and content strategy.
Regular iterations of researching, designing, testing, and revising based on results were essential to making VarieTea a usable and enjoyable recipe app. Being open to feedback from usability tests, my mentor, and colleagues helped me better understand both the user journey and the product itself. During research, I had only a vague idea of what a tea-themed recipe website should include. It wasn't until I organized my research findings that I understood my target audience—primarily tea novices—and identified the features needed to help them find recipes and improve their brewing skills.