TikTok Shop

Content-Recommendation Shopping Path Redesign (EU/US)

ToC

ToC

ToC

App Design

App Design

App Design

Project Type

B2B Product Version Iteration

Company

SHOPLINE in JOYY Inc

Role

UX Designer

Industry

Cross-Border E-commerce

Tools

Figma, Jira, Notion, Zoom

Timeline

2024.06 - 2024.09 (3 months)

Project Type

Project Type

TikTok Shop Writing Test

TikTok Shop Writing Test

My Role

My Role

UX Designers

UX Designers

Industry

Industry

E-commerce

E Commerce

Tools

Tools

Figma, Zoom

Figma, Zoom

Timeline

Timeline

Oct 14–21, 2025(7 days)

Oct 14–21, 2025(7 days)

Business Validation

Business Validation

Increase GMV in short-video-driven scenario

Increase GMV in short-video-driven scenario

TikTok Shop is TikTok’s built-in e-commerce system that lets users browse and buy products directly while watching content. It connects creators, merchants, and consumers through a content-driven ‘interest commerce’ model that turns discovery into purchase.

TikTok Shop is TikTok’s built-in e-commerce system that lets users browse and buy products directly while watching content. It connects creators, merchants, and consumers through a content-driven ‘interest commerce’ model that turns discovery into purchase.

Overview

Design a shopping path for the content recommendation scenario in European and American markets

This test focuses on interest-based e-commerce. I aim to analyze the conversion path from the user’s perspective, identify key experience barriers in the shift from emotional engagement to purchase, and design an optimized shopping path to improve the overall experience.

To address these issues, I reviewed TikTok Shop’s current funnel (Acquisition, Consideration, and Checkout), ran user tests, and analyzed competitors. I then redesigned key parts of the shopping path — including ‘Find Similar,’ the product page’s first-screen information architecture and the reviews section.

Business Validation

Increase GMV in short-video-driven scenario

I run A/B tests to track key metrics across the Acquisition, Consideration, and Checkout stages, assessing whether the new design improves user trust, clarity, and purchase confidence — ultimately enhancing conversion efficiency from short videos to payment and increasing GMV in short-video–driven scenarios.

10%

CTR from short videos → PDP

10%

PDP conversion rate


5%

Average Order Value (AOV)

GMV = Traffic × Conversion Rate × Average Order Value

Methodology

AIDA Marketing Model & Conversion Funnel Analysis

I applied the AIDA marketing model and mapped it to TikTok Shop’s Acquisition, Consideration, and Checkout funnels to identify where design improvements could most effectively drive conversion.

Problem 01

Users can’t get clear and reliable information to decide which product to buy

In the acquisition stage, the biggest problem is information recognition. Users have already shown interest in a certain product and used the “Find Similar” feature to search, but they can’t find clear and reliable information to determine which product they should buy with confidence.

Before

Solution 01

Highlighting trust and results to simplify decision-making

By introducing a lightweight quick filter based on user mental models and displaying a set of trustworthy indicators, users can quickly identify which product they could buy. This reduces cognitive load and encourages confident click-throughs to product detail pages.

Before

After

Why Important?

In interest-based e-commerce, where decisions are emotion-driven and instant, the lack of trust signals or guidance often leads to drop-offs and purchase abandonment.

Problem 02

Users can’t quickly access the key information they need in the review section

In the consideration stage, the main issue is the review section. Users can’t quickly get the key information they need, often feeling the reviews are inauthentic and hard to filter. Since reviews are crucial for their decisions, the design must make this information easier to find and trust.

Before

Solution 02

Enhancing review clarity and credibility for confident decisions

Redesigned the review layout to enhance credibility, readability, and engagement. Introduced verified-buyer indicators, selectable keyword tags, and a highlight feature to help users quickly access trustworthy information and reduce potential drop-offs.

Before

After

For the Highlight feature, I explored two options: AI-generated summaries for quick sentiment understanding, and featured photo/video reviews that surface top visual content with short autoplay to boost engagement.

Option 1

Option 2

Based on my ICE Scoring calculation (ICE = (Impact × Confidence) / Effort), I recommend prioritizing Option 1 (AI Summary) for testing, as it more effectively addresses the core issues of trust and information recognition with higher impact, greater confidence, and relatively lower implementation cost.

Problem 03

“‘Also Ships Free’ section lacks appeal for users.”

At checkout, the ‘Also Ships Free’ section offers little decision value. It focuses on free shipping rather than suggesting items that are useful or compatible with what users are buying. Since the carousel shows random, unrelated products, it feels generic and promotional, lowering trust instead of driving cross-sell.

Before

Solution 03

From generic ‘Also Ships Free’ to contextual checkout cross-sell to boost AOV

Replaced the generic ‘Also ships free’ carousel with a contextual Frequently Bought Together module tied to the specific item being purchased. The scenario-based copy makes recommendations feel more relevant and helpful at checkout, boosting cross-sell potential and average order value.

Before

After

Other Highlight

Optimizing First-Screen information hierarchy for clarity and trust

Reconstructed the first-screen information architecture based on usability testing insights to minimize visual noise, clarify information priority, and enhance users’ perception of the key signals they care about.

Before

After