Fast-paced design challenge for a fictitious tea brand's website.
Role
UX/UI Designer
Duration
1 week
when
Fall 2026
Project Overview
Teadrops is an artisanal, small-batch tea brand built around the stories behind its leaves. For this design brief, I created a website concept to introduce its new Peach Black Tea, a blend of handpicked black tea leaves from Vietnam’s Thai Nguyen mountainous region and dried peach pieces. The brand was also preparing for a pop-up shop where visitors could taste the teas, purchase leaves, and learn about their origins.
I wanted the website to reflect that same sense of discovery. Rather than lead with a product alone, I set out to create a grounded, inviting experience that connected the new flavor with the landscape and culture behind it.
Process
Finding the Visual Direction
I started by highlighting words in the brief that could guide the visual direction: earthy textures, rounded shapes, dark natural colors, and energetic accents. Those cues became the starting point for a moodboard, helping me translate Teadrops’ grounded, curious voice into something visual.
From there, I explored a standalone logo, typography, and different color variations for the website. I also researched imagery of Thai Nguyen’s mountainous landscape. That visual research helped me connect the brand’s aesthetic with the place at the heart of its new blend.
Exploring the Brand Identity
The logo and type explorations gave me room to consider how Teadrops could feel both calm and expressive. I worked through variations before bringing the identity into the website, looking for a balance between its natural palette and the brighter energy of the peach flavor.
Designing a Story-led Homepage
Once the direction started to take shape, I felt inspired to begin with the homepage in Figma. I featured Peach Black Tea first, then used the rest of the page to invite visitors deeper into the cultural roots of the leaves as they scrolled. I wanted discovering the story to feel like a natural part of discovering the product.
Bringing the Shop Together
Using Adobe mockups, I applied the logo to a sample tea bag so I could see how the identity would translate onto packaging. I then built the main website components, including a product page where visitors could explore the tea and add it to their cart.
To see the broader vision come together, I designed the main shop page with the rest of Teadrops’ varieties. This let me carry the same visual language beyond the featured blend and into a fuller browsing experience.
Reflection
As a creative with Japanese and Vietnamese roots, I often find that my culture grounds the way I work. This was one of the most meaningful parts of the project: being able to bring that connection into a design centered on the origins of tea, rather than leaving it separate from my creative practice.
Building a brand presence that felt calm, earthy, and inviting was fulfilling in its own right. But connecting that visual direction with a sense of cultural appreciation made the work feel especially personal. It reminded me how much meaning I find in projects that let those parts of myself come together.