Eine für alle(s):
verbund.edeka
Die Website des EDEKA-Verbunds ist mehr als nur eine starke Visitenkarte: Klar strukturierte Inhalte, ein zeitloses, modernes Design und eine zielgruppengerechte Ansprache sind auch als Wegweiser für zukünftige Weiterentwicklungen zu verstehen. Der Relaunch der verbund.edeka war aus vielen Perspektiven eine spannende Aufgabe.
Eine neue, starke Plattform für den EDEKA-Verbund
Die neue Webseite stellt die Nutzer und ihre sehr heterogenen Interessen in den Mittelpunkt. Eine attraktive Stellenbörse für Bewerber, ein aktueller Pressebereich für Journalisten, sowie eine wertige Präsentation der EDEKA-Zentrale, der Regionen sowie der EDEKA-Kaufleute als Rückgrat des EDEKA-Verbunds. Und das alles intuitiv pflegbar, auf einer modernen Bedienoberfläche und mit einem vielseitigen Modulbaukasten für einen abwechslungsreichen, interessanten Seitenaufbau. Die neue Website bietet ein ansprechendes Markenerlebnis, unabhängig vom verwendeten Endgerät. Ob Smartphone, Tablet oder Computer – eine zeitgemäße Systemarchitektur und eine moderne, effiziente Hosting-Technologie erlauben nicht nur einen schnellen Seitenaufbau und eine schnellere Bildübertragung an den Nutzer, sie vereinfachen auch die redaktionelle Pflege im Backend.
Innovative Technologien, intelligent verknüpft
Als Content-Management-System (CMS) kam FirstSpirit zum Einsatz. Die Redakteure konnten baukastengleich Seiten gestalten und Inhalte anlegen. Die FirstSpirt-Vorlagen und die Backend-Komponenten wurden in separaten Umgebungen entwickelt und getestet und via CI/CD-Pipeline auf dem Produktionssystem bereitgestellt. Das Deployment der Seiten erfolgt in die Cloud, wo die eigentlich generierten Seiten liegen und über Akamai als Content-Delivery-Network (CDN) ausgeliefert werden.
Dies hat den Vorteil, dass Redakteure in ihrer gewohnten Umgebung arbeiten können, die eigentliche Seite auf hoch verfügbaren Systemen betrieben wird und man auf diese die Vorteile eines CDNs nutzen kann.
Nie war redaktionelle Pflege einfacher: Seiten aufbauen, Inhalte aktualisieren – alles mit nur wenigen Klicks.
Statisches HTML für mehr Performance
Die vorgenerierten statischen HTML-Seiten können sehr schnell ausgeliefert werden. Durch eine detaillierte Definition der dargestellten Bildgrößen und den Einsatz des Image Managers von Akamai werden die Bilder für das jeweilige Endgerät optimiert ausgegeben. Darüber hinaus sorgen die hohe Wiederverwendbarkeit einzelner Frontend-Komponenten, ein intelligentes Code-Splitting und Langzeit-Caching für eine gute Performance.
Dynamische Anteile der Seite wie Stellenbörse oder der Presse-Newsroom sind im Frontend als VueJS Apps umgesetzt. Diese kommunizieren mit einem Serverless-Backend welches aus mehreren Lambdas besteht. Das Ergebnis ist eine performante Seite die ein serverseitiges Rendering nur an den Stellen erfordert, wo es zwingend notwendig ist und die eine optimale User Experience schafft.
Atomic Design
Das Frontend wurde als Design System umgesetzt, welches dem “Atomic Design”-Ansatz folgt. Die dadurch erzielte hohe Wiederverwendbarkeit schlägt sich positiv in der Performance der Seite und der effizienten Entwicklung von Frontend-Komponenten nieder.
Interdisziplinäres Arbeiten
Das Team, bestehend aus Programmierern, Frontend- und Backendentwicklern, Konzeptern, Designern und Textern wurde eigens für den Relaunch zusammengestellt. Auf diese Weise konnte das Projekt komplett intern realisiert werden, ohne eine externe Agentur zu beauftragen.
Agile Prozesse (nach SCRUM) und ein reger, intensiver Austausch zwischen den einzelnen Gewerken ermöglichten eine extrem effiziente Umsetzung in regelmäßiger, enger Abstimmung mit den Regionen und führten schließlich zu einem für alle Seiten zufriedenstellenden Ergebnis.
Nachgefragt bei Frederik
Als Product Manager bei EDEKA DIGITAL war Frederik mitverantwortlich für die Entwicklung der verbund.edeka.
Was waren die größten Herausforderungen bei diesem Projekt?
Eine besondere Herausforderung war es, die Anforderungen der Fachbereiche der EDEKA-Zentrale – Unternehmenskommunikation, Personalwesen und Bildungswesen – sowie Vertreter der EDEKA-Regionen zu konsolidieren und in die Umsetzung einfließen zu lassen.
Wie wurde as Projekt umgesetzt?
Anders als bei bisherigen Webseitenprojekten wurde nicht eine externe Agentur mit Konzeption und Design beauftragt, sondern intern, gemeinsam mit Frontend- und Backendentwicklung, eine Lösung erarbeitet.
Wie geht es weiter mit dem Projekt?
Eine Webseite ist ja nie ganz „fertig“. Wir arbeiten kontinuierlich an einer Verbesserung und Erweiterung der Seite. Durch die Verwendung von Atomic Design, lassen sich Webseitenkomponenten und -Module auch zukünftig auf einfache Weise weiterentwickeln. Außerdem ist es ferner möglich, Vorlagen und Module – bei Bedarf mit grafischen Anpassungen – auch für neue Webseitenprojekte wiederzuverwenden und somit einen Synergieeffekt zu erzielen.
