De Uitdaging
AkzoNobel had behoefte aan een gecentraliseerde digitale oplossing om hun wereldwijde merkportfolio efficiënter te beheren. Het doel was om een "Master Template" te creëren waarmee lokale marketingteams (zoals Flexa in Nederland of Sikkens internationaal) zelfstandig sites konden bouwen binnen de merkrichtlijnen, zonder dat er telkens een nieuw development-traject nodig was.
De Technische Oplossing
Als onderdeel van het development-team heb ik gebouwd aan een modulaire frontend-architectuur:
-
Muban Framework: Gebruikgemaakt van het Media.Monks Muban framework om een strikte scheiding aan te brengen tussen logica en presentatie. Hierdoor konden we robuuste, herbruikbare componenten bouwen die perfect aansluiten op een complexe backend.
-
AEM Integratie: De frontend-componenten zijn naadloos geïntegreerd met Adobe Experience Manager (AEM). Hierbij hebben we een systeem opgezet waarbij auteurs in AEM flexibel componenten op een pagina kunnen plaatsen ("Drag-and-Drop" authoring).
-
Design Token System: Implementatie van een uitgebreid theming-systeem. Door middel van CSS variables en configuraties konden we de visuele identiteit (kleuren, fonts, spacing) per merk volledig aanpassen, terwijl de onderliggende HTML-structuur en logica identiek bleven.
-
Component-Driven Development: Ontwikkeling van een uitgebreide library aan UI-onderdelen die over de hele wereld door verschillende sub-merken worden gebruikt.
De Impact
-
Time-to-Market: Nieuwe merk-sites of land-specifieke pagina's kunnen nu in dagen in plaats van maanden worden gelanceerd.
-
Onderhoudbaarheid: Eén centrale codebase voor de frontend, wat updates en bugfixes voor alle merken tegelijkertijd mogelijk maakt.
-
Flexibiliteit: Lokale teams hebben de vrijheid om hun eigen unieke paginalay-outs te creëren binnen de kaders van de globale merkidentiteit.
Gebruikte Technieken
-
Frontend: Muban (TypeScript / Handlebars / SCSS)
-
CMS: Adobe Experience Manager (AEM)
-
Workflow: Agile/Scrum binnen een internationaal team van Media.Monks.