top of page
This site was designed with the
.com
website builder. Create your website today.Start Now
Online Shopping

Super-Taste 2.0

Create a new and high-quality online shopping experience with data.

Time

2021-2022

My Role

Senior UI/UX Designer

Responsibility

UI Design

UX Planning

Project Brief
​

Super-Taste e-shop, is an important business operated by TVBS Media Inc.

 

In addition to building “Super-Taste” brand awareness with TV programs, the company has also framed an online store to promote cooperative suppliers and sell highly praised goods.

 

Based on the data in the second half of 2020, the team sorted out the pain points that need to be improved, and expects to launch a new e-commerce platform in 2022. It will bring a better shopping experience to customers by a new visual language and an optimized UX process.

Optimization Focus

Checkout Experience 

Reduce Abandonment Rates of checkout flow.

Order History

Optimize the browsing experience of orders history.

Menu Structure

Restructure the menu feature, and allow users to seek the desired product more accurately.

Customer Profile

Who creates the most Goal Completions?

​

  • Age: 35-44

  • Gender: Female

  • Interests: Travel

Data_Customer Profile
Data_Customer Profile

  • The feature of online store has introduced into the relevant App. Most customers browse the web on mobile, but the desktop browsing experience is better.

​

  • The e-shop keeps touching New Visitors, and Returning Visitors occupy more than half of visiting rate, it represents the platform has a certain degree of customer loyalty.

What are the data we expect to optimize?

Data_Customer Profile
Checkout Behavior
​

On a business level, creating conversion rate will lead to real profit. Therefore, the team decided to start with the checkout process.

Pain Points

​

The data shows that even if customers confirm the product and enter the checkout process, there is still a 38% Abandonment Rate before filling out the payment details, and only a Conversion Rate of nearly 30%  is finally reached.

Carts

Checkout_Old01

  • Customers check out in batches by supplier.

​

  • Since suppliers ship separately, different shipping charges and free shipping eligibility arise, resulting in excessive shipping cost for customers.

Confirm Products

Checkout_Old02

  • Unexpected charges appear on the page.

​

  • CTA “Back”: Data reveals that a portion of customers choose to return to the previous page.

​

  • Recently Viewed Items: Potential opportunity to increase Abandonment Rate.

Payment details

Checkout_Old03

  • CTA “Back”: Data reveals that a portion of customers choose to return to the previous page.

  • Lengthy checkout process: From the shopping carts to confirmation, customers have to pass through a total of 4 page processes, and each page has different tasks to be processed.

Checkout_Old04

Confirmation

The Strategies

​

In response to the pain points, the team planed the new checkout mechanism.

Checkout_01

Carts

  • Reduce batch checkouts: Differentiate carts by different delivery shipping methods, and customers check out in batches by cart, not by supplier.

​

  • Lighten shipping charges: Unify the shipping charges and free shipping eligibility for different cars separately.

​

  • Transparent Fees and Pricing: The full pricing details are displayed on all checkout pages.

Checkout_02

Payment details

  • Eliminate influencers which increase Abandonment Rates during the checkout process.

​

  • Reduce complications on payment: Eliminate or hide any unnecessary form fields, optimize the design of form fields.

Checkout_03

Confirmation

  • Simplify the checkout process: Complete the order in 3-steps.

Orders History
​

Order history is the service that customers contact most often after completing an order.

Creating high-quality after-sales service is one of the key factors in improving return on repeat customers.

Information Sorting

Information Sorting

​

Based on whether the supplier has shipped or not, the 2 scenarios of forward logistics and reverse logistics are distinguished.​ With different situations, suppliers, TVBS back-end admin, and the system will trigger the corresponding the status of logistics and cash flow respectively.

Order History

Design Outcome

​

According to the documentation, I organized the information that customers need to know most in the front-end interface. Concisely presenting the key information of an order is the service I expect to bring to customers.

MVP

​

  • Sort by date, and display multiple orders on one page.

​

  • View the order details without going to the next pages.

​

  • Brief the status of logistics and cash flow, and give progress description.

​

  • Provide logistics tracking service.

Optimization

 

  • Feature of oder search

​

  • Planning the CTA of “buy it again”

Forward logistics

Forward logistics

Order Cancellation

Order Cancellation

Reverse logistics

Reverse logistics
Menu Classification

The team wanted to know how customers successfully find products that meet their expectations on the platform. Therefore, we investigated the data, and found that in terms of looking for products, except 0.61% of customers who use the “Search” feature, only 5% of customers choose to use “Menu”.

Menu Data

The data displays that most of customers reach product pages by channel of social Ads, and achieve the majority of Goal Completions. However, It is worth noting that using “Menu” to find products and add them to shopping carts occupies a higher Conversion Rate.

 

The team found the potential for “Menu” to be refined. We hope that customers are able to find products accurately through clear guidance, and enhance the interaction between customers and the platform.

Menu_Old

Pain Points

​

There are thousands of products on online store, but Menu contains only 2 levels of categories: main category, sub-category.

​

  • Under the few numbers of main categories masses huge numbers of sub-categories.

​

  • Sub-category is “Brands”, but “Brands” has difficulty conveying product characteristics, causing brand power is the key for customers to find products.

​

  • If brand power is not strong, the customer looking for the product is like looking for a needle in a haystack.

The Strategies

​

The team hopes to better categorize product for management, and expects that customers seek products more efficiently, therefore, the team drew up a strategy.

​

  • The Menu structure is divided into 3 levels: main category, sub-category, sub-sub-category, ex: Snack > Candy > Jelly drops

​

  • Use “Brands” as "Attribute" to additionally describe the product and designed as the feature of filter on the interface.

Design System
Design System
What is Next
​

In 2022, the brand new Super-Taste e-shop is coming soon.

Team members are quite looking forward to the results brought by the optimization of features and checkout mechanisms.

 

Even though the team will carry on quantitative analysis, we found that the information provided by data has certain limitations. Therefore, in future plans, we look forward to incorporating qualitative investigations to make the analysis of pain points more comprehensive, and continue to bring customers a good online shopping experience.

bottom of page