Working on a society where no one is left behind

After we developed Oranje Fonds' corporate website and their three main campaign websites in 2017, a luxury problem arose. Indeed, the campaigns of NLdoet, Appeltjes van Oranje and Maatjes Gezocht were so successful that a way had to be found to more clearly link their growing awareness to the 'parent brand'. Oranje Fonds asked Havas Lemz to redesign their brand and make the campaigns part of it in a natural and consistent way. It was then up to us to bring this design to life digitally and give the communications team the best possible tools to put the brand to work online.

A brand must continue to evolve to stay relevant. That's why we think Havas Lemz did an excellent job with a brand guide that goes beyond guidelines. But because it was not created specifically for online application, we had to develop a digital design system; a toolbox with which to create Web pages that are both style-consistent and accessible to very diverse audiences. This resource of elements, of patterns, shapes and colors, thus assures Oranje Fonds of high-quality and consistent visual communication across different websites while allowing flexible use by both its own communications team and external partners.

With the 'end-of-lifetime' of the Drupal 7 CMS approaching, we decided to kill two birds with one stone: combine the implementation of the new digital design with the migration to a 'headless' setup of the Drupal 8 CMS. To make this possible, we labeled the existing modular components as Atom, Molecule, Organism or Template, in accordance with Brad Frost's method of Atomic Design. Once we redesigned these to conform to the new brand guide, these components allowed our developers to develop considerable speed in building the user interface in React. An additional benefit was the increased flexibility as we could now create our own custom components instead of being limited to outdated Twig templates.

A "library" of components in a design system also helps when creating a frontend theme. Indeed, the migration of the corporate website to the new headless Drupal 8 CMS offers the opportunity to use a single frontend source on future projects. This means that improvements in the UX on one website (e.g., refined interactions and animations) can be easily transferred to the other. So we effectively created a plug-and-play system that allows us to focus more on functionality than styling. It represented another major improvement in cost effectiveness as we saved ourselves valuable time by not having to implement the same designs and interactions separately on different websites.