How an eCommerce UX Redesign Helped Launch a New Vertical and Bolster Subscription
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.
What We Did
- Landscape Analysis
- Concept Testing
- Usability Testing
- UX Design
- UI Design
- Visual Design
- Design System
- Food & Beverage
- eCommerce Subscription
Demonstrating the Benefits and Flexibility of an Innovative Tea Format
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.
A Redesigned Shopping Experience Focused on Customization & a New Wellness Product
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.
Designing a Visually Engaging Shopping Experience
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.
Helping Tea and Boba Lovers Explore All Their Drink Possibilities
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.