<img alt="" src="https://secure.agile365enterprise.com/790157.png" style="display:none;">
NON-profit

Introduction


Digital transformation helps organizations scale rapidly by accelerating their product development lifecycle. But in this process, maintaining consistent brand identity across multiple touchpoints is equally crucial. To streamline the brand identity across product design and development, it becomes imperative for enterprises to identify the tools that can help them achieve the same.
A design system is one such tool. It is a collection of design components (atoms, molecules, and organisms) and a systematic approach to product development with guidelines, processes, and code, which define how these components should work together seamlessly. The standards cover guidelines for each component, typography, and content writing rules. As a result, an enterprise can attain the required development velocity with a consistent brand identity.

The Client

Our client is a global welfare organization tasked with helping countries eliminate poverty and achieve sustainable economic growth and human development. Headquartered in New York City, it is one of the largest aid agencies in the world, with offices in 170 countries.

Highlights:

Srijan helped a global welfare organization define a consistent brand identity across 200+ websites through a custom design system.

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

1-May-27-2022-12-18-07-59-PM

2-May-27-2022-12-18-08-00-PM

Tech Stacktech-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

 

 

 

 

Subscribe to our newsletter