How ICBC Built an Enterprise‑Level Frontend Component Library to Accelerate Banking Innovation

Introduction

With the rapid growth of internet finance, users are increasingly adopting mobile banking, online banking, and mini‑programs, replacing physical branches and raising expectations for product experience. To keep pace, ICBC has accelerated digital transformation, migrating traditional services to self‑service channels and emphasizing user‑experience‑driven product development.

ICBC’s Enterprise Frontend Component Library "YanJi"

Since 2017, ICBC’s Software Development Center has built an enterprise‑level frontend component library and management platform named “YanJi,” integrated into the ECOS Smart Banking strategy. The library, based on ICBC’s product design standards and modern frontend technologies, provides highly reusable, standardized, and collaborative design and technical components covering mobile, PC, and smart‑terminal channels.

Exploration and Achievements

The library enables rapid reuse of design and technical modules, allowing developers to create high‑quality front‑end pages at low cost. It supports most functional UI flows across the bank, promoting consistent user experience and efficient product iteration.

ICBC also developed a suite of tools—including design component management, automatic page code generation, UI compliance checking, and programmatic UI testing—to integrate design and development, reduce communication overhead, and achieve seamless collaboration.

Key Benefits

Collaboration: The component library bridges design and development across branches and subsidiaries, enabling drag‑and‑drop page creation and rapid prototyping for new product marketing.

Efficiency: Component‑based, standardized front‑end styles can be flexibly and quickly applied, lowering development costs and supporting rapid product updates.

Quality: Reusing components enforces design standards and user‑experience principles, delivering consistent, high‑quality interfaces across diverse financial scenarios.

Standardization: The library enforces enterprise‑wide UI design standards, facilitating uniform and regulated product development for both internal and partner applications.

Sustainable Planning

Building on existing design assets, ICBC continues to refine the component library for mobile, PC, and smart‑terminal channels, establishing a three‑in‑one model of component library, management platform, and process mechanisms. Future work includes advancing frontend technologies, enhancing standards, expanding toolsets, and opening the library to ecosystem partners.

Through this component‑driven approach, ICBC aims to support its “extreme experience” strategy, continuously improving product quality, development efficiency, and user satisfaction.