Sorry, you need to enable JavaScript to visit this website.
logo

Create a Multi-brand Drupal Platform with a Harmonic Information Structure for All Individual Brand Websites Based on Design System

Media, Development Services

Client

It is a German multinational chemical company and the largest chemical producer in the world. Company creates chemistry for a sustainable future. They combine economic success with environmental protection and social responsibility.
It operates six Verbund sites as well as 361 additional production sites in more than 90 countries. Company creates chemistry – around the globe.

Goal

The mission of the Company Coatings web harmonization project is to create a seamless experience for all potential and active customers through all digital touchpoints. This includes brand websites either.


The main problem for client is that three brand websites have different technical setups, different environments, different content editing rules. All these issues lead to a high degree of effort from maintenance of each website: from site support, hosting fees, new features development, to CMS training individual for each website.


So, the main goal of this case is to achieve synergies between websites such as a shared code basis and centralized configuration. All brand websites need to follow the same underlying structure logic. But it’s important that harmonize does not equal unify.
Another important point of the goal - simplicity for the editors. Editor pages should be easy to understand, nevertheless a powerful editing tool. CMS training sessions for the new site editors should be minimized. 


We can identify several key points that are important for achieving the main objective of the project:

  • independent brand child instances with the single source of truth
  • each website can create their own content that should underline global structure logic 
  • by design, all websites should have the same setup and functionality, but at the same time each brand should have their own theme

The result

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

  • 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.

  • 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.

  • 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.

Phases of development

  • Research and analysis

Defining the steps and ways to achieve the project objective

  • Drupal Architecture

Drupal master architecture development with shared codebase, modules, features, themes. Each brand can inherit and enable modules or not. Each website has its own languages, styles, user and roles, based on the global master model. All websites are deployed on the same infrastructure.

  • Design System implementation

Design system is a tool to reduce frontend development cost in large projects, with multiple brands. Each of these brands will require designs that are distinctive but must simultaneously remain visually consistent with the organization. We need a common design line and a clear collection of elements from which each page can be built.The solution - design system with component library.

The Design System uses an atomic approach - that allows developers to easily make some changes that will affect all pages/modules/paragraphs.

The Design System consists of different elements, which can be used in different ways and variants. Atomic design methodology breaks down elements into five categories: Atoms, Molecules, Organisms, Templates, and Pages. Atoms are the smallest parts of your site. Atoms build molecules, molecules build organisms, etc.

Each atom/molecule/organism can have different variations.

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 which 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 BE approach. This helps us to have a parallel development process. We use Drupal as Headless in almost everything except forms and filters. This helps us to reduce styles, to have cleaner and 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 own fields and configuration depends on brand needs.

We developed Paragraph-Box as a basic content tool, which can include different paragraphs (depending on the template) and allows the user to create flexible and individual pages, change the order of the paragraphs and enable different options (align, background, highlight, etc.)

We took care to make the CMS interface easy and user-friendly.

  • Brands features implementation

We implemented brand-own features in almost each component in the Design System. Each brand has its own fonts, colors, paddings, backgrounds, etc. We use Tailwind as our main FE technology, which allows us to have one global configuration (with master design-tokens), extend and override it to brand the instances.

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

  • Configuration of brand settings

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

  • Admin / Editors panel

Every feature available for each brand is also described inside the admin panel. Each component has its own visual style which helps administrators and editors to understand how it should look on the page. Editors also have the ability to preview a page before it is published, schedule published date and control every single element on the page - manage its text, icons etc.

  • Documentation

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

  1. 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.
  2. Component documentation
    This tab describes how and when we use a component, which token it has, which use- cases, etc.).
  3. Technical documentation 
    This tab contains technical information about variants used for each brand, the fields that are used and can be edited / translated by the user.

Tap into Attico

We can implement a similar solution for you

eng
API design
Development Services
A Custom Payment Module with Stripe Integration for Bonamark

Attico International collaborated with Bonamark to develop a payment module to integrate Stripe with Drupal, the popular CMS. The client needed the payment…

Case Study of Migrating
Education, Development Services, Drupal SEO, Drupal Services
Overcoming Web Development Challenges: Our Solution for the University of Applied Sciences

University of Applied Sciences is a German educational establishment with over 9,500 students and 150 professors. The university’s website serves as a hub for…