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.

Tea Drops Website

What We Did

  • Landscape Analysis
  • Concept Testing
  • Usability Testing
  • UX Design
  • UI Design
  • Visual Design
  • Design System
View our Capabilities

Project Type

  • Food & Beverage
  • eCommerce Subscription

Project Date

  • 2022
Tea Drop hero and navigation
Tea drops home hero and navigation

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.

The UI educates the user about the format while they are customizing their box.

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.

Box customization is introduced to the user through a visual showing the different types of drink combinations they can make.
A drink “recipe” module helps users see the various types of drink combinations and how the products work together.

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.

Wellness PLP
Mobile navigation exposing key categories: tea, boba, and wellness.
The site navigation, shopping flow and page content structures reinforce a clear positioning of the various Tea Drop product offerings throughout the site.

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.

Customers can select from three box types and how many drinks they want per box.
Customers can select from a variety of teas.
Customers can add extras to their customized box including wellness drops, extra teas, and boba.
The box customization experience provides users with the information they need at a glance to make selections, with the option to learn more about the products as they go.
Customers can select from three box types and how many drinks they want per box.
Customers can select from a variety of teas.
Customers can add extras to their customized box including wellness drops, extra teas, and boba.
The box customization experience provides users with the information they need at a glance to make selections, with the option to learn more about the products as they go.

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.

A small set of the reusable design system elements that create consistency across the site and are the foundation for future designs.
A small set of the reusable design system elements that create consistency across the site and are the foundation for future designs.
Everyday incorporated the visual style and created supporting graphical elements as extensions of the new Tea Drops visual brand identity.

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.

How we can help