June 30, 2021

Creating a Multibrand Design System

5
Minute Read

Managing multiple brands under one umbrella means supporting multiple digital experiences, most of which feel unique to users, but need to be managed in a way that lowers total cost of ownership. Multibrand design systems can help.

schedule a call
Design Systems

In an increasingly global market, many companies find themselves facing a challenging dilemma: managing multiple brands under one umbrella.

This means supporting multiple digital experiences, most of which feel unique to users, but need to be managed in a way that lowers total cost of ownership, allows for consistency, and saves time and effort by creating shared components and other cross-brand elements. 

Fortunately, Design Systems (DS) are the perfect solution. Not only does a multibrand DS lower costs, but unified design also results in a better experience for both customers and team members. 

Getting Started

A great way to get started in creating a multibrand design system is by beginning with the most complicated brand. This way, your team has created all the possible components that would be needed, and can pull from this robust catalog to build out the simpler brands. Include all brands in this conversation to ensure that you’re identifying collective pain points, but focus on solving for the most complicated brand first. 

It’s also critical to prepare the business team and help them understand that the uniqueness of each brand isn’t going to be compromised. A multibrand DS is about sharing components, not diluting the strength of the brand or its products. It can be particularly helpful to have leadership invested in the initiative. With influential stakeholders leading the charge, team members are more inclined to embrace the process shift, and by involving those whose roles are most impacted right from the start, the rate of adoption drastically increases.

User Research

Once all parties are on board, user research is often the next step. User research includes everything from speaking with customers and store managers, to exploring signage and hang tags, to evaluating the digital experiences. 

It’s essential when working with an omnichannel eCommerce brand to truly evaluate the full brand, not just exclusively the digital aspects. Often, this in-store experience research helps teams identify inconsistencies and problem areas right off the bat, as well as in-store experiences that have online equivalents which don’t always align as seamlessly as possible.

Digital Audit

Digital Audit - buttons graphic

Next, the digital audit includes things like buttons, inputs, controls, typography, links, and more. It’s important to evaluate the whole scope of the site, from form-heavy pages like checkout, to image-driven sections like product pages.

The audit is focused on documenting all of the variations, such as variations in color or shape. From there, we determine how frequently those styles are used. This is a deeply important step, as it helps us determine what to move forward with. 

There are some great tools that can make this part of the process easier. CSS Peeper, for example, allows you to view all elements of a component without having to dig into the code. 

Another great tool, Contrast, lets you audit for visual accessibility. This tool ensures that colors and textiles are meeting accessibility standards, and will provide an accessibility rating to you. 

Once you’ve completed the audit, share the information with leadership. Multiple variations of components translate into multiple costs. By reviewing the unnecessary variables, leaders can better understand the scope of opportunity, potential cost savings, and impact a multibrand design system will have on the business. 

Atomic Design

5 Design Systems

As those familiar with Design Systems will recognize, a DS is made up of:

  • Atoms - the basic building blocks, like: Shapes, Colors, Icons, & Fonts.
  • Molecules - simple groups of UI elements that function as a unit, like Input Groups.
  • Organisms - more complex components composed of groups of molecules.
  • Templates - page-level objects that layout the underlying content structure.
  • Pages - specific instances of templates that represent a design in its final form.

Each element builds upon its predecessor. So for example, templates combine to create pages. The end result is that a company managing multiple brands could have pages that are designed quite similarly, but by using colors, fonts, and imagery specific to each brand, still establishes a unique brand look.

Mockup web design


The beauty of this is that the user experience feels familiar but is still differentiated. Users more easily navigate the site, especially if they shop across brands, thanks to their familiarity with flow, and yet each brand still maintains its individual feel.

Shared Components

Part of the auditing process includes auditing what you have, but also what you need, in order to determine the core things that are essential for each brand. 

In this part of the process, it’s important for each brand to articulate what’s important to them and what their requirements are. From there you’re able to identify overlaps and shared priorities, research if things that are perceived as critical truly are critical to the customer experience, and create user stories to ensure that you’re solving the correct problems.

Design System Setup

When you’re ready to build out your design system, you’ll first need to talk about taxonomy. For example, what one designer may refer to as a ‘carousel’ might be called something different by another designer. Clarifying terms straight from the start can prevent miscommunications.

With terms clear, you can start with foundational elements, which are the pieces you can build with to create more robust designs. These components are things like buttons, textiles, etc. which together allow you to scale as needed.

Once you have the core elements, you can move into page design. Typically, you’ll start with the header and footer, as they are complex components that will get shared across all pages. As you create pages, you’ll start to build out page elements like carousels, and add those components to the design system. This allows you to establish modular designs, with interchangeable, replicable elements that can be deployed across multiple brands while still allowing for individualized brand identities.

Next Steps

A mutlibrand design system can save time and money, simplify and improve user experience, and take a load off of your design teams, all while still delivering the unique brand experiences your customers know and love.

Not sure where to begin in creating a multibrand design system? Reach out the team of experts at Object Edge. 

About the Author

Emily Christy

,

UI Designer

A Dallas, Texas based UI designer with over 8 years of visual and interactive design experience. Focused on solving complex design challenges to provide intuitive user experience and strengthen brand identity.

Latest Posts

Want to talk?

Schedule a call