How to display multiple brands, themes, guidelines, and more on zeroheight
Jules Mahe
In the dynamic world of design systems, one-size-fits-all solutions rarely suffice. Complex design systems frequently cater to the unique needs of multiple brands, themes, and intricate guidelines, reflecting the diversity of products and services they support. Effective documentation takes center stage within this multifaceted landscape, providing the foundational blueprint for these design systems. This article explores the specific content types that are vital in crafting comprehensive design systems and how to articulate them seamlessly using zeroheight.
Multiple brands
What does it mean to have multiple brands?
When managing a design system catering to multiple brands, the challenges of maintaining distinct identities become increasingly intricate. Each brand demands a meticulous specification of styles, including color palettes, typography, and visual elements, necessitating a delicate balance between consistency and individuality. We wrote a whole article about it alongside a workshop if you need to find this balance for your design system.
Additionally, articulating specific components tailored to the unique requirements of each brand introduces complexities in ensuring that the components remain coherent while reflecting the brand’s essence. Moreover, defining the tone and voice rules for diverse brands within a single system demands a nuanced approach to communication, where the messaging must resonate with the brand’s values, target audience, and overall identity.
Navigating this complex terrain of multiple brands within a design system underscores the significance of a robust documentation strategy that captures the distinct nuances of each brand and facilitates cohesive brand management across the system.
How to manage multiple brands with zeroheight?
When you have multiple brands to manage for your design system, it’s always easier to dedicate a separate area to them. To achieve this, there are multiple possible ways.
Keep everything in the same place
The first approach would be to have a dedicated entry in the header navigation to create unique entries for each brand. This way, your users know exactly where to find the resources they need for their brand. This solution’s main benefit is having a single source of truth where all your brands are hosted and exist on a single platform. The downside of this approach is being limited to 3 levels of depth to articulate your content: categories, pages and tabs. Depending on the density of information you need to structure for each brand, this may not be enough to articulate each piece of content properly.
Dedicate a whole styleguide for your brand
Another way of managing multiple brands would be to dedicate a specific styleguide to them. This way, you have all the architecture levels available to articulate the content specific to each brand: header entries, categories, pages and tabs. This also helps to distinguish each brand universe clearly and avoid confusion or information mixing between brands. Moreover, if several different teams are working on the documentation for each brand, having a dedicated space for each team further simplifies management and logistics.
However, the downside of this approach is that you lose that notion of a single source of truth, where everything is hosted on a single platform. Nevertheless, several solutions address this problem:
Central Hub
The first would be to create a styleguide that serves as a central hub to redirect to each brand. This styleguide would be very simple and serve as a redirection portal. The benefit is that you can recapture this notion of the source of truth by sharing just this one link for all the teams who will subsequently be directed to their dedicated platform. And if you need to keep an easy access to this central hub, you can still point to this portal in each brand’s styleguide’s header.
Styleguide switcher
Another alternative is to use our styleguide switcher. This feature adds an extra level above the header. In this way, you keep a dedicated space for each brand while allowing easy access from one to another.
Finally, if you’re picking this approach for managing your multiple brands, you may find our page sync feature helpful. Indeed, you may have the same duplicated content between your styleguides when you need to mention some basics or global information. Luckily, we got you covered with this feature, helping you keep synced and updated content across multiple styleguides!
Multiple themes
What does it mean to have multiple themes?
A variation of the multiple brands is the different themes you could have with your design system. The light and dark mode is probably the best example to illustrate this theme concept. But there are other possibilities to rely on different themes for a design system: different types of customers (premium, low-cost, standard, etc.) or different experiences (prospect, logged-in, etc) for instance. The difference between multiple themes and multiple brands is that themes are only a change of identity while components stay the same. While multiple themes only differ from a style perspective, multiple brands also differ with specific components, patterns, tone of voice and more.
How to manage multiple themes with zeroheight?
As themes are only declinations of styles, it’s not essential to dedicate an entire styleguide to them, as is the case for brands.
The first option is to play with the tabs to display the variations. The documentation is presented in a default theme version, and a tab at the same level as the documentation allows you to display its variants in another theme. This approach keeps everything at the same level, making documentation easier to read and more enjoyable for your users.
There is also another, rather more technical approach to presenting the different versions of your components. However, this technique requires 3 prerequisites:
- Having your components already coded
- Using Storybook
- Using an add-on for Storybook
By integrating Storybook directly into your documentation to display your coded components, you can also switch from one theme to another directly from zeroheight. This avoids the need for a dedicated tab and makes it easier to access your different themes. However, this requires that your components are already coded and not just in the design phase. A very good example of this is Decathlon which displays all their components using this Storybook approach.
Multiple products
What does it mean to have multiple products?
A digital product can represent many things in the product world: products with different uses and targets (for the end customer, for a service provider, for internal use, etc.), different platforms (web, iOS, Android, etc.), and so on.
The various components may have similarities that are very close or very far apart. For example, the components may differ if they are separate products. This might be the case for a VTC booking product such as Uber, which will have a separate product for its customers and another specific one for its drivers. The uses, patterns and components are then very different to address these needs.
On the other hand, a product may have different versions for different web and mobile devices, but still want to maintain a strong and established brand identity across these different platforms. This is the case for a food delivery service, like Deliveroo, for example, which needs to offer the same experience on its website, tablet, mobile application and any other devices.
How to manage multiple products with zeroheight?
Use tabs to keep everything on the same level
If it’s a variation between different platforms (web, iOS, Android, TV app, etc.), the logic could be similar to what we apply with the themes as seen above. In other words, using tabs on zeroheight to present the different versions on the same level.
However, this approach can reach its limits. Consider all the components and patterns specific to a platform that do not necessarily have a variation. This is particularly true for mobile devices, for example, some modals, swipe patterns, different keyboards, etc. In such cases, there isn’t necessarily a web equivalent to display in a tab at the same level. Depending on whether you have a lot of platform-specific components, you could make a separate entry for each platform in the header navigation to dedicate documentation for each platform. Ultimately, it’s up to you if you prefer having all at the same level but with some specific components that won’t require a specific tab for their variations. Or if you prefer to distinguish each platform separately in a specific entry.
A dedicated styleguide for your products
The approach could be similar to the multiple brands if it’s multiple distinct products. You may choose between the two options depending on how rich and complex your different products and documentation are. Have everything on the same platform with a dedicated entry in your header navigation. Keeping everything in the same place might be better and simpler, but you might face some architectural restrictions with only three levels available. Either you dedicate a full styleguide for each product to benefit from all the flexibility it might offer. It might be simpler to manage if there are dedicated teams for each product and it might also be more convenient if you have a lot of content to display for each. However, you might lose the benefits of having everything in one place. Solutions like a central hub to redirect or the styleguide switcher could make sense for your use case.
Multiple guidelines
What does it mean to have multiple guidelines?
Whether you have one or multiple brands, products or themes, it’s also possible you need to split your content guidelines into multiple parts.
Regarding how complex or detailed your content is, it could make sense to have a dedicated platform for your UX writing, brand, marketing, interfaces, etc. Reasons for splitting your content this way can be multiple: different teams working on these specific guidelines, very rich documentation, need some people to access this content only, etc.
Regarding the latter – if you want to restrict access to your content to a certain audience – there are several possible solutions. Password or SSO protection for certain pages in your styleguide, for the whole styleguide (or both), versioning or just hiding certain pages.
How to manage multiple guidelines with zeroheight?
Similar to how to manage multiple brands or different products, the solutions depend on how rich and complex your content is. If it can fit in a dedicated entry in your navigation header and you won’t need more than the 3-level architecture, this solution helps you keep everything in one place. But if you need more flexibility with your content architecture, consider dedicating a full styleguide for each then. You might use the styleguide switcher or creating a special styleguide as a central hub to redirect your users to the right content.
Multiple everything
We covered specific use cases that might concern your design system needs. However, you may face a mix of these different use cases. For example, you may have multiple products with a light and dark mode for each. Or you may have multiple brands addressing multiple themes and products simultaneously.
In this case, combining the different solutions we suggested is possible. A central hub could point to different products, with dedicated entries in the navigation header for specific platforms where you will find variations for different themes.
Another solution we didn’t mention that could help you is our Workspaces feature. It allows teams from the same company to work within zeroheight more seamlessly. This is beneficial if you have teams that work on separate projects and use separate design files or just want to organize your design system by brands, products, teams, etc.
There isn’t one way to manage and organize complex design systems. But we’d love to hear about how you structured your design system. Feel free to shout us on X (formerly Twitter) or our Slack community zheroes, if you have suggestions to share with us or just want to ask us any questions!