Transgourmet - Multisite und Headless E-commerce
DIE HERAUSFORDERUNG
Ziel von Transgourmet war es, die Websites, Online-Shops und Apps aller Marken und Unternehmen in ganz Europa auf einer einzigen CMS- und E-Commerce-Plattform zu konsolidieren. In dem die Anzahl der eingesetzten Technolgien verringert wurde sollte die Effizienz bei der Website-Verwaltung gesteigert und die Kosten gesenkt werden. Für die Verbraucher sollte ein einheitlicher Markenauftritt und einem nahtloses Benutzererlebnis für einen effizienteren Kaufprozess erzielt werden.
DIE LÖSUNG
Als CMS-Plattform wurde die Open-Source-Software Drupal gewählt, da diese über die notwendigen Funktionalitäten für Grossunternehmen verfügt und keine Lizenzkosten anfallen. Für den Online-Einkauf wurde das Headless-Commerce-Framework Commercetools ausgewählt. Eine Microservice-Architektur integriert den Shoplösung nahtlos in die Website und ermöglicht es Benutzern, zwischen Marketinginhalten und Shoppinerlebnis zu wechseln, ohne die Website verlassen zu müssen. Um die Markenkonsistenz sicherzustellen, wurden alle dargestellten Elemente in einem unternehmensweiten Designsystem erstellt.
DIE HIGHLIGHTS
Das erstellte Multisite-System und die integrierte E-Commerce-Lösung steigerten die Effizienz im Management der Webseiten deutlich. Eine Designbibliothek basierend auf Webcomponents wurde als Teil des Designsystems von Transgourmet erstellt und sorgt für eine einheitliches visuelles Erscheinungsbild über die CMS- und E-Commerce-Frontends hinweg. Diese erstellten Technologien unterstützt en auch das Backend der mobilen Apps für B2B- und B2C-Kunden. Durch vereinheitlichtes Tracking und Analytics wurde vollständige Transparenz der Marketingaktivitäten erzielt und es konnte eine deutliche Steigerung des Online-Umsatzes erreicht werden.
Transgourmet Deutschland GmbH & Co. OHG
Transgourmet Deutschland GmbH & Co. OHG (Transgourmet) ist ein führender Lebensmittelgroßhändler für Gastronomie, Hotellerie und Großverbraucher mit einem Umsatz von mehr als 3 Mrd. € pro Jahr.
Es gehört zur Transgourmet Holding, die ihrerseits Teil der Coop-Gruppe ist. Transgourmet Deutschland GmbH & Co. OHG betreut eine große Kundenbasis, darunter Restaurants, Hotels, Kantinen, Catering-Unternehmen. Eine der bekanntesten Marken für Großhandelsmärkte, die in Deutschland und weiteren Ländern vertreten ist, ist Selgros Cash & Carry, deren Online-Sortiment über 60.000 Artikel aus den Bereichen Food und Non-Food anbietet.
Zu unseren Kunden zählen heute Transgourmet Deutschland GmbH & Co. OHG, inklusive Selgros Cash & Carry, sowie deren Tochterunternehmen wie z.B. Frische Paradies und Niggemann.
Die Webseitenstrategie von Transgourmet
Im Jahr 2018 wurde 1xINTERNET beauftragt, die Webseitenstrategie aller Websites von Transgourmet und der dazugehörigen Marke Selgros zu überprüfen, und ein ein Konzept für eine Konsolidierung der Technologien zu erstellen. Die Aufgabe bestand darin, eine einheitliche und flexible Lösung zu schaffen, die den Relaunch aller Websites des Unternehmens ermöglicht. Entscheidend war der Einsatz eines robusten und sicheren CMS, mit dem ein effizenter Entwicklungs- und Wartungsprozess umgesetzt werden konnte. Für ein Unternehmen wie Transgourmet ist ein solches Projekt von wesentlicher Bedeutung für die erfolgreiche Umsetzung der digitalen Strategie.
Transgourmet verfügt über verschiedene Websites und Marken in verschiedenen Ländern. Dazu gehören:
- https://www.transgourmet.de/
- https://www.selgros.de/
- https://www.selgros.ro/
- https://www.selgros.pl/
- http://www.transgourmet-nachhaltigkeit.de/
- https://www.niggemann-food-frischemarkt.de/
- https://fruchthof.at/
- https://www.frischeparadies.de/
- https://www.transgourmet.de/
- https://www.transgourmet-mitarbeitermagazin.de/
Zuvor wurden alle Websites mit unterschiedlichen CMS-Systemen und Designs umgesetzt und hatten abgetrennten E-Commerce-Lösungen.
In der ersten Iteration wurden alle Websites in einer einzigen Technologie konsolidiert. Anschließend wurde die E-Commerce-Funktionalität erstellt, in die Websites integriert und auf alle relevanten Marken und Länder ausgerollt.
Abschließend wurden die erstellten Systeme wiederverwendet, um die notwendigen Daten für den Relaunch der nativen B2B- und B2C-Apps bereitzustellen.
Konsolidierung der Websites
Vor Beginn des Konsolidierungsprojekts wurden die verschiedenen Unternehmenswebsites und Microsites von verschiedenen Teams mit unterschiedlichen CMS-Lösungen implementiert und gepflegt. Dies führte zu unnötig hohen Entwicklungs- und Wartungskosten. Auch war die Bedienung der Websites war für die Redakteure schwierig, da alle Systeme unterschiedlich waren.
Abgesehen von Kosten und Betrieb konnten die verschiedenen Marken von Transgourmet nicht zentral gepflegt werden. Traditionell haben Transgourmet/Selgros, aber auch die anderen Marken, ein starkes Corporate Design und hohe Standards. Bei so vielen verschiedenen Systemen und Teams war es nicht möglich, ein einheitliches Markenerlebnis auf allen Websites aufrechtzuerhalten.
Daher wurde eine einzige CMS-Technologie ausgewählt, um Entwicklung, Wartung, Betrieb, Hosting und visuelles Erscheinungsbild aller Websites zu standardisieren. Drupal wurde als Kerntechnologie ausgewählt, da es sich um eine CMS-Software der Enterprise-Klasse handelt, die als Open-Source-Software vertrieben wird und daher keine Lizenzkosten verursacht.
Mehr über Open-Source-Software im Vergleich zu proprietärer Software
Drupal bietet hervorragende Funktionen, um mehrere Websites mit demselben Quellcode zu betreiben. Dies wird auch als Multi-Site-Strategie bezeichnet. Heute laufen mehr als 20 Unternehmenswebsites auf Drupal, darunter die am häufigsten besuchten Websites, die auch die hochvolumigen E-Commerce-Lösungen enthalten.
E-Commerce ohne Medienbruch
Transgourmet/Selgros ist ein Großhandelsunternehmen und der Zweck der Websites besteht darin, das Handelsgeschäft voranzutreiben. Es wurde eine Strategie entwickelt, um die Websites und Online-Shops nahtlos zu integrieren. Ziel war es, dass die Besucher der Websites durch Marketinginhalte wie Kataloge, Werbeaktionen, Rezepte usw. navigieren können und ohne die Website zu verlassen, in eine User-Journey für eine Shoppingerlebnis weitergeleitet zu werden.
Dies wurde durch die Wahl von Commercetools als E-Commerce-Technologie erreicht, da diese als Headless-Lösung problemlos in die konsolidierte Website integriert werden konnte.
Darüber hinaus wurden alle Anzeigeelemente, sowohl für das Website- als auch für das Commerce-Frontend, in einem auf Webcomponents basierenden Designsystem ausgearbeitet, das für beide Frontends zum Einsatz kommt. Alle Markenelemente wie Logos, Schriftarten, Layouts, Buttons, Karten, Überschriften usw. werden zentral entwickelt und als Komponentenbibliothek zur Verfügung gestellt. In den verschiedenen Frontends werden diese Komponenten zur Darstellung der Inhalte genutzt und so ein einheitliches visuelles Erscheinungsbild erreicht.
Erfahren Sie mehr darüber, wie Designsysteme funktionieren
Wenn Sie heute die Websites besuchen, können Sie nicht erkennen, ob Sie Inhalte aus dem CMS- oder dem Commerce-Backend sehen, und Sie haben eine vollständig integrierte User-Journey auf den Websites, von der Anzeige von Marketinginhalten bis zum Kauf von Produkten.
Native mobile Apps für B2B und B2C
Da sowohl das CMS-System Drupal als auch die E-Commerce-Plattform Commercetools API-First-Frameworks sind, können sie zur Bereitstellung von Inhalten für native Apps verwendet werden.
Für Transgourmet/Selgros ist es wichtig, sowohl ihren B2B- als auch B2C-Kunden erstklassige Einkaufserlebnisse zu bieten. Daher werden für beide Zielgruppen native Apps für iOS und Android zur Verfügung gestellt.
Als Technologie wurde React Native aufgrund der Synergien mit den bestehenden Website-Technologien gewählt.
Die B2B-App wurde 2021 eingeführt und die Hauptfunktionalitäten für die Benutzer sind:
- Produktscanner (EAN, QR)
- Produkte nachbestellen
- Nahtloses In-App-Browsing im Webshop
- Durch gerichtete Kommunikation zwischen nativen und Webkomponenten (gescannte Artikel zum Warenkorb hinzufügen, Suche, Authentifizierung, Warenkorb fortsetzen)
- Produktkatalog auf dem Gerät (mit kundenspezifischen Preisen)
- Integriert Durchsuchen des Anzeigenkatalogs (PDF-Kataloge)
Die B2C-App wurde 2024 neu aufgelegt und die Hauptfunktionalitäten für die Nutzer sind:
- Produktscanner (EAN, QR)
- Einkaufsliste
- Push-Benachrichtigungen
- Automatische Sprachverhandlung, automatische Theme-Einstellungen
- Onboarding-SliderTracking-Einwilligung, App-Bewertung
- Workflow „Kunde werden“
- Kundenkarten
- Gutscheine
- Werbekataloge
- Kundenspezifische Preise
- Startbildschirm-Widget
Effiziente Entwicklungsprozesse
Die Funktionalität der Websites und Shops erfolgt in verschiedenen Teams. Auf einer Metaebene können die Entwicklerteams zwischen dem CMS-Team, dem Commerce-Team und dem Frontend-Team unterschieden werden.
Das CMS-Team stellt die CMS-Funktionalität bereit, das Commerce-Team die Commercetools-Lösung und das Frontend-Team die Webkomponentenbibliothek, die von den beiden anderen Teams verwendet wird.
Es wurde ein hocheffizienter Lieferprozess geschaffen, der es ermöglicht, neue Versionen des CMS, der Shop-Funktionalität und des Designsystems unabhängig voneinander zu veröffentlichen.
Projektüberblick
“Skalierung durch Konsolidierung...”
"Während wir unser Online-Geschäft weiter ausbauen, haben wir erkannt, wie wichtig die Konsolidierung unserer Technologien ist. Durch die Rationalisierung unserer Abläufe und die Integration verschiedener Tools in ein zusammenhängendes System haben wir nicht nur die Effizienz gesteigert, sondern auch unsere Fähigkeit verbessert, uns an veränderte Marktanforderungen anzupassen. Unser konsolidierter Technologie-Stack ermöglicht es, uns auf Innovation und die Bereitstellung nahtlosen Einlaufserlebnisses für unsere Kunden zu konzentrieren und so letztendlich unseren Wachstumskurs voranzutreiben.”
Jens Friedrich, Leiter of E-Commerce, Transgourmet Germany
Robuste Technologie und nutzerzentrierte Features
Einheitliche Suche
Eine Suchfunktion ermöglicht es Benutzern, über eine einzige Oberfläche auf den verschiedenen Plattformen und Dienstleistungen von Transgourmet nach Produkten, Rezepten oder anderen Inhalten zu suchen.
Hosting auf Pantheon.io
Alle Websites werden auf Pantheon.io gehostet. Das Designsystem bzw. das Frontend für die Websites werden in einem separaten Repository gehostet. Es gibt ein Repository für die Website-Technology und separates Repositories für alle darauf basierenden Projekte. Dadurch ist es möglich, einzelne Features zu entkoppeln und in bestimmte Projekte zu integrieren.
Voll-automatisierte Prozesse
Alle Vorgänge erfolgen über vollautomatisierte CI/CD-Systeme von Gitlab und Azure. Änderungen im Frontend oder CMS werden automatisch aus den Testsystemen der Website übernommen. Diese wiederum werden automatisch auf den Testseiten der Projekte zur Verfügung gestellt.
Market pages
Transgourmet vereint zahlreiche Lebensmittelanbieter unter einem Dach. Egal, ob Sie sich für feinen Fisch bei Frischeparadies.de interessieren, bei Niggemann.de oder Fruchthof.at für hochwertige Frischwaren vorbeischauen oder dem nächstgelegenen Selgros-Großmarkt einen Besuch abstatten möchten – Transgourmet hat die richtige Website für Sie.
Auf jeder dieser Websites können Sie die richtige Filiale manuell auswählen oder Ihren eigenen Standort verwenden, um die nächstgelegene Filiale zu finden. Allein Selgros verfügt in Deutschland über mehr als 90 Filialen mit unterschiedlichen Werbemitteln, Inhalten und Events.
Produktkataloge
Werbeprospekte und Kataloge zum Stöbern spielen auch heute noch in der Lebensmittelbranche eine wichtige Rolle und wurden in die Website integriert. Einige dieser Kataloge werden auf der Website selbst erstellt, andere werden von externer Software über eine API bereitgestellt. Zusätzlich zu der Vielzahl an resultierenden Media-Assets wurden weitere Meta-Beschreibungen und Taxonomie-Attribute im CMS implementiert.
Personalisierte Banner
Bestimmte Websites verfügen über B2B- und B2C-Shopping-Funktionalitäten. Diese erfordern eine Personalisierung, um zielgruppenspezifische Angebote zu präsentieren, kundenspezifische Preise anzuzeigen oder Banner zu individualisieren.
Konfigurierbare Rezepte
Konfigurierbare Rezepte erleichtern den Arbeitsalltag für Kunden aus Gastronomie, Hotellerie und Gemeinschaftsverpflegung. Köche und Einkäufer kalkulieren ihre Bestellmengen für Lebensmitteleinkäufe anhand der Personenanzahl und passen ihre Rezepte entsprechend an.
Der Shop mit Rezeptportal ist eine Eigenentwicklung, die durch Deep-Linking erreicht wird und über ein direktes Call-to-Action-Modul verfügt, das Cross-Selling- und Up-Selling-Produkte vorschlägt.
PatiChef - Dessertkonfigurator
PatiChef vereinfacht die Dessertzubereitung und geht auf Küchenherausforderungen wie Planung, Zeit und Fachwissen des Küchenpersonals ein. Damit können Patissiers gelungene Desserts nach Bedarf, Budget, Aufwand und Menge einfach online konfigurieren.
Eventregistrierung
Transgourmet und seine Unternehmen bieten ihren Kunden ein breites Spektrum an Veranstaltungen, Workshops und Hausmessen. Einige davon sind nur in bestimmten Märkten organisiert, andere in allen Märkten. Aus diesem Grund wurde ein Veranstaltungsinhaltstyp erstellt, der unterschiedliche Veranstaltungsformate aufnehmen kann. Für jeden ist eine Anmeldemöglichkeit vorgesehen. Dadurch konnte Transgourmet seine Eventorganisation von einem hohen E-Mail-Verkehr auf einen modernen Workflow verbessern.
Mehr über Eventregistrierungen
Mitarbeitermagazin
Transgourmet stellt seinen Mitarbeitern ein Magazin mit Unternehmensnachrichten, Updates, Mitarbeiter-Spotlights und branchenbezogenen Artikeln zur Verfügung.
IT-Karriereportal
Basierend auf dem CMS wurde eine Online-Plattform erstellt, über die IT-Jobs bei Transgourmet veröffentlicht werden können. Das Portal wurde mit der HR-Lösung von Transgourmet integriert.
Ausgezeichnet mit dem Innovationspreis 2020
Bei der Veröffentlichung der ersten Versionen des neuen Technologie-Stacks wurde das Projekt „Transgourmet Distribution – Multi-Website-CMS“ bei den Splash Awards Deutschland/Österreich 2020 für den innovativen Ansatz ausgezeichnet.
Mehr über die Gewinner des Innovationspreises bei den Splash Awards 2023
Eine wirtschaftliche und professionelle Lösung
Wirtschaftliche und professionelle Lösung. Ein wesentliches Kriterium fuer die Wahl des CMS war eine kosteneffiziente und professionelle Lösung. Transgourmet suchte ein flexibles und anpassungsfähiges Framework, das mit dem Unternehmen mitwachsen konnte, anstatt es durch starre Funktionen und einen vorgegebenen Umfang einzuschränken. Drupal wurde gewählt, weil es Open-Source ist und weil schnell klar war, dass alle Anforderungen problemlos erfüllt werden konnten.
Weitere Projekte
Eldum Rétt - komplexer Webshop
BSB - Headless E-Commerce
