Multi-brand design systems: what they are and main benefits
What are multi-brand design systems
Os multi-brand design systems They are systems with attributes that make them flexible for use in different contexts, visual patterns and interface design. They are developed for cases in which a single library aims to serve products from different brands.
Generally, this type of system design is also independent of frameworks, platforms or technologies — these are called tech-agnostic design systems.
Currently, the system design most popular agnostic is lightning, developed by Salesforce, also the creator of the concept.
Benefits
In addition to being a single source of truth, the multi-brand design system shares the cost of the operation, making work truly collaborative between teams. According to Volkswagen group designers, the implementation of GroupUI brought the following results:
Scalability
Developed based on the concept of design tokens, enable the same library to be replicated in different products, regardless of the framework in which they are developed. At the same time, they allow each of these products to use their own visual standards. Another very relevant point is the sharing of characteristics such as good practices, responsiveness, accessibility, performance, UX and ergonomics.
Use in different technologies
Currently, it is common to find design systems, even in those that serve a single brand, different libraries for web, iOs and Android products. This is due to the existence of different specifications for desktop and mobile browsers, as well as between devices with native operating systems, such as Apple and Google. Working independently of these technologies, it is possible to instantiate the same system design in different library components to meet these particularities.
Efficiency gain
According to data released by UX and design systems of the Volkswagen Group, through the presentation Multibrand Design System within the Volkswagen group & its brands, there is a great increase in agility, productivity and efficiency when working with the concept multi-brand.
Comparing the effort required between a product without design system, passing through one that has its design system, and arriving at one that adopts the methodology multi-brand, it is possible to notice an incremental and considerable reduction in UI (interface design) and development efforts. This implementation enables a way of working that is more oriented towards the user experience and discovery, by freeing up resources for these activities, which until then were being consumed in the design and implementation of interfaces.
Standardization
Um system design detailed and well-specified becomes a single source of truth. When shared within the organization, in addition to making the work of teams much easier, it enables consistent standardization, avoiding the need for the same discussions, discoveries and definitions, which become ready to be reused as a result of the constant development of a system design.
Easy customization
According to experts, the main characteristic of a multi-brand design system is flexibility. In this context, making customizable means allowing each product to apply its design decisions visual. To make this possible, libraries of design tokens. They can be easily duplicated and customized, generating distinct visual patterns for each brand and product.
Design tokens can be interpreted as variables that carry style attributes, such as a brand color, which is applied as token, allows, when changing the value loaded by the variable, to reflect the change in all places where the color is presented in the interface.
In the example above, we have brand color specifications for three different design systems, and in the left column we have the token, which will remain the same across all products. The value carried by the variable is different in each case. These definitions apply to any other visual attribute, such as typography, spacing, borders, shading and even animations.
Structure of design systems multi-brand
Second Brad Frost, one of the most influential consultants in design systems current affairs and author of the book atomic design, it is recommended that design systems multi-brands have three layers:
Tech-agnostic (1st layer)
The agnostic level of a system design is the basis for the others, therefore, it only includes the codes html, css and java script, in order to render components in the browser. This layer is extremely important in the long term, as it allows the future reuse of a system design. For example, in the current scenario, it can be said that the most popular language is React. However, this was not always the case and it is not known which technology will be the next to stand out. For this reason, it is important to have a base layer, which can be applied to new technologies, without the need to start a new system design from scratch.
In this first layer, designers and developers build the components of the system design in a workshop environment, documented in some tool such as Figma e zeroheight. The result of this work are components rendered in the browser, considering that the framework adopted today may not be the same as the one adopted in the future.
Tech-specific (2st layer)
The specific level of technology is where there is already a dependency on some technology and/or platform and, in addition, there is the opportunity to generate a layer of system design for all products that use the same technology. A good example of this type of system design is Bayon DS, which serves the products SAJ. It is also possible to use it to develop any other product that uses the technology React.
Product-specific (3st layer)
The third layer is where everything becomes very specific and all the effort is put into a particular product. At this level, documentation can be created relating to very unique standards that only apply to that particular context. Following the concept of atomic design, in this layer components of greater complexity and less flexibility are created, such as pages and templates, in order to generate product patterns.
In the third layer, individual applications consume the specific version of the selected technology, via package managers such as npm e yarn.
How we are putting these new concepts into practice
A few months ago, after the announcement of the initiative InnerSource, we began to study a way to transform Bayon, so that it could "receive" this new concept. Personally, I began in-depth research into the topics discussed in this article. Furthermore, my managers gave me the opportunity to participate in a bootcamp advanced over design systems, which brought me a lot of learning.
In parallel to the research, we brought together some professionals with knowledge about Bayon, represented by colleagues from the architecture and product design teams of the JUS verticals, to discuss the possibilities of action to convert our system design to the latest standards.
Together, we diagnose the most correct way to create and apply a library of design tokens, allowing us to remove our current framework, the Material UI, so that, in its place, there is the implementation of the new system design Softplan agnostic.
Web components e stencil
Through recurring meetings with representatives of Softplan Group companies, the possibility of developing a library of web-components. In it, each visual attribute or design decision is applied through design tokens, allowing complete customization that guarantees that each component will present the visual characteristics of the corresponding product.
Web components are a set of APIs that allow the creation of Tags Custom, reusable, encapsulated HTML for use in pages and applications Website. They have many advantages, such as compatibility with applications that use or do not use frameworks, compatibility with all major browsers and library availability open source which reduce the cost of operation.
In addition to this technology, the Stencil.js, um compiler open source that shares concepts found in frameworks most popular and which further simplifies component development, as well as learning for developers.
References
Multibrand Design System within the Volkswagen group & its brands
Design tokens — What are they & how will they help you?
Design Systems Should be JavaScript Framework Agnostic
Creating multi-brand design systems
Managing technology-agnostic design systems
Managing technology-agnostic design systems
Multibrand Design System within the Volkswagen group & its brands (Video)
In the file: Creating multi-brand design systems (Video)
Atomic Design by Brad Frost—An Event Apart Austin 2015
