Gewinner der deutschen und österreichischen Splash Awards 2020

Aufbau einer Multisite-Solution für TRANSGOURMET

Welche Möglichkeiten bietet eine Marke wie Transgourmet beim Aufbau von Multisite-Lösungen für ihre Kunden und Mitarbeiter, um die Nutzung verschiedener Webseiten mit unterschiedlichen CMS-Systemen sowie Usern leichter machen zu können? 1xINTERNET schuf eine Drupal 8-Distribution, die auf allen Webseiten reibungslos angewendet werden kann. Das Front-End wurde dabei in ein Design-System von Patternlab integriert. 

Was steckt hinter Transgourmet und wie konnten wir helfen?

Transgourmet ist ein Lebensmittelgroßhändler für Gastronomie, Hotellerie und Großverbraucher mit mehr als 3 Milliarden Euro Umsatz pro Jahr. 

1xINTERNET wurde 2018 damit beauftragt alle Webseiten von Transgourmet und der Brand Selgros Cash und Carry zu erneuern und unter ein einheitliches technisches Konstrukt zu stellen. Transgourmet selbst, wie auch die Tochtergesellschaften betreiben weitere Brand- und Microsites. 

Die Aufgabe bestand darin, ein einheitliches und dennoch flexibles Website-Produkt zu schaffen, welches den Relaunch aller Webseiten ermöglicht. Daher sollte ein robustes, sicheres und effizientes CMS eingesetzt werden, dessen Entwicklung und Instandhaltung zeitlich entkoppelt funktionieren kann. 

Projektbeschreibung

Die Corporate-Websites und Microsites wurden bisher von unterschiedlichen Teams, mit verschiedenen CMS-Lösungen implementiert und gewartet. Auch das Design war nicht einheitlich.

Für ein homogenes Markenerlebnis war es daher notwendig einen gemeinsamen technischen Styleguide zu nutzen. 

Als CMS wurde sich für eine Drupal-Distribution mit entkoppelten Design-System entschieden, auf deren gemeinsamer Code-Basis mehr als 6 Webseiten erstellt werden sollten. 

Warum war Drupal die richtige Wahl?

Projektziele und Resultate

Das wichtigste Projektziel war die Erstellung einer Distribution, die aktuellen und zukünftigen B2B Anforderungen gerecht werden kann. Dabei stand insbesondere die Interaktion mit dem Kunden im Vordergrund. Folgende Anforderungen sollten bestmöglich erfüllt werden: 

• Neues Design und User-Experience

• Individualisierbares Frontend für die unterschiedlichen Brand-Manuals der Seiten

• Markt Selektion und dazugehöriger personalisierter Content 

• Branchenspezifische Filtereinstellungen bei Events mit geregelter Anmeldung

• Personalisierte Banner mit einem editierfreundlichem Banner-Admin-Tool für mehr als 200 Banner

• Rezepte mit unmittelbarem Call-to-Action in den Shop

Drupal 8 Distribution

1xINTERNET erstelle daraufhin eine Drupal 8 Distribution (Webseiten-Produkt), auf welcher alle Webseiten laufen können. Das Frontend wurde in einem Design-System von Patternlab integriert. Dieses wird von der Drupal-Distribution, wie auch von der B2B headless Commerce Lösung genutzt. Alle Webseiten sind soweit isoliert, dass Entwicklung, Instandhaltung und Deployment unabhängig voneinander durchgeführt werden können. 

Die erste Relaunch fand 2019 für Transgourmet.de statt, darauf folgten 2 weitere Microsites. In 2020 ist der Relaunch für die Corporate-Website von Selgros.de geplant sowie alle weiteren dazugehörigen Microsites. 

Herausforderungen

Die wesentliche Herausforderung bestand in der engen Zusammenarbeit mit allen Interessengruppen Seitens Transgourmets, da für jede Website ein eigener Product-Owner zuständig war und diverse Anforderungen stellte. 

So wurde neben der Konsolidierung aller webbezogenen Technologien, wie dem Relaunch, auch weitere Aktivitäten die zur Abstimmung dienten,  in die Cloud umgezogen.  

Auf der technischen Seite bestand die Herausforderung darin, die teilweise veralteten Technologien nutzbar zu machen. Die User  sind zumeist Köche und Küchenleitungen, die oft mit sehr veralteter Hardware und eingeschränkten Browserberechtigungen (IE9, InternetExplorer 11) arbeiten. Dies fügte eine weitere Komplexität zwischen modernen UX Anforderungen und technischer Limitation hinzu. 

Modulare Architektur 

Die Distribution beinhaltet mehr als 50 individualisierte Module, die projektspezifisch ein- und ausgeschaltet werden können. 
Beispielhafte Module sind: 

In diesem Projekt wurden keine hoch-komplexen Funktionen genutzt, sondern vielmehr eine breite Auswahl von Modulen sinnvoll miteinander kombiniert. Aus Sicht einer professionellen Drupal Agentur wurden sozusagen keine spezifischen Spezialitäten integriert, jedoch trotzdem einen sehr großen Wert für den Kunden geschaffen. 

Nachfolgend werden die wichtigsten Features aus Kundensicht kurz beschrieben.

Events mit Anmeldeformular

Transgourmet bietet seinen Kunden eine Vielzahl von Events, Workshops und Hausmessen an. Diese werden teilweise in spezifischen, teils in übergreifenden Märkten ausgerichtet. Daher wurde ein Event Content-Type erstellt, der wiederum unterschiedliche Events beinhalten kann. Zu jedem ist eine Sign-Up Option gegeben. 

Dadurch konnte Transgourmet die Eventorganisation von hohem E-Mail Verkehr zu einem modernen Work-Flow verbessern. 

Katalog Management

Wie bereits erwähnt spielen Blätterkataloge/Handzettel etc. in dieser Branche weiterhin eine wichtige Rolle und mussten daher in die Website integriert werden. Manche dieser Kataloge werden auf der Webseite selbst erstellt, manche werden durch eine externe Software via API  integriert.  Neben der hohen Anzahl der sich daraus resultierenden Media Assets wurden weitere Metadescriptions und Taxonomien - Attributierungen im CMS durchgeführt. 

Anbei erhalten Sie ein Beispiel.

Rezepte

Für Küchenchefs und Einkäufer der Lebensmittelbranche ist es eine gängige Praxis auf Basis von Personenzahlen zu kalkulieren und hochzurechnen und daran ihre Rezepturen und den Lebensmitteleinkauf abzustimmen.

Das erste wesentliche Feature, nach den Grundfunktionen des CMS, war die Entwicklung eines Rezeptportals mit unmittelbarem Call-to-Action in den Shop für Rezepte oder den angebotenen Cross- und Up-Selling Produkten. Der Shop ist eine Eigenentwicklung, der durch deep-linking erreicht wird. 

Community Contributions 

Innerhalb dieses Projekts wurden ebenfalls viele Contributions für Drupal-Module durchgeführt: 

• Google ReCAPTCHA v3
  Google reCAPTCHA v3 gibt einen spezifischen Score zurück, ohne dass der User aktiv interagieren muss. Basierend auf diesem Score werden Submissions erlaubt oder ein weiterer CAPTCHA-Test durchgeführt 

• Config Patch Gitlab
  Wenn die Konfigurationen im Drupal UI, anstatt im Repository direkt geändert werden, können diese Änderungen als Merge Request an ein Gitlab gesendet werden. 

• Toastr messages
  Das Toastr-Modul implementiert die Toastr.js Bibliothek. Toastr ist eine Javascript Bibliothek für Gnome / Growl Type non-blocking Mitteilungen. 

Hosting / Operations

Alle Webseiten werden auf Pantheon.io, Issues und Sourcecode, auf Gitlab.com gehostet. 

Das Design-System / Frontend für die Webseiten is in einem separierten Repository gehostet. Es gibt für das Webseiten-Produkt selbst ein Repository und für alle darauf aufbauenden Projekte ein eigenes Repository. Somit ist es möglich individuelle Features entkoppelt oder integriert ins Projekt zu bringen. 

Alle Operationen sind vollautomatisiert mit Hilfe von Gitlab’s CI/CD System. Änderungen im Frontend oder dem Profil werden automatisch aus den Testsystemen der Webseite deployed. Diese werden wiederum automatisch auf die Testseiten der Projekte bereitgestellt.