Umfangreiches Redesign mit Usability-Optimierung und Erstellung eines Web-Styleguides für tegut...

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.

Ziel des Projekts:

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.

Startseite der neu gestalteten Website der tegut... gute Lebensmittel GmbH & Co. KG

Projektvorgehen:

Eingeleitet wurde das Projekt mit einer umfangreichen Konzeptionsphase, welche die Durchführung der tegut…-internen Workshops zur Anforderungsanalyse aus den einzelnen tegut…-Fachbereichen sowie die Analyse des IST-Standes umfasste. Im Anschluss an das Konzeptionsprojekt fand eine Konsolidierung mit 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ührt und 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 Open Street Map 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 Benutzeranleitung sowie technische Dokumentationen auf.

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 mobile Devices zulässt. In einer weiteren Projektphase soll der Funktionsumfang sukzessiv erweitert, ein professionelles Usability-Testing durchgeführt und das System-Monitoring um neue Oberflächentests angereichert werden.