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.
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:
In six months our team deeply researched and analyzed the client's websites.
We developed and implemented:
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.
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.
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.
Defining the steps and ways to achieve the project objective
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 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.
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.
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.
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.
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.
All features and fields were documented and uploaded into Storybook. In each component there are three tabs:
We can implement a similar solution for you
Attico International collaborated with Bonamark to develop a payment module to integrate Stripe with Drupal, the popular CMS. The client needed the payment…
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…