Building the foundation of the Wealth Management Design System
Wealth Management had a fragmented digital ecosystem, with varying user interfaces across internal tools. This led to an inconsistent brand experience and inefficient development time when building new features. To address these challenges, the design team initiated to build a Design System to standardise the design language and streamline development workflows.
Project Details
Scope
Project Management, UX Strategy, Design System, Technical collaboration, Leadership
Timeline
Nov 2021 - Jun 2024
Teammates
Khai Liang, Raelene, Ming Rui, Yélenn, Rachel
Background
Previous attempts at building a design system had been incomplete, the absence of proper documentation meant that designers applied their own styles when designing applications, resulting in inconsistencies across the bank’s digital ecosystem.
As the lead designer for this project, I was responsible for setting the strategic direction, allocating component design tasks to team members, conducting weekly reviews, and documenting components into a cohesive repository. Additionally, I managed an intern who contributed to the React component development.
Project Goal
The goal of this design system was to create a standardised set of components that developers could easily implement, reducing the time spent on building custom UI elements. Additionally, it aimed to improve design efficiency by providing a structured framework that ensured consistency across applications.
Key Results
Centralised documentation for teams
Established a knowledge base in SharePoint, documenting all use cases and corresponding React code.
Component Coverage
100% of the design system components are built in React and available for use.
Adoption & Usage
Successfully onboarded 3+ projects, with 100% of designers using the design system for new application designs.
Challenges we faced
One of the biggest challenges was the lack of management support and dedicated resources for the project. Securing developer involvement required budget allocations, which were not readily available. Developers were also working on multiple projects, leaving them with little time to contribute to the design system.
Additionally, different project teams were using their own codebases when building applications, leading to longer development times and inconsistencies. As designers, we strongly advocated for a unified system to reduce development efforts and maintain consistency across applications.
Despite these challenges, we decided to build the foundation of the design system without dedicated resources. After several rounds of internal advocacy, we secured approval to hire an intern who assisted in coding the React components.
Building the Design System
We conducted an audit of the different components used across the bank's applications. This helped us identify inconsistencies and redundant UI elements that needed standardisation.
In parallel, we researched existing design systems from leading companies, analysed their processes, documentation structures, and implementation strategies. By breaking down how these design systems were built, we gained insights into best practices that could be adapted to our needs.
This research helped us establish a clear roadmap for building a scalable, maintainable design system tailored to the bank's ecosystem.
Laying out the foundation
To establish a strong foundation for the design system, we defined the core design elements that would ensure consistency across all applications. This included setting a scalable typography hierarchy, establishing a cohesive color palette, and creating standardised spacing and layout guidelines to maintain uniformity in design. We also developed a unified set of icons and essential UI components like buttons, inputs, and cards, ensuring consistent styling and behavior.
We also made sure to align with the bank’s Brand & Communications guidelines to ensure our design choices were in line with the broader brand identity. Additionally, we integrated design tokens to streamline implementation and allow for more efficient updates, making the system easier to maintain and adapt as needed.
Design system foundations
Building the components
After establishing the foundational elements of the design system, we focused on consolidating the essential UI components needed for building the bank’s applications. These included buttons, form fields, navigation elements, and other critical design patterns.
I then allocated specific components to different designers, ensuring that the workload was distributed effectively. To maintain consistency and ensure progress, we held weekly reviews to track the status of each component, discuss any challenges, and ensure that everything aligned with the established design guidelines.
Components symbols in Sketch
Documenting the Design System
To ensure clarity and accessibility, I created a structured documentation framework for the team. This included guidelines on how to present content, organise resources, and standardise the documentation layout, making it easier for designers and developers to adopt and reference the system efficiently.
Guidelines and resources for documentation
Outcomes & next steps
The design system has been implemented in several new projects as a pilot to measure its impact on efficiency. A structured knowledge base in SharePoint has been established, documenting use cases and corresponding React code. So far, over three projects have successfully onboarded, and all designers now use the system for new application designs.
The team will continue to push for greater adoption and dedicated resources to further develop and maintain the design system. The goal is to fully integrate it into all Wealth Management applications, ensuring long-term consistency, efficiency, and scalability.
View more case studies
Global PRIVATE FRENCH BANK
Let's connect! Feel free to reach out.
© 2025 Tan Jing Li
1.0