Fostering design consistency with a distributed team

Role
Lead Designer, Design System

Company
Backbase (Amsterdam, The Netherlands)

Context

The company

Backbase is a fast growing fin-tech software company that empowers financial institutions to accelerate their technological transformation and effectively compete in the digital market.

My team

The Design System team is part of the Research and Development division of the company. A multidisciplinary team, with a Product Owner, Frontend, Design and Quality Assurance.

My role

As the lead designer in the team, my work focused on building a process that empowered designers in the company to contribute and use the design system with the confidence of understanding how design and implementation lived together in our product.

Challenge

Building consistent and flexible components for designers & developers

At the time when I joined the Design System team, the company had been growing aggressively. The company already had teams all over the world, and the product offering was growing along our client base.

Without a source of truth for design and development, and an increased need for flexibility and speed, inconsistencies began to surface in our product.

We already had points of contact to make agreements but it was time to scale our design and frontend.

Issues to address

  • Distributed designers and developers
    Teams all over the world in both R&D and Consulting meant there was a big challenge agreeing and communicating standards for everyone.

  • Increased need for flexibility and consistency
    As the client base grew, so was the demand to provide more robust solutions with sufficient flexibility to allow for a personal look & feel for each customer.

  • Growing design team
    The design team across all the company (sales, R&D and consulting) grew from about a dozen to more than 30 people in less than 2 years.

  • No clear standards to follow
    There was no clarity on the level of accessibility standards to cover from design or agreement on common UX patterns through the platform’s products.

Process

Since I had previously been participating as a contributor to the system, I had an idea of the pains that most designers in our company were facing, so my first step was to interview a group of designers to confirm our assumptions and validate our vision in the Design System team.

Our first step was to implement a workflow for all development teams building new interfaces with our platform. This new process allowed us to identify possible dependencies in the design phase, before wasting development time and re-work.

This process was part of a clear Definition of Done for both design and development.

For designers

New touchpoints and ways of working amongst designers had to be put in place so that everyone felt empowered to contribute and use the system. We had to adopt a truly collaborative process.

  • Design System Weekly
    A weekly meeting to present, discuss and agree on patterns, components and styles to be shared across all the design team. An open session for all designers in the company.

  • Design Sketch Kit
    A set of Sketch Libraries comprehensively covering styles and banking components for responsive Web, iOS and Android.

  • Design Guidelines
    Clear guidance for design components covering usage, content, accessibility, responsiveness and so forth; as well as the shared styles and UX patterns overarching the system.

  • Design System Website
    A place to download assets and review all guidelines for designers next to the living coded components.

Solution

Design System Weekly

The Design System Weekly is a working session where product designers in the R&D department met to discuss elements to introduce or update in the system. This included styles, UX patterns, components, content, accessibility and more.

All sessions are documented with clear notes and action items to be shared with the rest of the team, since not everyone attends all the sessions. Designers in sales or consulting were also invited to attend and share experiences with the system when using it with clients and leads.

Sketch Design Kit

The Design Kit is a collection of interconnected Sketch Libraries containing Foundation Styles and UI components for Responsive Web, Android and iOS. Together they make all the product’s interface.

It helps designers design and prototype complete workflows really easily by just using the collection of symbols provided. All components are consistent with the coded components, so there is no gap between design and frontend.

Design Guidelines

As part of the process to change or introduce an element in the system, the designer leading the change would have to prepare a draft of design guidelines to hand over to the design system team to complete and publish.

These guidelines covered usage, placement, interaction, content, responsiveness and accessibility of UI components, as well as principles for styles. These guidelines served as support to the symbols in sketch during an implementation.

Design System Website

The source of truth for designers and developers. Here teams can find the coded components with their props and methods, next to design guidelines. This makes it really easy for designers and developers to agree on implementation.

The website also contains guides to get started, content on accessibility and standards, as well as links to download all resources, such as fonts, icons, Sketch Libraries and more.

Fostering wide-spread adoption

A Design System lives through the contribution of the development teams using it, so we knew promoting its adoption across all the company was key to the success of the project.

For that purpose, we used any opportunity available to share updates and education on how to participate.

  • Demo day
    Bi-monthly short presentation to stakeholders and other teams on the progress in the system.

  • Internal Workshops
    Hands-on sessions with designers and developers to gather insights to help us improve the system based on their feedback and experiences with customers.

  • Onboarding new designers
    As the design team grew, it was key to get them up and running with the Sketch Kits and process, so they could also contribute when ready.

  • Design System Newsletter
    A monthly internal email sharing release notes, links to newly released components and information on internal workshops.

Lessons learned

Design Systems are living organisms that can always change and grow along your product and team. Since they can serve very different purposes, it’s really important to determine your goals and principles at the start, so you create the assets that work best for your company’s product.

The main takeaway from this project was how a low-barrier entry to contribute in a design system is key to get people to adopt it. You need a process that welcomes collaboration and delivers clear agreements. By fostering this culture, contributors become natural ambassadors of the system, promoting its usage and improvement.