How Intelligent UI Boosted Tmall’s Double‑11 Sales: A Front‑End AI Playbook

Background

With the rise of mobile internet and recommendation systems, precise matching of users and products has dramatically improved efficiency for Taobao e‑commerce, but traffic growth has plateaued, prompting the adoption of fine‑grained personalization techniques such as scenario‑based recommendation and targeted audience strategies. Rich product information and larger phone screens create new UI challenges, making it hard to surface the right information to users.

What Is Intelligent UI

Intelligent UI encompasses AI‑generated, personalized, and adaptable interfaces. In Taobao’s context, it refers to AI‑driven, per‑user UI variations. Early AB tests proved that different UI schemes perform differently across scenarios, leading to the first intelligent UI trial on Tmall’s “Industry Guess You Like” module, where two UI versions were served based on user‑level preferences derived from log analysis.

Double‑11 Application

To scale intelligent UI for the Double‑11 event, the team focused on increasing UI supply efficiency and business impact. Key actions include:

Standardizing a UI digitization protocol to reduce communication overhead among front‑end, design, algorithm, and back‑end teams.

Adopting a multi‑material integrated development approach to expand UI variant supply.

Building UI recommendation algorithms that combine server‑side models with client‑side behavior features.

Establishing a data‑center for visualizing UI scheme performance.

UI Digitization Protocol

Design data, traditionally hard to structure, is now modeled using the GDM (Graphic Design Model) which captures grid, layout, and style information for e‑commerce modules. The model defines blocks such as cover, title, selling points, marketing activities, and price, each with a unique code and associated material elements.

Using GDM, module designs are structured, enabling end‑to‑end data flow from production to analysis. Example block definitions:

<code>[
  {"name":"Cover","code":"A","children":["1","2","3"]},
  {"name":"Title","code":"B","children":["1","2"]},
  {"name":"Selling Point","code":"C","children":["1","2","3","4","5","6","7","8"]},
  {"name":"Marketing","code":"D","children":["1","2","3"]},
  {"name":"Price","code":"E","children":["1"]}
]
</code>

Multi‑Material Integrated Development

Front‑end developers produce fine‑grained material components that are assembled by an SDK. Small, reusable materials are generated in bulk using imgcook, which parses visual drafts into UI components. This pipeline dramatically speeds up front‑end production for Double‑11.

Self‑Built Algorithm (Cloud + Client)

The team built a custom recommendation algorithm that incorporates real‑time client behavior (clicks, scroll depth, dwell time) and UI attributes, allowing the model to understand UI differences and make more stable recommendations, especially under low‑traffic conditions.

Data Center Construction

Intelligent UI generates two data types: production element data and scheme performance data. The data center aggregates these for a closed‑loop from design to runtime analysis. Production data is collected during scheme generation, while performance data is logged during live traffic and visualized via DataWorks.

Landing Results

During Double‑11 2020, intelligent UI was deployed across over 300 venues, covering modules such as “Guess You Like”, product, and shop sections. The approach handled peak traffic and delivered up to a 10%+ increase in page‑view click‑through rates, establishing intelligent UI as a core capability for fine‑grained traffic operation.

Future Outlook

Recommendation Algorithm

To further improve accuracy, the team plans to incorporate image‑recognition‑derived UI features, enabling deeper UI understanding and user preference modeling, focusing on UI digitization, attention analysis, effective expression, and preference segmentation.

Intelligent Generation

The vision is a closed loop where designers create visual drafts, AI converts them into component material, operations assemble schemes, algorithms recommend optimal UI, the SDK renders them, and data feeds back to refine designs. This involves extracting design rules into machine‑readable formats and training deep‑learning models to generate personalized UI at scale.