Design systems: creating consistent cross-channel customer experiences

Feb 08, 2021

sales, marketing and service
IT
data
intelligent apps

We talk a lot about the need for consistency across digital channels to create effortless customer (and employee) experiences. This has far-reaching implications on how digital products – websites, apps, intranet environments, but also SAP interfaces – are designed and developed. A streamlined and scalable solution that facilitates collaboration between stakeholders is urgently needed. This is where design systems come in.

Any organization that has dabbled in streamlining its branding across multiple platforms would agree that design does not scale easily. Adding more people and resources, for example, is insufficient. The real challenge is ensuring the effective flow-through of conventions and agreements, and of reusable elements. Without a streamlined process to handle this, inconsistencies and redundancies are bound to pop up all over the place.

A factory model for digital products

With the rise of design systems, digital design is experiencing its ‘assembly line moment’. Much like the automotive industry in 1913, this new approach replaces slow, bespoke methods, and operationalizes a factory model for digital products.

But what is a design system exactly? At its most basic level, it’s a repository where anyone involved in creating company-branded digital products can find all the brand elements, source files, interface elements, standards and agreements, navigation patterns, and any other possible building blocks, for every possible channel.

Obviously, the mere existence of such a magical place poses many advantages, from enabling new staff and third-party consultants to get acquainted with company design and conventions faster, to creating a consistent and familiar user interface and visual language across platforms and channels – ultimately leading to a better customer experience.

Tying UX and development together

There’s more: design systems help bridge the divide between design and development. Traditionally, translating a graphical element into code is one of the biggest bottlenecks in the creation of digital interfaces, as developers have to manually code them in a way that ensures a smooth and truthful roll-out.

Design systems, however, make it possible for development teams to create a much more authentic interpretation of design elements and act much faster. This is achieved by using ‘design tokens’: an agnostic way to store variables like color, typography, spacing, etc. and which enables building blocks to be shared across platforms and channels. These tokens are generated into a JSON format by design tools like Figma, and can easily be transformed into platform- or channel-specific code.

Maintaining momentum

Apart from preventing tons of duplicate code, design systems and tokens avoid a lot of confusion and frustration across teams and departments. Design is set up to go fast: websites, tools and apps need to stay fresh and maintain momentum. But coding and developing is typically a slow and meticulous process. As a result, rapid design changes can easily overwhelm the coding department.

With a design system, however, organizations can effectively bridge that gap. The result? Improved consistency across channels, reduced complexity, a unified customer experience, and the ability to implement new and valuable features faster (think: conversion optimization).