How Scenario‑Driven Design Revamps Baidu Search’s Design System

Preface

As the industry evolves, more companies adopt design systems. Building a mature system requires three modules: production, consumption, and monitoring. This article shares Baidu Search’s recent upgrades for production and consumption, focusing on scenario‑based asset reconstruction to establish order, improve internal consistency, and enhance the consumption experience.

Project Background

In the early mobile era, Baidu Search divided teams by verticals, deeply cultivating vertical features to meet fine‑grained content consumption needs. The design assets exhibited three main issues:

Components were tightly bound to business and maintained independently.

Frequent business innovation led to many new component styles with few merges.

The design system’s internal logic was weak, mainly providing quick encapsulation of business components.

This “style‑summarization” approach allowed rapid early development but, as businesses matured and cross‑team collaboration increased, it revealed shortcomings: insufficient asset universality, redundant and bulky assets, and a lack of logical constraints, resulting in an inconsistent and hard‑to‑maintain design system.

Project Plan

The plan defines three core goals:

Complete design assets with clear specifications and robust component variants.

Provide an efficient consumption experience with rich pathways and short routes.

Establish a healthy iteration model that synchronizes the middle platform with business, allowing component optimizations to flow back into the asset pool.

To achieve these goals, the redesign is divided into three stages:

Unify

Solidify the foundation by reconstructing the underlying asset logic, clarifying applicable scenarios, and improving extensibility and maintainability.

Engineer

Integrate asset code to boost consumption efficiency and create a virtuous loop between the design middle platform and business.

Tool

Explore tool‑based solutions, including AI large‑model opportunities, to enrich consumption pathways and enhance efficiency across delivery stages.

Design Actions

The core method involves three steps using a Tab component example:

Identify the basic behavior scenario : The Tab component’s essence is to help users switch content.

Derive variants : Analyze dimensions such as object, space, and time, then optimize the experience from interaction, cognition, and emotion perspectives.

Establish order : Map each variant to its applicable scenario, providing clear guidance for designers and developers.

This systematic approach yields clear asset boundaries, reduces redundancy, and aligns components with user‑centered scenarios.

Aligning Consumption Scenarios

Three practical steps improve asset usability:

Flatten asset hierarchy by grouping components at a finer granularity and creating a navigable catalog.

Standardize documentation structure to reduce cognitive load and present component variants uniformly.

Contextualize documentation with suggested usage scenarios for each variant.

Project Results

After the first half of 2024, the redesign delivered:

Clear asset boundaries and low redundancy.

Unified internal logic, making the system maintainable, extensible, and easy to plan.

Increased determinism, reducing the impact of dynamic business changes.

Consistent product experience, lowering user cost.

Optimized consumption pathways also improved developer understanding, matching asset generation with consumption, streamlining component variants, and enhancing overall satisfaction with the design system.

Practice Summary

The scenario‑driven method abstracts scenario features to bridge design assets with business contexts. Asset creators extract scenario characteristics to match business needs, while asset consumers reverse‑map business scenarios to identify gaps and refine assets. This approach applies to both system‑level components and everyday business innovations.

Future Outlook

Two ongoing challenges remain:

Keeping the design middle platform and business in sync, as business designers often need custom assets that diverge from the shared system.

Improving the asset consumption path, which currently requires switching between documentation, Sketch UI kits, and design drafts.

Addressing these requires establishing extensible design tokens between the middle platform and business, and providing a tool platform that links design and development assets, enhancing collaboration efficiency.