Requirements
They needed a design system to support their existing global, regional, and microsites; in total over 200 websites. This system was also expected to support the development of future sites. Their requirements included:
- Creating an extendible and scalable design system
- Relaunching global sites in multiple languages like English, French, and Spanish
- Improving the overall user experience
- Enabling a seamless and easy CMS editor experience
- Developing the design system’s front-end architecture
- Creating and publishing modular components
- Styling support for RTL and LTR languages
Challenges
Our client faced multiple challenges due to the lack of a unified system. They were unable to:
- Define a consistent visual identity and branding across all their websites
- Replicate the look and feel of the existing components for each website
- Avoid additional costs in terms of developing new websites and features, due to the lack of reusable components
The Solution
Srijan built a Drupal-based platform, incorporating the design system for these 200+ websites that comprise websites for multiple countries and partners. The design system solution, built on Storybook, has detailed documentation for individual design elements, components, and templates for the developers to use.
This platform enabled:
- A frictionless experience for designers and developers alike through a unified user interface
- Seamless integration with Acquia Site Studio
- Maximum component reusability for creating websites and microsites
- Creating engaging experiences across geographical locations with minimal centralized governance
- Decoupling layout and content elements, i.e. global modifiers (color accents, typography changes, alignments, animations, etc)
The Design System Interface
Tech Stack
Business Benefits
- Faster go-to-market achieved through simplified and accelerated development of digital assets
- Enhanced content localization leading to Improved content visibility and readability
- Improved brand recognition through streamlined brand identity across all websites
- Minimized page payload, initial loading time of the pages, and user waiting time