Vibrant colors and bespoke illustrations bring the new tea format to life.
Tea Drops transforms the way people enjoy tea. Instead of a bag or kettle, Tea drops uses a compressed loose-leaf drop that dissolves in seconds to make delicious, convenient, perfectly steeped tea and boba drinks.
We partnered with Tea Drops to redesign their subscription user experience as they rebranded and extended into wellness. We completely redesigned the shopping journey from the homepage to the account. The new design highlights its distinctive product system and engages customers through an intuitive custom tea box experience.
The innovative tea drop format is a signature of Tea Drops. The small form factor is a convenient way to make bold-flavored tea quickly. It can be transformed into many types of tea drinks, including hot, cold, and even boba. However, in usability testing, some consumers didn’t immediately understand those benefits as compared to traditional tea bags or loose-leaf tea.
As Tea Drops expanded into a new category of wellness drops, our challenge was clear; we needed to demonstrate the benefits of both products, show their flexibility, and how they fit into the larger system of Tea Drops drinks.
The goal of the redesign was to not only explain the unique tea drop form factor but also to create a simple way for customers to make a custom tea box.
Across the shopping flow from the navigation to product detail pages, we visually demonstrated how the Tea Drops could be customized and made into multiple drink combinations. As the user shops, they are shown enticing recipes of different drinks, from hot teas, iced teas and boba to wellness-enhanced drinks of all kinds.
We completely updated the navigation system to expose the multiple product categories and guide users to create a custom tea box. These changes help expose the range of products Tea Drops offers, without forcing customers down any one path for exploration.
The new product, wellness drops, can be added to any kind of drink. To show that versatility, we designed a product detail page where it can be purchased individually as well as an explicit step in the custom tea box experience.
Usability testing with tea and boba drinkers gave us customer feedback to refine the design. The testing helped us fine-tune the way we expressed value and how the multiple products work together. We simplified the box customization flow to support easy decision-making at each step.
We added key information like caffeine levels to help customers pick the right teas based on their preferences. Teas are shown as ‘made drinks’ to help customers visualize the range of flavors and combinations a tea drop can create.
We extended the Tea Drops brand to digital with custom icons, illustrations, and a bold accessible color palette. The drop inspired the colorful organic shapes we created as visual elements across the site. As we designed each screen, we also created a design system with guidelines for color usage, typography, and UI components. These reusable UI elements create consistency across the site and are the foundation for future designs.
The new site experience guides customers to create a custom tea box, and incorporates the new product offering, wellness drops, in a cohesive and compelling experience. Customers have a clear and simple path for building their ideal box of tea drinks and engaging ways to learn about the products and what makes Tea Drops so unique.
Turn ideas into beautifully designed products users love. From initial concept through to final implementation, we design experiences that solve real user needs and drive business growth.
Design product experiences that naturally drive user acquisition, activation, and expansion by creating interfaces and user journeys that reduce friction, accelerate time-to-value, and turn your product into a growth engine through exceptional UX design.
Get expert insight into your product experience. Our comprehensive evaluation identifies opportunities to improve usability, engagement, and conversion through design.