Redesign der tegut...–Website mit Fokus auf Responsive Design und Usability-Optimierung

Kunde

Die tegut... gute Lebensmittel GmbH & Co. KG ist ein Handelsunternehmen mit rund 280 Lebensmittelmärkten in Hessen, Thüringen, Bayern sowie Göttingen, Mainz, Stuttgart und Ludwigsburg. Das Angebot frischer und ökologischer Lebensmittel, regionaler Bezug sowie Aus- und Weiterbildungsmöglichkeiten der Mitarbeitenden stehen im Fokus des Vollsortimenters.

Projektziel

Mit dem Relaunch der eigenen Website und einer darin eingeschlossenen mobilen Optimierung will tegut... seinen Markenkern zukünftig auch auf mobilen Plattformen etablieren. Daher beauftragte uns der Lebensmittelhändler mit der Erstellung von neuen Gestaltungsvorlagen sowie der Entwicklung eines dynamischen Web-Styleguides. Eine anschließende Überführung unserer Gestaltungsvorlagen in ein Responsive Webdesign stand dabei im Fokus. Größten Wert legte tegut... darüber hinaus auf eine grundsätzliche Usability-Optimierung, um den Besuchern der Website künftig eine optimale User-Journey zu bieten. Im letzten Schritt des Projektes beauftragte uns tegut... mit der Content-Migration der bestehenden Seiten sowie einer umfassenden Suchmaschinenoptimierung. Die Optimierungen und weitere Erweiterungen sollten die Website an die neuen Bedürfnisse der Kunden anpassen.

Projektvorgehen

Eingeleitet wurde das Projekt mit einer umfangreichen Konzeptionsphase, welche die Durchführung der tegut...-internen Workshops zur Anforderungsanalyseaus den einzelnen tegut...-Fachbereichen sowie die Analyse des IST-Standes umfasste. Im Anschluss an das Konzeptionsprojekt fand eine Konsolidierungmit den Ergebnissen aus der parallel laufenden Neuausrichtung der Markenidentität statt. Nach Abgleich der Ergebnisse beider Teilprojekte konnte ein detailliertes Anforderungsprofil entwickelt und die Projektumsetzung angeschlossen werden. So wurde im weiteren Verlauf die Kreativkonzeption auf Grundlage anerkannter Konzeptionsmethoden durchgeführt und in den Rahmen des User Centered Design-Prozesses (UCD) eingebettet.

Auf Basis dieser Projekt-Feinkonzeption wurden neue Gestaltungsvorlagen für insgesamt 12 Seitentypen entwickelt und diese an den Corporate Design-Vorgaben, an den grundsätzlichen Anforderungen an Usability, Barrierefreiheit und Zielgruppenorientierung sowie an die technischen und gestalterischen Notwendigkeiten an ein Responsive Design ausgerichtet.

Mit der Erstellung der User Interface Design-Vorlagen wurden außerdem wesentliche Vorgaben an die neue Website-Gestaltung in einen Web-Styleguide überführtund im Laufe des Projektes fortlaufend aktualisiert.

An die User Interface Design-Phase schloss die Realisierung von validen und semantisch korrekten HTML5- und CSS3-Prototypen unter Beachtung aktueller Usability-Anforderungen sowie unter Berücksichtigung der Barrierefreiheit und der Prinzipien des Responsive Designs an.

Zur Realisierung des Responsive Designs wurde Bootstrap als ein umfangreiches und dennoch schlankes Mobile-First Frontend-Framework eingesetzt. Nach Fertigstellung der Prototypen wurden diese als neue Seiten- und Extensions-Templates in das TYPO3-System integriert und das Portal durch funktionale Erweiterungen zur Optimierung von Gewinnspielen, Kundenrat, Newsletter-Anmeldung, Suche, Einkaufszettel-Funktion, etc. zusätzlich verbessert.

Ein Highlight war, dass die Marktsuche von Google Maps auf OpenStreetMap umgezogen wurde, um von den individuellen Darstellungsmöglichkeiten zu profitieren, Lizenzkosten einzusparen und ein eigenes Hosting sicherzustellen. Darüber hinaus wurde auch die Rezeptsuche neu aufgesetzt, komplett auf Apache Solr migriert sowie optisch an die neue Designlinie angepasst.

Icons wurden ausschließlich im SVG-Format eingebunden und das Picture-Tag für die verschiedenen Auflösungsstufen von Bildern genutzt, um damit einerseits eine bessere Skalierbarkeit und andererseits eine Reduzierung von Ladezeiten im Rahmen des Responsive Designs zu ermöglichen.

Ebenso wurde bei dieser Gelegenheit eine Systembereinigung durchgeführt und obsolet gewordene Funktionen sowie Inhalte entfernt. In einer der letzten Projektphasen vor dem Going Live unterstützten wir den Auftraggeber dabei, die bestehenden Inhalte in die neuen Seitenraster zu überführen und führten Anwenderschulungen durch. Damit sich die Redakteure von tegut... schnell mit den Systemumstellungen vertraut machen konnten, bereiteten wir über die Schulungsangebote hinaus auch eine im Browser abrufbare Benutzeranleitungsowie technische Dokumentationen auf. Anschließend konnte die neue Website produktiv geschalten werden.

Darüber hinaus wurde der Funktionsumfang nach der Liveschaltung durch eine Verknüpfung der Datentypen (Produkte, Rezepte, Märkte und News) um die Möglichkeit bereichert, Querverweise in Form von Widgets auszugeben, um damit bspw. in einem Rezept verwendete Produkte in der Rezeptansicht automatisiert zu verlinken und dem Besucher damit eine komfortable User-Journey bereitzustellen. Auch die Newsletter-Anmeldung wurde durch die Entwicklung eines neuen Plugins für eine generische Newsletteranmeldung auf den neuesten Stand der Technik gebracht. Abgeschlossen wurde das Projekt mit dem Ausbau des System-Monitorings durch eine erweiterte Testabdeckung sowie neuen Qualitätssicherungsmaßnahmen, die Stabilität und Sicherheit des TYPO3-Systems langfristig sicherstellen.

Projektergebnis

Mit dem Relaunch der tegut... Website erhält der Lebensmittelhändler einen zukunftssicheren und leistungsfähigen Internetauftritt, der mit seiner modernen Gestaltung die Markenwerte von tegut... optimal vermittelt und nun auch eine komfortable Bedienung auf mobilen Devices zulässt. Durch die responsive und barrierefreie Umsetzung ermöglichen wir den tegut...-Kunden unabhängig von Endgeräten und technischen Einschränkungen immer und überall eine vollwertige digitale Markenerfahrung. Die Besucher der tegut.com haben die Neuerungen sofort positiv angenommen. Durch einen professionellen Usability-Test ließen wir uns die neue Bedienfreundlichkeit von unabhängigen Test-Usern und unter Nutzung verschiedener Endgeräte - von Smartphones, über Tablets, bis hin zu Desktops - bestätigen. Durch die verwendeten Open Source Softwarekomponenten TYPO3, Apache Solr, Bootstrap und OpenStreetMap konnten wir die konzeptionell-inhaltlichen Wünsche von tegut... optimal technisch umsetzen. Damit haben wir zugleich beste Vorraussetzungen geschaffen, um in unserer zukünftig weiteren Zusammenarbeit mit tegut... flexibel die nächsten inhaltlichen Ideen und technischen Bedarfe realisieren zu können.