You did it! You have exceeded one million users and your team has grown. Now there are enough teammates to directly and dedicatedly pursue the development of the web platform, smartphone and tablet apps, and smart TV apps, but also to reorganise the workflows to proceed independently for individual features.
When teams grow, it is not uncommon for single units to take small steps independently. Over the long haul, those steps might end up invalidating the initial cohesion. Developers know how easy it is to yield to the temptation of copy-and-paste from one codebase to another just to discover, months later, that the original code has changed and it wasn’t updated in any occurrences. Like single pieces of code, the style elements that contribute to defining brand identity end up fraying.
The digital world has contributed to multiplying possible touchpoints with users and customers, without offering the chance of managing the basic elements of the style in a unified way for all those touchpoints. For example, just think about the diverse ways in which the three main digital “platforms” (web, iOS, and Android) allow you to define the same colour:
Fortunately, there are several tools that allow you to keep this potential uncontrolled evolution under direction. It is, therefore, possible to define a coherent and common set of design decisions and rules upstream (the design system) and use these tools to export these rules to all the platforms you need.
Design Systems and Design Tokens
Brand identity is not just a notion for marketing but is also the starting point for consistent user experience across different channels. In fact, in addition to more immediate benefits such as confidence and learnability, consistency in UX also affects the trust and credibility of the brand. Customers can recognise as robust and good a company that offers them consistent UX across channels.
To facilitate the definition and communication to the various stakeholders of UX and visual guidelines, in recent years designers and UX experts have relied on a tool that takes the name of “design system”.
A design system is a collection of reusable components that can be assembled together to build any number of applications. Examples of design systems include Material Design from Google, ADG from Atlassian and Lightning Design System from Salesforce. Design systems may help to enhance brand coherence, to fit user experience and to work on a shared library of patterns.
Each element of the design system can be broken down into increasingly independent elements until it reaches the “atomic” elements. In this attempt to engineer visual components and UX, those entities that store visual design attributes are defined as “design tokens“. Those tokens can and must be defined in a platform-independent format that is readable by both humans and machines.
Design tokens should be able to store all the characters that distinguish the UX: colours, typographic elements, iconographic elements, movements and animations, dimensions and elevation. So a good design token tool should offer a system that can be agnostic, structured and relational.
At Codemotion Rome 2019, Danny Banks shared some cues about how to effectively define and manage design tokens to build consistent cross-platform interfaces. We’ll show some in the next article of this series. Stay tuned!