How We Streamlined Taobao’s Marketing Venues: A Design Overhaul for 2025
The article details a three‑phase redesign of Taobao’s marketing venues—convergence to simplify content, unification to ensure consistent experience, and efficiency to accelerate iteration—covering design principles, componentization, navigation overhaul, dynamic headers, and visual diversity that together improve user comprehension and conversion during major sales events.
Background
Marketing venues (e.g., Double 11, 618) are built from reusable modules. Over time, device upgrades and changing user habits made many legacy modules unreadable, dense, and poorly hierarchical.
Three‑stage optimization
1. Convergence – content reduction
Remove non‑essential text and decorative visuals that interfere with product information. Strictly limit information density and discard “write‑it‑even‑if‑it‑does‑not‑matter” content. The change yielded clearer product communication and a higher content‑to‑screen‑space ratio in the 618 and Double 12 events.
2. Unification – component system
Consolidate thousands of historical modules into roughly 150 reusable components (module titles, tags, product‑field layouts, header variants). Define typography, grid, and sizing standards. Publish the component library online; any update to a component propagates instantly to all designers and developers.
3. Efficiency – rapid iteration
Encapsulate components in code so developers can import them without redesign or duplicate implementation. Maintain an online component repository; new components or states are added once and become available globally.
npm install @internal/marketing-componentsKey design principles
Content reduction & noise control : limit information density.
Information hierarchy & structural flexibility : clear primary‑secondary relationships; allow layout adjustments for complex scenarios.
Component‑based visual system : unified typography, grid, sizing; reusable component states.
Navigation simplification : replace dual top‑bottom navigation with a single top bar, freeing space for product promotion.
Dynamic header heights : high/low header variants adapt to content, balancing efficiency and branding.
Balanced efficiency and atmosphere : dynamic headers convey benefits while preserving visual appeal.
Visual diversity : multiple header styles (rights, live, countdown, interactive) for different user segments and time windows.
Componentization details
Standardized modules include:
Module title and tag styles.
Product field layout (image, price, badge).
Header variants with dynamic height.
Components are defined in design specifications and implemented as code modules (e.g., React or Vue components). The internal repository is versioned; consuming projects import the package via the command shown above.
Maintenance workflow
Components are frozen after release. New use‑cases trigger addition of new component states. The online library serves as a single source of truth, ensuring that any update is reflected across all active venues.
Impact
After applying the three‑stage process, distinct modules dropped from several thousand to ~150, consistency improved, and iteration cycles shortened. Early metrics from the 618 and Double 12 events showed a measurable increase in content‑to‑screen‑space ratio and reduced user cognitive load.
Future direction
Continue to enrich visual expressions (e.g., dynamic headers, interactive sections) while adhering to the disciplined component framework.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.