Teabox E-Commerce Website

TEABOX E-COMMERCE WEBSITE

DarjeelingTeaXpress

ABOUT THE PROJECT

DarjeelingTeaXpress was a Darjeeling based progressive Tea Brand with a singular focus on delivering the best Darjeeling Teas to tea connoisseurs and consumers worldwide. Teabox was a new e-commerce website that DTX wants to build to sell teas from more sources. Our team helped the client ideate on the business model of Teabox and design the e-commerce website.

In 2014, the Teabox Company successfully raised $1 million investment from venture capital companies Accel Partners and Horizon Ventures. (Read More at http://tinyurl.com/p59nj3z )

View Project

MY ROLE & RESPONSIBILITIES

User Experience Designer
  • Conducted customer journey mapping session with the client to uncover opportunities for improvement of customer experienced
  • Designed the information architecture and tasks flows for the e-commerce website
  • Designed the wireframes for the website and supported the development team during implementation phase

THE APPROACH

Discovery
Design
Development

DISCOVER

Stakeholder Interview
The project was kick-started with an interview session with the founder of Teabox. The goal was to understand the entire vision of the business and this project so that it sets us on the same page and gives us a common understanding of the challenges we are setting out to solve.
 
We also went through a customer journey mapping session with the founder to map out the touch points between the service and the customers to identify where the gaps and opportunities within the process are. During this collaboration process, we were also trying to understand the ideal customer experience the business wanted to provide.
User Research
We set the foundation of our customer-centric experience design by exploring who we are designing for (personas), how they achieve their goals (user journey) and what their alternative solutions are (environmental scan).
 
Personas
Personas help to validate our design decisions down the line to ensure that we are indeed designing for their wants and needs. For Teabox, two main personas were developed based on the insights from secondary research though tea forums.
Tea Connoisseurs
  • Goals are to broaden tea tasting horizon and purchase teas from credible e-commerce sites.
  • Know what they want, and purchase their teas from stores (both online and offline) that give them the best overall experience.
Tea Enthusiasts
  • Goals are to learn more about tea in general and be able to enjoy team without having to go the extra mile
  • Purchase tea more regularly offline than e-commerce sites because of the added uncertainty and delivery costs.
User Journey

Based on personas, we created the situation they are likely to be in to understand how they use the product or service to achieve their goals.

Firstly, we map out the existing buying journey of both Tea Connoisseur and Tea Enthusiast.

Slide14

Slide16

Then based on the ideation we had in the customer journey mapping session, we also mapped out the ideal user journey we would be designing for, which would be used as a design reference.

Slide191

Slide18

To learn about the best practices and untapped opportunities, we also studied the websites and services from aspirational competitors. The results of all research were continuously referred to during the design process to ensure that our resulting solution leverages the insights.

DESIGN

Wireframes:
This is the phase when the ideas are turned into tangible prototypes, and this is when I’m fully involved in as a UX designer. The main challenge was about how to design a website that meets the needs of both groups of the target audience. On one hand, the design needs to allow tea enthusiasts to learn more about tea and on the other hand, help tea connoisseurs to quickly purchase what they usually drink.

Home cutted

Tea Detail cutted

The homepage was designed to tell a story of the brand Teabox – direct sourced from tea plantations. It allows frequent users to be able to quickly purchase items. It also guides new tea enthusiasts to click on related articles to learn more about different tea leaves and the stories behind them.

Home cut 2

On the product detail page, it does not only allow users to easily click to purchase but also tells stories about the tea characteristics and the origin of the tea. In one way, it helps tea enthusiasts to learn more knowledge about tea. As for tea connoisseurs, it provides more in-depth information for them to evaluate the tea.

Tea Detail - origin

FINAL PRODUCT

The Teabox Company developed the website in-house. I helped in shaping the design and modifying some details of interactions along the way.

See it live: www.teabox.com

final