Transforming Baidu’s Financial Search: A Unified Design System Boosts Trust and Efficiency

Preface

As investors become younger and more diverse, stock‑related products are evolving from pure transaction tools into comprehensive services that combine data insight, strategy support, and emotional connection. To meet the expectations of a more rational and autonomous user base, platforms must deliver clear, trustworthy information, smooth interactions, and a consistent design language that reinforces professionalism and user affinity.

1. Systematically Review Experience and Define Optimization Directions

The design team started with Baidu Search’s PC financial results page, examining structure and interaction flow to identify four core problems:

Massive financial information with loose page structure and vague granularity, leading to low retrieval efficiency.

High content density and monotonous rhythm causing reading fatigue and low engagement.

Lack of logical connections between modules, creating information islands.

Outdated visual style, unclear hierarchy, and insufficient emphasis on key data, weakening the platform’s professional and authoritative perception.

2. Define Strategy Direction and Build Systematic Experience Upgrade

Three optimization dimensions were pursued:

Improve information efficiency : create a clear, ordered content framework.

Strengthen data aggregation : build a hierarchical structure for presentation.

Enhance visual highlights : develop an immersive, professional visual expression system.

2.1 Reconstruct Content Framework for Better Reading Efficiency

Leveraging the large‑screen PC environment, the single‑column flow was upgraded to a full‑screen layout with a high‑aggregation information dashboard. Core data (name, code, market, price, change, exchange rate) were reorganized and displayed prominently on the first screen, enabling users to make quick judgments.

2.2 Introduce Bento Design for High‑Aggregation Browsing

Given the dense, logical nature of stock data, the team adopted a Bento (bento‑box) layout, grouping related information into modular sections. This approach clarifies structure, improves visual hierarchy, and helps users quickly capture key points.

Information Structuring

Using the Baidu Stock PC results page as an example, market data, company info, and charts were reorganized into cohesive modules, enhancing data recognition and overall browsing fluidity.

Lightweight Interaction

After aggregation, core information is displayed by default for rapid scanning. Hover interactions on PC allow module expansion, satisfying deeper browsing needs and improving interaction efficiency.

2.3 Upgrade Visual Language to Strengthen Professional Perception

The redesign reduces visual noise, emphasizes key data, and optimizes reading rhythm, creating a cleaner, more immersive data scene. Color adjustments make the palette more subdued, enhancing trust.

Trend charts were redesigned with a three‑color scheme (red, gray, green) and bidirectional gradients, allowing users to quickly discern market direction.

Fluent Reading Experience

Further refinements include:

Font and line‑spacing adjustments for better hierarchy and readability.

Color rhythm control: muted colors and whitespace in non‑key areas to focus attention.

Dynamic micro‑interactions (e.g., chart loading transitions, hover highlights) to guide information hierarchy.

3. Build a Professional‑Trust Financial Ecosystem – Baidu Stock App System Optimization

After the redesign, core metrics such as page dwell time, clicks, and views increased significantly. The successful PC results page redesign was extended to the Baidu Stock website, focusing on content efficiency and responsive adaptation.

3.1 Structural Reconstruction

The previous gray‑card layout was outdated and fixed‑width, limiting large‑screen usage. A full‑width immersive layout was adopted to free space and improve information acquisition.

3.2 Overview Page Aggregation

A new overview page provides a one‑stop data dashboard, allowing users to grasp a stock’s core information on a single page, shifting from “scattered acquisition” to “centralized insight”.

3.3 Responsive Design

A unified responsive strategy based on a grid system enables one‑design‑many‑devices adaptation. Five layout modes (stretch, proportional scaling, expansion, fixed, column split) cover 80‑90% of pages. Examples include tablet and wide‑screen adaptations, where content density and module arrangement are dynamically adjusted.

Summary and Outlook

The updated financial results page and Baidu Stock website launched simultaneously, delivering notable improvements in dwell time, click‑through, and view metrics. Users praised the enhanced professional perception and information efficiency, shifting behavior from merely “checking prices” to “understanding structure” and actively exploring multidimensional stock data. The case provides a replicable practice for organizing information and designing experiences in complex data scenarios, and the team will continue iterating design language and interaction details to further strengthen clear, trustworthy financial services.