AINSI THÉ, a renowned Taiwanese fine tea house, launched its e-commerce platform in 2021 to adapt to the challenges of the pandemic. Serving tea enthusiasts and investors in traditional puer tea and taiwanese tea, my role was to design and launch a new e-commerce site that mirrors the immersive in-store experience.

AINSI THÉ, a renowned Taiwanese fine tea house, launched its e-commerce platform in 2021 to adapt to the challenges of the pandemic. Serving tea enthusiasts and investors in traditional puer tea and taiwanese tea, my role was to design and launch a new e-commerce site that mirrors the immersive in-store experience.

AINSI THÉ, a renowned Taiwanese fine tea house, launched its e-commerce platform in 2021 to adapt to the challenges of the pandemic. Serving tea enthusiasts and investors in traditional puer tea and taiwanese tea, my role was to design and launch a new e-commerce site that mirrors the immersive in-store experience.

Time

Jun 2021 — Mar 2022

Client

AINSI THÉ 萃釅

Role

Digital UX/UI Designer

Contribution

Visual Design


User Research
Digital Marketing
User Experience Design

Team

Angela C.
IT Team

Time

Time

Jun 2021 — Mar 2022

Jun 2021 — Mar 2022

Client

Client

AINSI THÉ 萃釅

AINSI THÉ 萃釅

Role

Role

Digital UX/UI Designer

Digital UX/UI Designer

Contribution

Contribution

Visual Design


User Research
Digital Marketing
User Experience Design

Visual Design


User Research
Digital Marketing
User Experience Design

Team

Team

Angela C.
IT Team

Angela C.
IT Team

Challenge

Challenge

Challenge

Although AINSI THÉ had a logo and a general understanding of its business mission, it struggled to clearly convey its core value of offering "drinkable puer tea" versus "investment-aged puer tea" in its communications and tea ceremonies. To provide customers with a pleasant tea experience at home during the pandemic, we needed an online e-commerce platform for AINSI THÉ's customers.

Goals

Goals

Goals

  • Translating the in-store experience of puer tea online

  • Enhance the conversion rate and brand awareness

  • Reduce the high bounce rate and increase customer engagement

(A) Understand

(A) Understand

(A) Understand

Our Customers - 50+ interviews

Our Customers - 50+ interviews

We discovered that our customers need easier navigation, clear sections for key benefits of different puer tea section and payment options, better display of product details, and higher-quality images for a stronger brand impression.

*Conducted user interviews during tea ceremonies as a tea sommelier

*Conducted user interviews during tea ceremonies as a tea sommelier

Our Customers Pain Points in Home Tea Brewing

Our Customers Pain Points in Home Tea Brewing

Through testing, we understand many users encounter key issues with buying product on our website: insufficient product information, which complicates usage; inability to purchase small quantities of tea, deterring casual buyers and a slow checkout process that increases bounce rates.

Persona

Persona

Our Target Audience: In-Store vs. Online Experiences

Our Target Audience: In-Store vs. Online Experiences

Online shoppers, who are often less acquainted with in-store experiences, require more detailed instructions. In contrast, in-store customers benefit from immediate assistance and direct interaction with our products, including the opportunity to taste tea firsthand.

This user journey map was created to illustrate how our customers purchase tea products through our initial online website.

Journey Map

Journey Map

(B) Define

(B) Define

(B) Define

User Pain Points

User Pain Points

  • Insufficient tea brewing information hinders home use

  • High bounce rate due to a slow checkout process

  • Inability to purchase small quantities deters flavor experimentation

  • Insufficient tea brewing information for home use

  • High bounce rate due to a slow checkout process

  • Inability to purchase small quantities deters flavor experimentation

Design Goal

Design Goal

Improve the user experience by developing a clear information architecture and visual identity for product selections. This will facilitate easier navigation and help customers quickly find what they're looking for online. Enhancements will include redesigned checkout buttons and comprehensive displays of product details and tea brewing instructions, ensuring customers receive all essential information to replicate the in-store tea brewing experience.

Focus Area

Focus Area

  • Information Architecture

  • Shoppable Navigation

  • Member Account

  • After-Sales Service

(C) Ideate & Testing

(C) Ideate & Testing

(C) Ideate & Testing

Redesign the Information Architecture

Redesign the Information Architecture

Redesign the Information Architecture

By dividing it into two sections: "Shop" and "Collection" This will allow users to easily navigate to their areas of interest, whether they are looking to purchase tea for drinking or for investment.

Challenges and Breakthroughs

While researching our ancient puer tea product, we discovered that 19.80% of our target audience is interested in investment puer tea. So, we organized our collection by decade, spanning from the 1920s to the 1990s, and provided detailed information on the value and history of each puer tea.

Challenges and Breakthroughs

While researching our ancient puer tea product, we discovered that 19.80% of our target audience is interested in investment puer tea. So, we organized our collection by decade, spanning from the 1920s to the 1990s, and provided detailed information on the value and history of each puer tea.

*Above sources from google analytics data of AINSI THÉ

*Above sources from google analytics data of AINSI THÉ

*Above sources from google analytics data of AINSI THÉ

Shoppable Navigation

Shoppable Navigation

Shoppable Navigation

The site features sticky buttons feature for "Add to Cart" and "Buy Now" for viewing product information that stays at the top while scrolling, enhancing navigation with elegant motion.

Challenges and Breakthroughs

Based on our research into online shopping habits, I redesigned our shopping flow using wireframes that incorporate those sticky buttons. The challenge was ensuring these buttons are visible without being intrusive during product page navigation, crucial for reducing checkout abandonment. User testing proved that this streamlined design speeds up the purchasing process for returning customers and enhances information accessibility for new users, significantly improving the overall online shopping experience.

Challenges and Breakthroughs

Based on our research into online shopping habits, I redesigned our shopping flow using wireframes that incorporate those sticky buttons. The challenge was ensuring these buttons are visible without being intrusive during product page navigation, crucial for reducing checkout abandonment. User testing proved that this streamlined design speeds up the purchasing process for returning customers and enhances information accessibility for new users, significantly improving the overall online shopping experience.

Adding Member Account

Adding Member Account

Adding Member Account

Member account system is ensuring that the registration process is user-friendly while clearly communicating the benefits. Offering discounts, order tracking, and personalized recommendations can attract sign-ups.

Challenges and Breakthroughs

The process itself may be seen as complicated and caused a higher bounce rate. It's essential to simplified registration and make the benefits immediately tangible to prevent potential customers from abandoning the process. So we designed a one-click registration feature, utilizing social media or email verification, simplifies access to membership.

Challenges and Breakthroughs

The process itself may be seen as complicated and caused a higher bounce rate. It's essential to simplified registration and make the benefits immediately tangible to prevent potential customers from abandoning the process. So we designed a one-click registration feature, utilizing social media or email verification, simplifies access to membership.

*Member Account Create & Checkout Flow Prototype

*Member Account Create & Checkout Flow Prototype

After Sales Service

After Sales Service

After Sales Service

We realized that during covid 19, maintaining customer engagement post-purchase poses a challenge, especially in linking the in-store experience with the at-home experience. Offering continuous value through after-sales services such as exclusive content can foster engagement, but it's crucial that these services bridge the gap between physical and digital interactions to sustain interest and loyalty to our brand.

Challenges and Breakthroughs

A significant breakthrough would be the inclusion of a small card with a QR code inside each package, which customers can scan to access an exclusive brewing podcast. This podcast offers detailed instructions tailored to the specific tea purchased, enriching the at-home experience with the depth of in-store interactions.

This approach not only enhances the educational value of each purchase but also strengthens customer engagement by integrating interactive digital content with the physical product. Enhancing the loyalty program to reward both in-store and online interactions further unifies the customer experience across platforms, boosting overall brand presence and loyalty.

Challenges and Breakthroughs

A significant breakthrough would be the inclusion of a small card with a QR code inside each package, which customers can scan to access an exclusive brewing podcast. This podcast offers detailed instructions tailored to the specific tea purchased, enriching the at-home experience with the depth of in-store interactions.

This approach not only enhances the educational value of each purchase but also strengthens customer engagement by integrating interactive digital content with the physical product. Enhancing the loyalty program to reward both in-store and online interactions further unifies the customer experience across platforms, boosting overall brand presence and loyalty.

Design Solution

Design Solution

Design Solution

Insufficient Brewing Info
→ Better IA & Brewing Guide

Insufficient Brewing Info

→ Better IA & Brewing Guide

Insufficient Brewing Info → Better IA & Brewing Guide

To enhance our customers' experience and address the need for better access to tea brewing information, we have restructured our website’s information architecture. Ensure that every visitor, whether a casual drinker or a seasoned collector. Our offerings are now organized into two categories:

01 Shop — Drinkable Puer Tea: Each product page includes detailed tasting notes and specific brewing instructions to help enthusiasts enjoy their tea to the fullest.

02 Collection — Aged Investment Puer Tea: Aimed at collectors, these pages offer in-depth background information and expert advice on aging potential to aid in informed decisions.

To enhance our customers' experience and address the need for better access to tea brewing information, we have restructured our website’s information architecture. Ensure that every visitor, whether a casual drinker or a seasoned collector. Our offerings are now organized into two categories:

01 Shop — Drinkable Pu'er Tea: Each product page includes detailed tasting notes and specific brewing instructions to help enthusiasts enjoy their tea to the fullest.

02 Collection — Aged Investment Pu'er Tea: Aimed at collectors, these pages offer in-depth background information and expert advice on aging potential to aid in informed decisions.

High Bounce Rate
Checkout Flow & Member Account

High Bounce Rate

→ Checkout Flow & Member Account

High Bounce Rate Checkout Flow & Member Account

To reduce the high bounce rate, we've made two design:

01 Streamlined Checkout Flow We optimized the checkout button for faster transactions, simplifying the process to reduce abandonment.

02 Added Member Account Members now enjoy easier access to discounts, order tracking, and history for quicker re-purchases and improved engagement.

To reduce the high bounce rate, we've made two design adjustment:

01 Streamlined Checkout Flow We optimized the checkout button for faster transactions, simplifying the process to reduce abandonment.

02 Added Member Account Members now enjoy easier access to discounts, order tracking, and history for quicker re-purchases and improved engagement.

Inability to Purchase Small Quantities
→ Custom Sample For Tasting

Inability to Purchase Small Quantities
→ Custom Sample For Tasting

Inability to Purchase Small Quantities → Custom Sample For Tasting

Customers can now select 10g samples of different teas, perfect for tasting or travel. This allows for flavor experimentation and convenience, enhancing the overall shopping experience by catering to diverse needs and preferences.

Impact

Impact

Impact

Accomplisment in JUN 2021 - JUN 2022

Accomplisment in JUN 2021 - JUN 2022

Boost in Awareness and Conversions



Boost in Awareness and Conversions



Boost in Awareness and Conversions



Increase conversion rates by 30% within 60 days of launching and tripling e-commerce growth over a year.

Increased Customer Retention

Increased Customer Retention

Increased Customer Retention

By offering unique, educational content through the brewing podcast accessible via QR codes, our brand can keep customers engaged beyond the initial purchase. This ongoing engagement fosters a deeper connection with our brand, increasing customer retention rates.

Boosted Brand Image

Boosted Brand Image

Boosted Brand Image

Offering a seamless integration of in-store quality and at-home convenience elevates the overall brand image. Customers perceive the brand as innovative and customer-centric, which can differentiate it in a competitive market.

RELATED PROJECTS

RELATED PROJECTS