"7thSENSE hat beim Relaunch unseres Shops weitaus mehr getan, als nur ein paar Updates durchzuführen: Design, Funktionen, Layout - alles wurde von Grund optimiert. Dabei sind auch einige komplett neue Features, wie beispielsweise unsere neue Shop the Look-Funktion, dazu gekommen. Und dank der Performance-Optimierungen läuft der Odlo-Shop jetzt noch schneller und stabiler als je zuvor."

Firmenprofil

Die Odlo Trading AG ist weltweit als Hersteller hochwertiger Sportfunktionsbekleidung bekannt. Derzeit beschäftigt das 1946 in Norwegen gegründete Unternehmen fast 750 Mitarbeiter im Schweizer Hauptsitz, Europa und den USA. Die Kleidung von Odlo wurde für ihr Design bereits mehrmals mit dem red dot design award ausgezeichnet und wird gerade von Wintersportlern aller Disziplinen hoch geschätzt. Odlo-Produkte werden weltweit an über 4.500 Orten verkauft, darunter auch in einer Reihe eigener Odlo-Stores.

Anforderungen

Nachdem bereits die Corporate Website der Odlo AG auf Basis der neuen CI-Richtlinien des Unternehmens neu entwickelt wurde, sollte auch die E-Commerce-Plattform des Spezialisten für Sportfunktionskleidung einem Relaunch unterzogen werden. Neben der Anpassung an das aktuelle Corporate Design standen dabei auch die Aktualisierung der technischen Basis – gebildet von der Magento Enterprise Edition – sowie die grundlegende Optimierung des Gesamtsystems im Vordergrund.

Umsetzungsdetails

Updates an einem bestehenden System bergen immer ein gewisses inhärentes Risiko – insbesondere, wenn dabei sowohl der Core der E-Commerce-Plattform als auch eine Vielzahl von installierten Extensions aktualisiert werden sollen. Um hier einen möglichst reibungslosen Projektverlauf zu gewährleisten, wurde zunächst das komplette Odlo-System auf eigene Server dupliziert, die in ihrer Konfiguration exakt dem späteren Live-System entsprachen. In diesem Entwicklungssystem wurden zunächst alle im System vorhandenen Extensions deinstalliert und darauf folgend das Update des Magento-Cores durchgeführt. Die zuvor entfernten Module wurden dann – sofern sie auch nach dem Relaunch noch benötigt wurden – wieder Stück für Stück installiert und einzeln auf ihre Kompatibilität mit dem neuen System optimiert.

Das neue Screendesign wurde von 7thSENSE erstellt. Als Basis diente hier die Odlo-Corporate Website, deren Gestaltung an die Bedürfnisse und Usability-Anforderungen einer E-Commerce-Plattform adaptiert wurde. Bei der Konzeptionierung des Designs wurde ein großes Augenmerk auf die, im Zuge des Relaunchs in ihrer Tiefe und Komplexität stark reduzierte, Kategoriestruktur des Odlo-Shops gelegt. Der neue, vergleichsweise flach gehaltene Kategoriebaum wurde, im Dialog zwischen Odlo und 7thSENSE, mit dem Ziel entworfen die Übersichtlichkeit zu erhöhen und es somit den Kunden zu erlauben schneller und einfacher zu den von ihnen gesuchten Produkten zu gelangen. Für ein spezifischeres Navigieren auf der E-Commerce-Plattform steht den Besuchern neben einer fehlertoleranten Freitextsuche – realisiert über einen eigenen Solr-Suchserver – auch eine ausführliche, im Vergleich zum Magento-Standard stark erweiterte, Filternavigation zur Verfügung, die ein exaktes Eingrenzen der Artikelauswahl ermöglicht.

Im Content-Bereich der Kategorieseiten können per Backend-Einstellung sämtliche Unterkategorien mit den vier ersten in ihnen enthaltenen Produkten dargestellt werden. Die Einstellung kann hierbei auf der Ebene der einzelnen Kategorien vorgenommen werden. So bekommt der Kunde auch auf den Kategorieseiten der oberen Ebenen einen Eindruck von dem Umfang des Gesamtsortiments.

Odlo produziert die meisten seiner Produkte in einer Vielzahl von teilweise stark unterschiedlichen Farb- und Designvarianten. Damit der User nicht erst auf der Produktseite einen Überblick über die verschiedenen Designs bekommt, kann er sie sich bereits auf den Kategorieseiten anschauen: Bewegt er seinen Cursor über ein Produkt, so wird darunter eine Slideshow mit den derzeit verfügbaren Varianten des jeweiligen Produkts eingeblendet. Bewegt er seinen Cursor nun über eine dieser Varianten wird das Hauptproduktbild ausgetauscht und ermöglicht so eine detailliertere Ansicht. Um zu vermeiden, dass der Server dabei unnötiger Last ausgesetzt wird, erfolgt das Laden der zusätzlichen Produktbilder erst bei Bedarf über AJAX.

Auf der Produktdetailseite kommen die Fotos der Odlo-Kleidungsstücke dank der großen für sie reservierten Fläche ganz besonders zur Geltung. Eine Zoom-Funktion erlaubt es hier obendrein sich jeden Ausschnitt des Produktbildes in seiner ursprünglichen Auflösung anzuschauen und so jedes noch so kleine Merkmal genauer unter die Lupe zu nehmen. Aber auch die übrigen Elemente auf der Produktdetailseite rücken die Bedürfnisse des Anwenders ganz in den Mittelpunkt: Die Auswahlfunktionen für Farben und Größen sind zusammen mit dem Warenkorb-Button direkt neben dem Produktbild angeordnet. Beschreibungstext und Produktdetails befinden sich darunter. Diese Anordnung erlaubt es die wichtigsten Informationen und Shop-Funktionen einzusehen, ohne die Seite scrollen zu müssen.

Im Zuge des Relaunchs wurde das E-Commerce-System zudem um ein „Shop the Look“-Feature bereichert. Diese Funktionalität ermöglicht es den Produktmanagern eigene, aufeinander abgestimmte Sets – beispielsweise auch T-Shirt, Pullover, Jacke und Hose – zusammenzustellen. Diese Looks können dann im Frontend auf jeder beliebigen Kategorieseite angezeigt werden. Ein Klick auf den Look führt den Besucher zur Look-Detailseite. Hier wird der Look mit einem großflächigen Foto in seiner Gesamtansicht präsentiert. Der Kunde muss nur noch die Größe und Farbe der einzelnen Kleidungsstücke auswählen und kann dann alle Produkte mit einem einzigen Klick direkt in den Warenkorb legen. Zusätzlich werden die Looks automatisch im Up-Selling-Bereich der ihnen zugeordneten Produkte beworben.

Zur Optimierung der Performance wurde die bestehende Datenbank der Magento Enterprise Edition optimiert und um nach dem Relaunch nicht mehr benötigte Einträge bereinigt. Für eine zusätzliche Optimierung der Ladezeiten sorgt eine strikte Trennung von Datenbank und Magento-Instanz auf jeweils eigene Server. Im Frontend werden die meisten, nicht sitzungs-spezifischen Inhalte durch einen Varnish-Cache statisch vorrätig gehalten. Um dennoch die Aktualität der Datenbasis – insbesondere der Verfügbarkeitsanzeigen – zu garantieren, wird der Cache sowohl nächtlich als auch nach einer Bestellung aktualisiert. Im letzteren Falle sind selbstverständlich nur die soeben bestellten Produkte von der Aktualisierung betroffen.

Sowohl von technischer Seite als auch in Sachen Usability war der Odlo E-Commerce-Relaunch ein voller Erfolg. Die Änderungen an der Navigationsstruktur erlaubt ein schnelleres Auffinden der gewünschten Produkte, die neuen Frontend-Features begeistern sowohl Kunden als auch Produktmanager und die Optimierungen an Datenbank, Servern und Cache erlauben ein blitzschnelles Ausliefern der Seiten.

Case Study als PDF herunterladen
Projekt

Odlo Relaunch

Kunde

Odlo Trading AG

Markt

Sportfunktionskleidung

Zielsetzung

Relaunch und Optimierung eines bestehenden E-Commerce-Systems

Bereich

Beratung & Consulting
Workshop
Design & Kreation
Konzeption
Web-Programmierung
Extension-Programmierung
Schnittstellen-Programmierung
ERP-Anbindung
Produktsuche
Providing
Support
Betreuung und Betrieb
Zahlungssysteme
CRM-Anbindung
Usability-Optimierung