Multi-brand Drupal Platform: Creating a Harmonic Information Structure for Individual Brand Websites Based on Design System

Challenges

The primary challenge faced by our client was the maintenance of individual brand websites. Each website required separate site support, hosting fees, new features development, and CMS training. Additionally, the different technical setups and content editing rules for each website led to discrepancies in the overall user experience.
 

What Our Team Thinks

“I was excited to work with Taikonauten again on such a big project. The already well-built team was a big advantage of this project. Also, we had good confidence since we have built a few huge projects with multisite and multilanguage. So we reuse our experience and approaches” - Denis Suharevich, Project Manager

“It was an amazing project, full of insights and interesting solutions. We realized how powerful and flexible can be a design system and Drupal as a platform. Step by step we moved towards the goal together, as a team, helping each other, analyzing and using the accumulated experience, and constantly improving at each phase. The goals were achieved, we got harmonized brand sites on the same code base, while at the same time, we saved the individual brand spirit and features. I am very proud of the product we developed” - Volha Tsiamliak, Frontend Developer

“It was a complex but interesting project. 3 brands – 3 websites with their own structure, design and requirements. In addition, each site is multi-regional and multilingual, which made the development and testing process more complicated. I would like to note the cohesion and professionalism of the team and the flexibility of our work, which allowed us to quickly respond to changes in customer requirements. We also showed our proactive position and often gave advice to the customer on improving the development of the site. We treated the project as our brainchild and sincerely tried to bring something better to it ” - Viktoryia Supranovich, Tester
 

The Design system makes it easy to add new websites that will initially have a basic master theme at the start and then can have their own fonts/colors/variants. 

The Design System was implemented with the Storybook Tool. We use Emulsify as a connector between Drupal and Storybook, it adds settings that allow us to use Twig in components. It is also a Drupal theme. It can be used as a standalone prototyping tool with twig templates or inside a Drupal installation. 

Storybook is flexible and we customized it for project needs. We added custom breakpoints, grids (for visual testing), dark and light modes and implemented brand themes. 

We developed custom tabs for documentation (both component and technical documentation), so Storybook becomes a single source of truth about design and documentation. 

• Content Types and Paragraphs Development (Global Master)

We use Emulsify Drupal as a base Backend (BE) approach. This enables us to have a streamlined development process. We use Drupal as Headless in almost everything except forms and filters. This approach reduces styles and results in cleaner, more extensible code. We implemented atoms and molecules on BE side either. It’s rather useful and awesome when you are developing a multi-brand platform with single master architecture. Each atom, molecule, or paragraph has its fields and configuration tailored to the needs of the brand. 

We have also created a tool called Paragraph Box, which is a basic content tool that allows users to create flexible and individual pages. Depending on the template, it can include different paragraphs and enables users to change the order and apply different options such as alignment, background, highlight, and more.

We put a great deal of effort into making the CMS interface user-friendly and easy to use.

• Brands feature implementation

We have integrated brand-specific functionalities into virtually every component of our Design System. Each brand can customize its fonts, colors, paddings, backgrounds, and other elements. We use Tailwind as our main FE technology, which allows us to have one global configuration (with master design tokens), extend it to match the needs of each brand. 

As a result, we visualized the design system with each brand using one Storybook. And the client can easily add new components and features and even add a new brand with their own styles/fonts.

• Configuration of brand settings

We implemented brand configuration on the Drupal side. Each brand has different component types and different required fields. All these dependencies are held on the BE side and can be easily maintained and changed.

• Admin / Editors panel

The admin panel contains detailed descriptions of all the features available for each brand. Each component has its own visual style which helps administrators and editors to understand how it will appear on the page. Editors have the option to preview a page before publication, schedule the publishing date, and have complete control over each element on the page - manage its text, icons, etc.

All features and fields were documented and uploaded into Storybook. In each component, there are three tabs: 

This tab shows what the component looks like. Each component has control buttons to change and check all available options and component types. It’s also possible to change text and font styles almost in all cases.

This tab describes how and when we use a component, which token it has, which use cases, etc.). 

The tab includes details on the technical aspects of the brand variants, as well as the fields that can be edited and translated by the user.
 

• Documentation

All features and fields were documented and uploaded into Storybook. In each component, there are three tabs:

• Story. This tab shows what the component looks like. Each component has control buttons to change and check all available options and component types. It’s also possible to change text and font styles almost in all cases.
• Component documentation. This tab describes how and when we use a component, which token it has, which use cases, etc.). 
• Technical documentation. The tab includes details on the technical aspects of the brand variants, as well as the fields that can be edited and translated by the user.

The Results

In six months our team deeply researched and analyzed the client's websites. 
We developed and implemented:

1. Master Architecture 
   
   One single multi-site Drupal CMS architecture is the core of all brand websites. The master instance contains the shared codebase with all available modules and features across brands. Each brand website supports multiple languages. Each brand has its own content database, domain and configuration.
2. Global Design System
   
   We created the Design System as a single source of truth for all brands. Each brand has its own deviations from Master Theme (includes colors, fonts, paddings, features, etc.) We implemented the documentation and demonstration of the Design System in a clear and useful way.
3. Shared Infrastructure and Hosting
   
   All brand websites were developed, deployed and run on the same infrastructure

As a result, the client has individual brand websites that are easy to manage, easy to edit and have a harmonized view that is followed on all sites.
 

Insights

• The design system provided a common design language and a clear collection of elements, making it easier for developers to create pages and modules across different websites. This also allowed the individual brands to maintain their own unique style and identity while ensuring consistency across all websites.
• The customization of Storybook for project needs, including the addition of custom breakpoints, grids, and dark and light modes, helped in creating a flexible and customizable design system. The addition of custom tabs for documentation made Storybook a single source of truth about design and technical documentation.