Based on Design System.
Attico International collaborated with a large chemical producer, to create a centralized platform for their brand websites under the web harmonization project. The aim of the project was to provide customers with a seamless experience through all digital touchpoints. However, the different technical setups, environments, and content editing rules for each brand website resulted in high maintenance efforts.
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.
We can identify several key points that are important for achieving the main objective of the project:
“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
Research and analysis
Defining the steps and ways to achieve the project objective
Drupal Architecture
Drupal master architecture development with the shared codebase, modules, features, and themes. Each brand can inherit and enable modules or not. Each website has its own languages, styles and user roles based on the global master model. All websites are deployed on the same infrastructure.
Design System implementation
A design system is a tool to reduce Frontend (FE) development costs 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 is a design system with a 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 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:
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.
