Driving user loyalty: The importance of design systems in multi-brand environments
Beyond one-size-fits-all: Tailoring design systems for multi-brand success
Brand consistency builds credibility, trust and loyalty with customers. This can be tricky to achieve when managing multiple brands. Nearform overcame this challenge for a global organisation by building a “design system of systems.”
Design systems are collections of reusable components and precise standards that help ensure brand consistency across multiple platforms. But how can this consistency be achieved when an organisation manages multiple brands? Because failing to achieve it can lead to a loss of credibility, trust, loyalty and, ultimately, customers.
Nearform worked with a multi-brand organisation that faced this precise challenge. To solve it, we built a platform for creating branded design systems within the organisation. It was called a design system of systems. Rather than imposing strict ways of working, the design system of systems provides a common language and work processes to allow teams to collaborate.
How to make the systems work
A design system of systems is the agglomeration of a toolchain, a set of work processes, and a governance model for building and maintaining brand-specific design systems. These are the three pillars of a design system of systems:
Toolchain
The toolchain is a series of tools linked together to perform a common goal. The toolchain helps brands develop and grow their design system by streamlining and simplifying complex tasks. For example, a designer can push new design decisions into the toolchain and it then converts them into a theme that can be consumed by the various supported platforms. This means designer and developer experience (DevEx) is a key value of the toolchain.
Work processes
Work processes establish how designers, developers and teams work together. Designers need to work within the bounds of the established design system to deliver reusable designs that can be translated into the brand principles. Developers should reuse and contribute changes they make back to the system of systems, so all the teams within the organisation can benefit from them. The end goal is to maximise the development velocity while minimising the time to market. To organise the chaos of parallel workflows, clear work processes need to be established.
Governance
Governance allows the organisation to establish ownership and responsibility. Nearform promotes a democratic development and contribution culture (with open-source or inner-source). This culture empowers employees to contribute to the greater good of the system. Maintainers and trusted committers should be nominated and empowered to make decisions that have a real impact on the project.
However, most companies will need some hierarchy to delegate the strategic vision of the organisation to initiatives that ensure investments help to realise the vision. This is why a minimal governance model is needed to establish the owners and responsibilities of the various aspects of the design system of systems. This should be the shallowest hierarchy possible in order to protect employee empowerment.
Defining multichannel
Channels have three core dimensions: brand experiences, supported platforms and user roles.
The first dimension is the brands of the organisation. The system of systems is designed to provide a rich experience for all brands of the organisation.
The second dimension is platforms. This could include web, mobile native, Internet of Things (IoT) and others.
The third dimension is a crucial detail that can be easily overlooked: each brand may support multiple user roles. This is the difference between customer-end-user-facing applications, internal applications for members of the organisation, and B2B application interfaces.
A customer-end-user-facing application will have a strong brand identity, allowing customers to identify with the organisation. On the other side of the spectrum, a B2B application will still need to adhere to the brand identity, but will often have a more utilitarian user experience.
Further down the spectrum from B2B is an internal application. Here the brand identity will typically be less important, with productivity being the key aspect. Members of the organisation want to get something accomplished with the application and nothing more.
Taking the three dimensions into consideration, multichannel quickly becomes a complex problem. Careful consideration must be given to the combination of channels that will be targeted to ensure a design system is built that works for all of them.
Building a cross-platform component library
While implementing the multichannel design system, Nearform built a themeable component library that works on both web and mobile native platforms. (React Native is great for this). However, there must be careful consideration of the required channels.
Web applications and the possibility of progressive web applications should be considered before reaching for a framework such as React Native. If a modern, progressive web application can solve 90% of the application requirements, there may be no need to add the complexities of React Native.
Multiple brands vs multi-brand
After building the multichannel design system, users faced some confusion about the difference between a multiple brand design system and a multi-brand application.
A multiple brand design system provides the freedom for brands to create separate and unique user experiences. A multi-brand application requires tight coupling between brands and constrains the user experience within those bounds, and is often referred to as “white label.”
Nearform built both, in different applications. However, it’s important to understand that a single application can’t be both. The rich user experiences that allow end-users to identify with the brand can’t be abstracted into something generic. The user flows and interactions will be inherently different. Diffusing this understanding into an organisation is a challenge. There is no silver bullet that allows for a “write once and use everywhere” approach for a rich and unique brand experience.
Speaking a common language
To break down the silos between designers and developers, both parties need to agree to speak the same language. Design tokens provide this common language both in a figurative and literal sense. Design tokens represent the design options and design decisions.
To put this another way, design tokens provide the options to stay on brand and the decisions for a particular design.
Figuratively, the design tokens represent the common language to communicate a design. Literally, design tokens represent the actual machine-readable design decisions that should be implemented.
For example, the design tokens can be broken down into types or categories. Here are some common design token types:
The design options consist of all the possible colours that are allowed. These will typically be aligned with the given colour scheme of the brand.
Design decisions consist of determining which options should be applied to styling a given component. For example, the diagram below illustrates all of the tokens that could be used to style a button. For each token, a design decision will be made to assign an option to that token.
The component library is where the magic of the design system happens — it accepts the design decisions and facilitates their styling. In React, design decision tokens can be passed as properties to the components. This allows the component library to be themed for different brands.
The design tokens must be abstract enough that they are not bound to a single platform, such as CSS for web. To be truly cross-channel, they need to be capable of also being bound to native platforms. This makes theming with design tokens different from other common component theming libraries.
The design tokens should also be compatible with the tools that designers use, such as Figma. Only then can we be sure designers and developers are speaking the same language: design tokens.
When designers create a new design, they need to work within the bounds of the brand design options. The design work becomes an exercise in making the design decisions. The design system toolchain will then transform these design decisions into a theme that is compatible with the component library.
Design systems drive customer loyalty
A multiple brand and multiple channel design system of systems delivers the consistent experience users demand from organisations. Nearform’s Head of Design, James Malone, explains that the system we built for our client “ensures consistency across all platforms, enhances user experience and ultimately allows a streamlined development platform which supports their three brands.” It is critical to earning the organisation customer credibility, trust and loyalty.
Insight, imagination and expertly engineered solutions to accelerate and sustain progress.
Contact