Die Coop Gruppe betreibt eine beeindruckende digitale Vielfalt: Über 100 Websites für mehr als 70 Marken auf Basis des AEM. Historisch gewachsen, wurde jede Website oft individuell umgesetzt.

• Das Problem: Jede neue Kampagne oder Designänderung löste einen Kaskadeneffekt aus: separate Entwicklung, manuelle Abstimmungen zwischen Design und IT sowie die wiederkehrende Neuerfindung von Basis-Komponenten.
• Die Folge: Der Wartungsaufwand stieg exponentiell an, während die Konsistenz über die Marken hinweg litt. Ein System, das die Produktivität eher hemmte als förderte.

Das Ziel war die Schaffung eines Systems, das nicht nur gut aussieht, sondern als Produktivitäts-Motor fungiert.

• Single Source of Truth: Ein zentral geführtes Design System, das so konzipiert ist, dass es für alle Brands der Coop Gruppe skaliert werden kann.
• Reduktion des Entwicklungsaufwands: Minimierung des Entwicklungsaufwands pro Brand-Website.
• Time-to-Market: Signifikante Beschleunigung von der Designidee bis zum Live-Gang.
• Team-Entlastung: Befreiung der CMS- und Entwicklungsteams von repetitiven Aufgaben.
• Höchste Qualität: Eliminierung von Fehlerquellen durch systemische Vorgaben.

Das Design System wurde auf der Basis der Core Components aufgebaut und versteht Design-Entscheidungen als strukturierte Daten (Design Tokens). Dieses Setup erlaubt erst die volle Automation des Prozesses, um Design direkt und ohne manuelle Zwischenarbeit in produktiven Code zu übersetzen.

• Multibrand Design System in Figma: Figma dient als führendes System. Eine Whitelabel Lösung gibt die Struktur des Design Systems vor. Auf diese White-Label Lösung werden die Brand Guidelines pro Brand angewendet. Design Entscheidungen werden anhand von realen Komponenten gefällt, welche im AEM Umfeld zur Verfügung stehen.
• AEM Core Components: Die Lösung setzt konsequent auf den Standard von Adobe auf, was maximale Zukunftssicherheit garantiert.
• Automation-Pipeline: CSS-Generierung und AEM-Projekt-Setups erfolgen automatisiert. Designer arbeiten mit realen Komponenten; Entwickler müssen Designs nicht mehr „nachbauen“, sondern synchronisieren sie per Knopfdruck.

Wir haben den klassischen Übergabeprozess („Handover“) eliminiert. Wo früher CSS-Eigenschaften manuell abgetippt und interpretiert wurden, herrscht heute ein vollautomatisierter Datenfluss.

• Design Tokens als Code: Farben, Typografie, Spacings oder Button Grössen fliessen direkt aus Figma in die Generierung der CSS-Stylesheets für AEM. Die Vielfalt der Anpassungsmöglichkeiten ist dabei riesig. Aktuell stehen den Designern  bis zu 1’500 Token zur Verfügung, um das Branding in das Design zu überführen. 
• One-Click-Builds: Ein lauffähiges AEM-Website-Projekt lässt sich so quasi per Knopfdruck initialisieren. Die Basis-Infrastruktur steht in Minuten, nicht in Tagen.
• Automatisierte Konsistenz: Änderungen im Design System werden global synchronisiert. Eine Anpassung an der Primärfarbe einer Marke wird ohne manuellen Code-Eingriff über das gesamte System verteilt.

Qualität ist kein Kontrollschritt am Ende, sondern ein systemischer Output. Durch den Wegfall der manuellen Interpretation von Design-Vorlagen haben wir häufige Fehlerquellen eliminiert.

• Code-Integrität: Da die CSS-Styles automatisiert aus verifizierten Tokens generiert werden, ist der resultierende Code immer standardkonform und hochgradig optimiert.
• Eliminierung menschlicher Fehler: „Interpretation Gap“ gibt es nicht mehr. Wenn der Wert in Figma korrekt ist, kommt er im Browser korrekt an.
• Revisionssicherheit: Die direkte Kopplung zwischen Design und Code stellt sicher, dass Dokumentation und tatsächliche Umsetzung niemals auseinanderlaufen.

Die Innovation liegt nicht nur in der Technik (Tokens-to-AEM), sondern in der daraus resultierenden Skalierbarkeit. Wir haben die lineare Kopplung von „Anzahl Brands“ zu „Anzahl benötigter Entwickler“ aufgebrochen.

• Parallele Skalierung: Es ist nun möglich, mehrere Markenauftritte gleichzeitig zu entwickeln, ohne dass sich die Teams gegenseitig blockieren oder Ressourcen linear mitwachsen müssen.
• Radikal neues Onboarding: Neue Agenturen erhalten als Grundlage bereits ein fixes Set an Komponenten, die sie dann innerhalb der Freiheitsgrade des Design Systems (aktuell gut 1’500 Design Tokens) adaptieren können. Damit können sie sich vielmehr auf die visuelle Ausprägung als auf die Struktur von Komponenten konzentrieren und sind so schneller produktiv.
• Fokus-Shift: Die gewonnene Zeit nutzen die Entwickler nicht mehr für das „Schubsen von Pixeln“, sondern für funktionale Innovationen, die den Endkunden der Coop Gruppe echten Mehrwert bieten.

Screencast mit einem Walkthrough der Lösung – von Figma über API und Frontend Bridge bis zur Verwendung in AEM.