Redesign der tegut...–Website mit Fokus auf Responsive Design und Usability-Optimierung
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.
Leistungen
- Barrierefreies Webdesign,
- CMS Entwicklung,
- Enterprise-Search-Entwicklung,
- UI/UX-Design,
- Online-Marketing
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 Voraussetzungen geschaffen, um in unserer zukünftig weiteren Zusammenarbeit mit tegut... flexibel die nächsten inhaltlichen Ideen und technischen Bedarfe realisieren zu können.
In der DMK E-BUSINESS GmbH haben wir einen verlässlichen Partner gefunden, mit dem wir das umfangreiche Relaunch-Projekt der neuen tegut.com erfolgreich umsetzen konnten. Durch kreative Ideen, konstruktiven Austausch und einen guten Support wurde unsere Corporate Website optimal auf das “Next Level” gehoben: modern, responsiv und gestalterisch auf unsere neue Markenidentität abgestimmt. Der abschließende Usability-Test zeigte, dass die Website nicht nur unsere Erwartungen, sondern vor allem die unserer Kunden erfüllt. Wir freuen uns darauf, die tegut.com auch in Zukunft gemeinsam mit der DMK E-BUSINESS GmbH weiterzuentwickeln.
Matthias Sandlos, Teamleiter Online der tegut… Lebensmittel GmbH & Co. KG
Ziel des Projektes
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 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 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 Benutzeranleitung sowie 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.
Wir unterstützen Ihre Projekte
Schreiben Sie uns, wir rufen Sie zurück!