A scalable system for Douyin's promotion and advertising products.

Ads design system hero

Role

Design Owner

Impacts

Scaled a local advertising solution used by millions of SMBs, used by 9 platforms, increasing store visibility and driving measurable growth in local traffic and conversions.

Time

2022–2023

Context

Design system Process

Douyin's advertising products were expanding across creator promotion, local business growth, and campaign tools.

As product surfaces grew, teams needed a design foundation that could keep experiences consistent without slowing down iteration.
Design system process

The Gap

The system existed, but the product experience still felt uneven.

Base components were reusable, but complex advertising scenarios needed stronger rules for layout, states, hierarchy, and product modules.

Design Challenge

Making the system more scalable, practical, and product-ready.

The goal was to move beyond reusable UI components and build a design foundation that could support real advertising workflows, faster team collaboration, and more consistent product quality.
Design challenge framework

Background

Cleaner page layers for complex advertising interfaces.

Loading

Clearer feedback for waiting, processing, and empty states.

Ad loading animation
Local loading animation
Ocean loading animation
Yuntu loading animation
Loading states

Color

More consistent use of hierarchy, status, alerts, and action guidance.

Icon

More consistent icon usage for meaning and recognition.