Samenwerken aan een maatschappij waarin niemand er alleen voor staat

Nadat we in 2017 Oranje Fonds’ corporate website en hun drie voornaamste campagne-websites hadden ontwikkeld, deed zich een luxeprobleem voor. De campagnes van NLdoet, Appeltjes van Oranje en Maatjes Gezocht waren namelijk zo succesvol dat er een manier gezocht moest worden om hun groeiende bekendheid duidelijker te koppelen aan het ‘moedermerk’. Oranje Fonds vroeg Havas Lemz daarom hun merk opnieuw te ontwerpen en de campagnes daar op een natuurlijke en consistente manier onderdeel van te maken. Vervolgens was het aan ons om dit ontwerp digitaal tot leven te wekken en het communicatieteam de best mogelijke middelen te geven om het merk online aan het werk te zetten.

Een merk moet zich blijven ontwikkelen om relevant te blijven. Daarom vinden we dat Havas Lemz uitstekend werk heeft geleverd met een merkgids die meer mogelijkheden biedt dan richtlijnen. Maar omdat hij niet specifiek voor online toepassing was gemaakt, moesten we een digitaal design system ontwikkelen; een toolbox om webpagina’s mee te maken die zowel stijlvast zijn als toegankelijk voor de heel diverse doelgroepen. Deze bron van elementen, van patronen, vormen en kleuren, verzekert Oranje Fonds daarmee van hoogwaardige en consistente visuele communicatie op verschillende websites terwijl hij flexibel gebruikt kan worden door zowel haar eigen communicatieteam als externe partners.

Met de ‘end-of-lifetime’ van het Drupal 7 CMS in zicht, besloten we om twee vliegen in een klap te slaan: de implementatie van het nieuwe digitaal ontwerp combineren met de migratie naar een ‘headless’ opzet van het Drupal 8 CMS. Om dit mogelijk te maken, labelden we de bestaande modulaire componenten als Atom, Molecule, Organism of Template, in overeenstemming met Brad Frosts methode van Atomic Design. Toen we deze eenmaal opnieuw hadden ontworpen om te voldoen aan de nieuwe merkgids, konden onze developers met deze componenten flink snelheid ontwikkelen in het bouwen van de user interface in React. Bijkomend voordeel was de toegenomen flexibiliteit omdat we nu ook zelf maatwerk-componenten konden maken in plaats beperkt te blijven tot verouderde Twig-templates.

Een ‘bibliotheek’ van componenten in een design system helpt ook bij het maken van een frontend theme. De migratie van de corporate website naar het nieuwe headless Drupal 8 CMS biedt namelijk de mogelijkheid om een enkele frontend source te gebruiken bij toekomstige projecten. Dat betekent dat verbeteringen in de UX op één website (b.v. verfijnde interacties en animaties) eenvoudig overgebracht kunnen worden op de andere. Zo maakten we feitelijk een plug-and-play-systeem dat ons in staat stelt om ons meer te concentreren op functionaliteit dan op styling. Het betekende een volgende grote verbetering in kosteneffectiviteit omdat we onszelf waardevolle tijd besparen door dezelfde ontwerpen en interacties niet afzonderlijk te hoeven implementeren op verschillende websites.