D&B Design System
Overview
D&B wanted to create a modern “Gold Standard” design system that will be used across our product landscape to deliver a consistent experience for our customers.
Why did we need a Design System?
As D&B is growing as a financial product company, it acquired many financial products. It also had a lot of legacy software platform. There was a need for unification of all these different products so that when our clients buy these products, they not only look similar but also behave the same. Also we did not have any shared guidelines on design principle, tone and UI elements. As a result, our design, brand and engineering teams worked in silos which created more differentiation.
By creating an updated centralized design system, we aimed to:
- Align our teams by giving them a more structured and guided way to build products.
- Speed up our design and development process: with a ready-made library and patterns teams can create and test layouts much faster.
- Improve brand perception and user trust through consistent experiences that work for everyone and allow users to accomplish their goals.
- Promote accessibility of our products by building accessibility and inclusion into our component libraries, both from a design and code repository perspective.
Few components and guidelines from D&B Design System
The Process
With a very conservative timeframe to develop the design system, we had to drive right into planning and research. I used IBM’s loop to visualize our iterative delivery process below.
Team Structure
We named our team, who is directly responsible creating the design system, Unified User Experience (UUX) team. In this team we had 3 team members- 2 designers and 1 project lead. I was one of the designers. We identified our 6 biggest revenue generating products and wanted to develop a system that could fully support these 6 products at least. We talked each teams designers and researchers regularly. We gathered user feedback via individual teams.
Team Alignment and Setting Expectation
In order to ensure the success of this project, it was important to get stakeholders on board before we start building our design system.
We systematically promoted the initiative via:
- A kick-off company-wide presentation where we shared the current pain points and the anticipated benefits of the project for the company as a whole.
- Involving engineering into the conversation early on through bi-weekly design system meetings and workshops to collect their input.
- Sharing with squads work in progress and the roadmap of the project.
By getting other teams involved from the onset and as the project evolved, we strived to promote understanding of the project and inspire a sense of co-ownership throughout the entire process.
We conducted a workshop with the core teams including developers, program design leads, and designers to identify what components the team would prioritize for this system. We also performed a design principle ideation exercise.
Identifying Components, Patterns and Others
Researching how industry leading brands such as Material, Carbon and Shopify approached this dilemma strengthened our determination to turn our vision into a reality. We began by mapping out all of our components, from simplest to most complex, and decided on optimal guidelines for design and implementation.
Creation of the Draft Standards
We planned to publish one standard component each week. Our typical week would consists of the following –
- Sprint Planning
- Product Audit
- Model System Audit
- Iterative Design
- Component Refinement
- Draft Standard
- Publish Draft Standard
We decided to focus first on the foundational elements (atoms) of our design system, such as color palettes, fonts, grid, spacing, buttons, etc., and then move on to more complex blocks and pieces (navigation, steppers, headers etc.). We created components from scratch since we switched from Sketch to Figma as it served our design needs better.
Some of the activities at this stage involved:
- Researching other design systems and interfaces for components common practices and inspiration.
- Analyzing the instances and use cases captured during the audit and ideating on the solutions that serve our goals best.
- Unifying we merged different variations of components to leave only the essentials.
The D&B Design System
After 8 weeks, we published our first set of design standards. Each component we designed with accessibility in mind. We strived to comply with WCAG AA accessibility standards. Also internalization was a big part of our component design goal as D&B products are used all over the globe.
Figma Variants
When the Variants feature was introduced to Figma, we started using it to combine variants into component sets with custom properties and values. Using variants makes components easier to maintain, browse and swap through the sidebar menu.
States Concept
We designed to cover all scenarios, or “states” in the system: hover, focus, inactive, error, and disabled state. We used these states for components like buttons, links, selection controls, fields, tabs, cards, risk scales, pagination, family tree etc.
Responsive Components
We made our components responsive with the auto-layout Figma feature, so we could reuse those components when designing for different devices or layouts. We also used the slots feature which acts as a placeholder for responsive components.
Reviewing work is an important part of any design process to ensure we arrive at decisions collectively and align on details such as component design, documentation, and tools. For this project, we formed a multidisciplinary design system team that would meet every two weeks to discuss the direction and progress of work. We also set up a design-systems Slack channel, where we post the design system updates and requests for asynchronous feedback. These practices allow us to collect everyone’s perspective and bridge the gap between design and engineering.
