How a Low‑Code Pop‑Up Editor Transformed Taobao’s User‑Growth Platform

Preface

When I joined the Taobao technical user‑growth team, pop‑up windows were a key off‑site reach tool, requiring a systematic solution to improve development efficiency, expand usage scenarios, and increase AAC contribution. We defined a "global POP placement platform" architecture consisting of a pop‑up editor producing JSON‑based description data and an H5/mini‑program rendering engine.

Problems Faced

The existing PopLayer platform suffered from poor extensibility due to legacy code, sub‑optimal user experience, massive historical data that was not well organized, and an architecture that did not fully exploit the "description data" concept.

We identified four urgent issues:

Platform is hard to extend.

User experience is poor.

Data is not well aggregated.

Existing architecture does not fully utilize the description‑data approach.

Business Thinking

Beyond solving immediate problems, we needed to consider the "problem behind the problem" to achieve a bird’s‑eye view of priorities. Using the analogy of a flyer, a pop‑up is an interactive control that guides user behavior with low‑cost, attractive content.

What Was Done and How

We prioritized improving platform extensibility, then usability, and finally added features iteratively.

Scalability Construction

We rebuilt the platform from scratch, designing a clean, extensible DSL that captures all pop‑up semantics. The DSL consists of seven modules: basic info, components (image, text, countdown, hotspot, container, iframe, video, state, close button), style, request, behavior, animation, and other functions.

Key design principles:

Apply Occam’s razor to keep fields minimal.

Ensure high cohesion and low coupling between modules.

Design tightly around the domain while allowing future extensions without structural changes.

Example behavior module fields:

{
  "type": "click",
  "behavior": "goto",
  "target": "app",
  "content": "https://www.taobao.com"
}

Usability Construction

We built xEditor, a low‑code/no‑code visual editor that outputs DSL data. The UI follows an Axure‑style drag‑and‑configure paradigm, supporting both simple and complex pop‑ups. Features include:

Component library with nine component types.

Data mock functionality for front‑end/back‑end separation.

Composite condition logic for dynamic content.

Animation module for simple, consistent, flexible effects.

Images illustrate the editor UI and component panels.

Feature Construction

We added capabilities to improve exposure, click‑through, and landing‑page arrival rates:

H5 native rendering engine (xRender) built with pure JavaScript for fast rendering (10‑30 ms).

Native lightweight rendering engine that boosts exposure by 26 pt and PV by 43 pt during Double 11.

Animation module that increased click‑through by 3.6 pp for a shopping‑cart reminder.

Pre‑load of landing pages (POP pre‑load) that raised page arrival rate by 12.58 pt and reduced visual load time by 1.76 s.

Stability Construction

We enhanced test coverage, integrated JSTracker, added pre‑release warnings for invalid URLs, monitored image load failures to prevent exposure, and exposed global fatigue settings before publishing to avoid misconfiguration.

Results, Shortcomings, and Future Plans

Since the 4.0 release in August 2021, PopLayer has supported 46 internal/external pop‑up activities, saved at least 92 person‑days, and experienced no online failures. Major achievements include:

System upgrade from 3.0 to 4.0 with a robust DSL and xEditor.

Production efficiency: simple pop‑ups built in under one minute, saving >2 person‑days per pop‑up.

Full‑scene coverage across internal and external channels.

Precise targeting via intelligent algorithm SDK.

Performance gains from H5 and native engines.

Rich content through animation and scene‑aware modules.

Remaining challenges:

Increasing native engine version coverage to reach >95 % of users.

Deepening the correlation study between animation and click‑through rates.

Expanding the editor to cover more complex interaction scenarios.

Building a comprehensive data system for pop‑up distribution, type, and performance analytics, and a streamlined A/B testing pipeline.

Conclusion

This article shares the technical and product insights gained from a year‑plus effort on the PopLayer platform, offering lessons on DSL design, low‑code editor construction, modular architecture, and data‑driven optimization.

Team Introduction

We are the Taobao technical front‑end user‑growth team, responsible for attracting, retaining, and converting users across Taobao’s app ecosystem, building growth platforms, intelligent data‑driven engines, and supporting the group’s multi‑app matrix.