DBS Design Language System
The System for Creating Unified Design and Banking Experiences
2017-2019
At DBS, the UX design team collaborates on digital products across Asian markets and various channels, requiring extensive design and development efforts. When products are developed by different teams, it's crucial to establish a standardized process that supports the entire journey from design to product release.
Background
Upon joining the team, I found existing UI components in a Sketch file. My initial task involved designing guideline templates, consolidating content, and publishing them on our live web pages. This marked the inception of our design standards, offering essential design guidance to the team.
Challenges Encountered
As Asia's leading digital bank, DBS is offering a plethora of digital services online, aimed at enabling customers to "Live more, Bank less." However, with numerous products and services requiring design, engineers from various teams continually wrote new code to support these offerings. Prior to establishing the Design Language System (DLS), the Sketch library was underutilized across many of our products.
“Insufficient resource, tight schedule and poor product quality & UX”
Continuously designing similar features using different components and patterns resulted in redundant development efforts, leading to significant inconsistencies across our services. Without a robust systematic design process, we grappled with challenges such as inadequate resources, tight schedules, and compromised product quality and UX.
Challenge: Diverse Design Processes Across Teams
The DBS design team has expanded significantly, growing from just two designers to over 80 (now 100+) within five years. Despite comprising top-tier product designers from more than 10 countries worldwide, each individual brings their unique approaches and principles to the table.
As the team continues to grow, it becomes imperative to enhance our design workflow to scale alongside our increasing maturity.
Goal: Streamlining Design Efforts for Enhanced Quality
Our primary objective is to simplify and enhance the design process, allowing designers to save time and effort. By implementing a robust design system, our team can shift focus towards conceptualizing and delivering superior user journeys, rather than repeatedly creating product UI from scratch.
Analogous to building with Lego bricks, utilizing a design system enables rapid prototyping and visualization of creative ideas. This approach facilitates efficient iteration and empowers designers to bring their visions to life swiftly and seamlessly.
Getting Started with the Design System Implementation
In 2018, my colleagues and I, as part of the DLS team, embarked on creating a multitude of components and patterns. Collaboratively, we defined interaction patterns and authored guidelines. On a daily basis, we provided extensive support to numerous product teams, conducting reviews, facilitating discussions, and ensuring the correct utilization of components and patterns in designs. Whenever the need arose for new components or patterns, we promptly addressed them.
However, with just two designers in the DLS team, my teammate and I found ourselves inundated with meetings daily. We had to delve into the specifics of each product to review UI designs, guide product designers in selecting and implementing components, and establish patterns for their products.
Given our limited time and the multitude of projects, participating in numerous project review meetings proved to be inefficient. Often, decisions made for one team were challenging to scale across others, highlighting the need for a more streamlined and scalable approach.
Our design system is tailored to meet the unique requirements of the DBS organization
In this new iteration, we elevate the entire system to a higher standard. Beyond offering a basic component library and guidelines, we streamline the workflow from design to real code implementation.
My role involves analyzing Information Architecture (IA), defining high-level Masterflows, designing patterns, and establishing interaction guidelines. Additionally, I formalize the entire design process, enabling us to monitor and maintain design quality across all projects consistently.
Design principles
By creating the good design principles, we hope to have it helping us to make meaningful design decisions. Apart from creation, helping designers to apply and use design principles is the key.
Masterflow
The 'template' to help visualise and create the standard of our high-level flows for our Core Experience channels.
Design Library
The library is created as a live website and shared company-wide. It encompasses component and pattern libraries for both applications and web platforms, all of which are integrated into our code base. Additionally, the library includes comprehensive guidelines for design and content, serving as a valuable resource for both designers and developers.
Design critiques
This process governs and implements the system across the team. Designers can reserve slots in advance, preparing necessary background information and design files, and involving required stakeholders (project managers and researchers). The DLS team facilitates the session to ensure quality feedback is obtained. We analyze designs and provide feedback on whether they meet their objectives and are aligned.
DLS office hour
Each week, we gather all questions from Slack, consolidate them, and bring them to our office hour sessions to discuss with designers. During these sessions, we collectively review specific components or patterns, examine their use cases, and clarify or define principles as needed. If necessary, we make improvements to the components or patterns and integrate them into our codebase, updating the documentation accordingly.
Learning session
Running once a month. It’s the opportunity for educating and onboarding the team with new tool/ better design practices.
“Design system allows the team to design and develop the consistent design with great product quality”
By establishing and implementing this process, the DLS team is not solely responsible for creating and deciding UI components. Every designer can contribute to the design system by actively participating in discussions and providing feedback. Thus, the design library used by everyone is determined collectively as a team. Designers can readily receive feedback and support to deliver high-quality designs, fostering a collaborative environment where learning and growth are encouraged.
This process was successfully employed in the design and implementation of DBS/POSB digibank and iWealth, both of which were launched successfully between 2019 and 2020.
Maintenance and Evolution
As we continuously design, discuss, and build, we learn and iterate on the design system. The design system isn't solely managed by a small DLS team; rather, it evolves collectively across the entire team. By embracing this system, we foster collaboration among team members, resulting in more robust design solutions.
> Also see my DBS/POSB Digibank SG, or see my next work: JOOX Music