Vom Katalog zum Online-Shop für den Marktführer im Bereich Premium-Reitsportzubehör

Von analog zu digital – Digitalisierung mit Anspruch

Wie schafft man es vollständig individualisierbare, handgefertigte Produkte im Premium-Segment digital und interaktiv für Endkunden, sowie Händler gleichermaßen erlebbar zu machen? Welche Schritte sind notwendig, um vom analogen Print-Katalog zu einer digitalen Konfiguration und Bestellabwicklung zu kommen?
— Wir haben die Antworten.

Für den führenden Hersteller von Premium Reitsport-Zubehör MATTES haben wir ein ganz besonderes, digitales Einkaufserlebnis kreiert. Kunden haben durch Digitalisierung nun die Möglichkeit im MATTES Online-Shop, sowie auch am POS einfach und intuitiv durch nur wenige Klicks ihr ganz persönliches MATTES-Produkt mithilfe von unzähligen Optionen zu konfigurieren und direkt zu bestellen. Die anschließende Produktion und Bestellabwicklung erfolgt selbstverständlich vollkommen digital und automatisiert.

---

Herausforderung

Nachdem wir einen im Reitsport-Bereich einzigartigen Produkt-Konfigurator für den B2B-Bereich entwickelt hatten, haben wir es uns mit MATTES zur Aufgabe gemacht diesen nicht nur am POS auf einem Tablet, sondern auch in einem Online-Shop für Endkunden zur Verfügung zu stellen. Die individuelle Produktvielfalt und unzähligen Konfigurationsmöglichkeiten der Premium-Reitsportprodukte von MATTES sollen nun auch uneingeschränkt im Bereich B2C für anspruchsvolle Reiter ganz einfach zu Hause am Computer oder Tablet nutzbar sein.

Eine der größten Herausforderungen bestand darin, den bereits für den B2B-Bereich entwickelten POS-Konfigurator, speziell optimiert für die Darstellung auf dem iPad, nahtlos in ein Shop-System wie Magento 2 zu implementieren und für die responsive Desktop-Verwendung anzupassen.

Um den Sprung von analog zu digital elegant zu meistern war es unbedingt notwendig Kernprozesse und Strukturen, wie z. B. Artikelnummern, die gesamte Bestellabwicklung bis zur Produktion, von Grund auf neu zu denken und auf die erweiterten Anforderungen im Bereich E-Commerce vorzubereiten.

Daten und Fakten
Kunde	MATTES Reitsport
Projekt	shop.mattes-reitsport.com
Bereich	E-Commerce B2C
Jahr	2017
Zeitraum	6 Monate
System	Magento 2.1.7
Technik	HTML5, CSS3, PHP, Javascript

Technologie

Die Wahl des richtigen Shopsystems

Nach langer Recherche und Prüfung der technischen Anforderungen, haben wir uns bewusst für Magento 2 entschieden. Bei der Wahl spielten nicht nur technische Aspekte wie Schnittstellen, Erweiterungen und Anpassungsmöglichkeiten eine große Rolle, sondern auch insbesondere Ergonomie, Sicherheit und Skalierbarkeit waren maßgeblich ausschlaggebend.

Kompatibilität der Produktstruktur

Die mit Abstand wichtigste Anforderung an das Shopsystem war jedoch die Möglichkeit, den von uns entwickelten Produkt-Konfigurator nahtlos in die Struktur des Front- und Backends implementieren zu können. Dies bedeutete, dass das Shopsystem mit unüblich großen Mengen von Optionen pro Produkt performant umgehen können und gleichzeitig alle nötigen Schnittstellen für die Kommunikation zwischen Konfigurator, Shopsystem und Warenwirtschaft anbieten muss.

Magento 2 als Shopsystem

In diesem Bereich spielt Magento 2 seine Stärken voll aus und hat sich im Vergleich zu anderen Shopsystemen, wie z. B. Shopware für dieses Projekt durchgesetzt. Nicht zuletzt sind auch das moderne Backend, sowie die umfangreiche Community ein großes Plus.

Systemaufbau und Anatomie für den B2B- und B2C-Einsatz

Abbildung — Die Schnittmenge zwischen B2C und B2B-Bereich bildet der Konfigurator

Das Herzstück: Der Konfigurator

Die Produkte von MATTES können mit Millionen von Optionen und Farben gestaltet werden. Die Auswahl dieser Optionen durch Dropdown-Felder wäre viel zu kompliziert. Aus diesem Grund haben wir den Produkt-Konfigurator für MATTES-Produkte entwickelt. Um den bereits für den POS entwickelten Produkt-Konfigurator in einem Magento 2 Front- und Backend vollständig zu implementieren mussten beide Systeme zuerst fein aufeinander abgestimmt werden. Ziel war es von Anfang an ein durchgehendes, intuitives Einkaufserlebnis für den User zu erzeugen, in dem sich der Produkt-Konfigurator nahtlos in einen natürlichen Kauf- und Bestellprozess einfügt und nicht als Fremdkörper innerhalb der User Experience wahrgenommen wird.

Nahtlos eingebettet statt Stand-alone

Der Konfigurator sollte jedoch nicht als eigene Applikation aufgerufen, sondern organisch in den Kaufprozess des Online-Shops eingebettet werden, um dem User ein gewohntes Einkaufserlebnis zu bieten. Aufgrund dieser Tatsache haben wir uns für die Implementierung des Konfigurators direkt auf Produkt-Ebene entschieden, anstatt ihn als Stand-alone-Lösung zu integrieren.

Dynamisches Konfigurator-Overlay

Jedes Produkt hat, wie in einem gewöhnlichen Online-Shop, eine eigene Produktseite, auf der nur die Optionen geladen werden, die für dieses einzelne Produkt benötigt werden. Der Konfigurator wird über der eigentlichen Produktseite als Overlay angezeigt und lädt dynamisch nur die Konfigurations-Module, die für das aktuell gewählte Produkt nötig sind. Dies hat einige signifikante Vorteile: Es reduziert die Ladezeit, verhindert einen eigenen Pageload und fügt den Konfigurator nahtlos in die Produktseite ein. Mit dieser Lösung kann sich der User zuerst über eine gewöhnliche Produktseite umfassend über Details zum Produkt informieren und dann sofort mit der Individualisierung loslegen.

Visuelle Auswahlhilfe für Produkt-Optionen

Sobald der User das Produkt konfigurieren möchte, wird der Konfigurator mit nur einem Button-Klick asynchron als eigener Layer direkt auf der Produktseite geladen und steht direkt ohne merkbare Ladezeit zur Verfügung. Das Konfigurator-Overlay führt den User Schritt für Schritt visuell aufbereitet durch alle möglichen Optionen und stellt diese in einer Live-Ansicht direkt auf dem Produkt an einem austauschbaren Pferd dar. Im Hintergrund werden synchronisiert alle Zusatzoptionen auf der Produktseite ausgewählt und das erstellte Produkt in den gewöhnlichen Magento-Warenkorb gelegt. Mithilfe eines normalen Checkouts kann das Produkt nun bestellt werden. Der Konfigurator dient somit lediglich als erweiterte, visuelle Auswahlhilfe mit Schritt-für-Schritt-Anleitung und Live-Ansicht des Produkts. Alle üblichen Vorgänge im Magento-Shop bleiben unverändert.

Video — Der Konfigurator wird direkt auf der Produktseite als Overlay geladen

Design

Minimalismus trifft auf Funktionalität

Bei der Gestaltung des Layouts legten wir die Gewichtung deutlich auf Klarheit und Ergonomie aus. Die Farbwahl für Layout-Elemente ist bewusst monochrom gewählt, um den außergewöhnlichen Produkten eine Leinwand zur perfekten Darstellung zu bieten. Das User Interface ist keinesfalls aufdringlich oder prominent, sondern hält sich dezent zurück. Somit gibt es den Produkten das alleinige Spotlight und steht dem User bei Bedarf immer an richtiger Stelle zur Verfügung. Durch den Einsatz von farbenfrohen Produktbildern auf der einen und monochromem Layout auf der anderen Seite entsteht ein spannender Kontrast, der die Produktvielfalt und Individualisierung als Alleinstellungsmerkmal (USP) bestens zur Geltung bringt.

Mut zur Farbe

So wie die Anforderungen und Wünsche eines jeden Reiters und seines Pferdes, sind auch alle Produktbilder einzigartig zusammengestellt. Um die unendliche Vielfalt der Konfigurationen darzustellen, haben wir die Produkte zunächst in verschiedene Ausstattungsvarianten und Gruppen eingeteilt und mit einem spezifischen Farbschema pro Produkt versehen. Durch diese Präsentation erkennt der User schnell die Unterschiede und kann stets die beste Option wählen. Mit dieser Lösung stehen sich Konsistenz und Vielfalt nicht im Konflikt, sondern profitieren vielmehr voneinander. Die Ausstattung auf den Produktbildern reicht von der empfohlenen, bestmöglichen Konfiguration in mehreren Stufen bis zum Grundprodukt ohne Zusatzoptionen, um Luxus- sowie auch Basis-Ansprüchen des Reiters gleichermaßen gerecht zu werden.

Abbildung — Beispiel-Konfigurationen werden hierarchisch nach Ausstattung präsentiert

Produktabbildungen stets im richtigen Format

Ein Sattelgurt sieht anders aus, als ein Pad — diese Tatsache musste im Layout ganz besonders berücksichtigt werden. Um jede Produktgruppe optimiert zur Geltung zu bringen, haben wir aufgrund dessen einen responsiven und völlig dynamischen Fullscreen-Produktslider entwickelt. Dieser stellt die Abbildungen der verschiedenen Produktgruppen wie z. B. Pads, Gurte und Reitdecken trotz großer Format-Unterschiede immer im richtigen Bildformat dar und passt sich dynamisch in Höhe, Breite und Anzahl der Bilder neu an. Auf sehr großen Bildschirmen erweitert sich die Anzahl der gezeigten Produkte entsprechend dem zur Verfügung stehenden Platz.

Video — Der Produkt-Slider passt sich dynamisch an Produkt und Anzeige an

Content

Auf einen Blick

Die Darstellung der Produkte und Kategorien sollen auf einen Blick das gesamte Produktspektrum von MATTES abbilden und einen direkten Zugang zur gewünschten Kategorie mit nur einem Klick ermöglichen. Mit dieser flachen Hierarchie in der Haupt- und Content-Navigation gelangt der User stets ohne Umwege und mit nur wenigen Klicks zum gewünschten Produkt. Zudem wird der User auf Kategorie- und Produktseiten durch relevante Artikel-Teaser und Cross-Selling Elemente durch das Produktspektrum geführt und findet somit sein Lieblingsprodukt.

Produkt-Abbildungen mal anders

Wie erstellt man Produktbilder für Artikel mit Millionen von Konfigurationsmöglichkeiten?

Um diese große Herausforderung zu meistern, mussten wir einen völlig neuen Ansatz verfolgen. Denn die traditionelle Art und Weise, Produktfotos in einem Studio zu machen und diese über die Postproduktion mit den entsprechenden Farben und Ausstattungen zu versehen, war aufgrund des unheimlich hohen Aufwands nicht ohne Weiteres möglich. Aus diesem Grund haben wir uns für ein anderes, effizienteres Konzept entschieden.

• Alle Layer
• Texturlayer
• Live-Vorschau
• Konfigurator

Die Idee: Entwicklung eines Export-Tools für Produkt-Abbildungen

Alle Bilder sollten direkt aus dem von uns erstellten POS-Konfigurator in hoher Auflösung exportiert werden können. Speziell für diesen Zweck haben wir ein Tool entwickelt, mit dem es einfach und schnell möglich ist, Farben und Ausstattungen jeglicher Produkte zu kombinieren, Bilder in hoher Auflösung direkt aus der Produktansicht des POS-Konfigurators zu exportieren und für die Integration im Shop vorzubereiten. Somit werden nun alle Bilder vollkommen digital erstellt und müssen nicht fotografiert werden.

Effizient und agil auch in Zukunft

Ein großer Vorteil im Bereich Content-Management: Mit dieser Funktion lassen sich auch zukünftig einfach und bequem Produktbilder und Farbkombinationen aller MATTES-Produkte austauschen und ergänzen, ohne aufwendige Studio-Fotografie oder Bildbearbeitung betreiben zu müssen. Diese Lösung spart nicht nur Zeit und Kosten, sondern ist auch agil und vielseitig für andere Aktionen, wie z. B. im Marketing, einsetzbar. Unser Kunde kann somit bequem selbst Produktbilder erstellen und aktualisieren, ohne Agentur-Leistungen in Anspruch nehmen zu müssen.

Die Vision von Herrn Peter Mattes

Abbildung — Elke Jordan-Mattes und Peter Mattes im Interview

Wer schon einmal mit Herrn Peter Mattes über Reitsport-Produkte sprechen konnte, weiß genau, dass er sein umfangreiches Wissen aus jahrzehntelanger Erfahrung in die Perfektionierung eines jeden Produkts steckt. Deshalb fanden wir es besonders wichtig diese einmalige Philosophie und Innovation auch online zum Kunden zu transportieren.

Um diese schwierige Aufgabe zu lösen haben wir uns Hilfe von einem professionellen Redakteur und Texter geholt, der gezielt aus Interviews, Fachwissen und Dokumenten umfassende Texte für den Online-Shop generiert hat. Nur durch intensive Auseinandersetzung mit den Produkten, den Funktionen und Einsatzbereichen gelang es ihm komplexe Informationen leicht verständlich zu verpacken. Auf diese Art und Weise ist es möglich die Vision und den wissenschaftlichen Kontext von Herrn Mattes durch Artikel, Video-Beiträge und Informationen dem User des Online-Shops zu zeigen und näher zu bringen.

Redaktionelle Artikel mit Mehrwert

Der Verkauf von Reitsport-Produkten ist sehr beratungsintensiv und muss stets individuell auf das Pferd und den Reiter abgestimmt werden. Aufgrund dessen muss vor allem im Internet besonderen Wert auf die Erklärung und Beratung in Form von Anleitungen, Tabellen und Informationsseiten gelegt werden. Die Aufgabe, die üblicherweise der Kundenberater in einem Ladengeschäft übernimmt, muss nun durch das Bereitstellen von verständlichen Informationen erfüllt werden. Um die passenden Informationen an der richtigen Stelle zu gewährleisten haben wir redaktionelle Artikel zu verschiedenen Themen (z. B. „Richtige Pflege“ oder „Sattelgurt messen“) erstellt, die den Kauf eines MATTES-Produkts umfassend begleiten und den Kunden so zum passenden Produkt führen. Dies mindert nicht nur die Rate von Reklamationen, sondern minimiert auch den Aufwand im Telefon-Support und räumt Missverständnisse aus dem Weg.

Erfolgreiches Content-Marketing

MATTES wird somit durch effizientes Content-Marketing nicht nur als Online-Shop, sondern auch als zentrale Anlaufstelle für Informationen im Bereich Sattelunterlagen, Sattelgurte und Reitsportzubehör platziert. Kunden, die sich z. B. nur über das richtige Messen von Sattelgurten erkundigen wollten, werden von Suchmaschinen in den Online-Shop geleitet und durch relevante Aufklärung direkt zum passenden Produkt geführt. Diese Strategie führt zu einer höheren Conversion-Rate, da hilfreicher Content mit direktem Produktmarketing verbunden wird.

Weitere Ausbaustufen in Planung

Außerdem sind vor allem in diesem Bereich noch weitere Hilfestellungen zum Kauf von Reitsport-Zubehör online geplant. Ein Produktfinder zur richtigen Wahl des Produkts, sowie ein Rechner für die Bestimmung der richtigen Größe des gewünschten Produkts sind bereits konzipiert und werden zusätzlich realisiert, um dem Usern ein noch umfangreicheres und rundum vollständiges Einkaufserlebnis zu bieten.

Vertragshändler und Ladengeschäft

Lokale Händler sehen einen Online-Direktvertrieb oft als Benachteiligung des Einzelhandels in den Geschäften an. Wir haben es uns mit MATTES zur Aufgabe gemacht den Händlern diese Angst zu nehmen und sie nachhaltig durch die Online-Präsenz von MATTES zu stärken. Hierzu haben wir eine Bestellweiche und Händlersuche integriert, die beim Kauf von MATTES-Produkten online direkt auf die Vorteile des Einzelhandels hinweist und dem User die Wahl gibt, ob er nun direkt online oder doch mit professioneller Beratung im Einzelhandel bestellen möchte. Somit hat der User die Wahl, ob er direkt online zum UVP kauft oder doch flexibel bei einem Händler beraten werden möchte. Diese Händler-Bindung wird auch durch ein Premium-Händler-Programm von MATTES weiter gefördert und unterstützt.

Internationalisierung und Lokalisierung

Da MATTES ein international agierendes Unternehmen ist, soll der Online-Vertrieb nicht nur in Deutschland stattfinden, sondern auch auf weitere Länder ausgeweitet werden. Die Nachfrage aus dem Ausland stieg insbesondere durch den Online-Shop mit Konfigurator deutlich an und wird strategisch in den folgenden Jahren sukzessive auf weitere Länder ausgeweitet. Aufgrund dieser Strategie werden alle Systeme in Währung und Sprache lokalisiert und spezifisch als Satelliten-Seiten für das jeweilige Land angepasst und verwaltet. Dieses Setup bietet MATTES strategisch eine flexible Grundlage, um auch international erfolgreich zu sein.

Ergebnis

Zusammen mit MATTES haben wir es geschafft einen Online-Konfigurator zu entwickeln, der im Reitsport so einzigartig ist, wie die Qualitäts-Produkte von MATTES. Der Kunde erschließt sich mit dem Online-Geschäft einen völlig neuen Vertriebskanal und stärkt bestehende Strukturen, indem er diese nachhaltig digitalisiert. Auf dieser Basis steht einer internationalen Weiterentwicklung des Marktführers nichts im Wege. Wir freuen uns auch in Zukunft bei weiteren Ausbaustufen an der Seite eines solch innovativ denkenden Kunden mitwirken zu dürfen und stellen uns jeder neuen Herausforderung, die diese spannende Aufgabe mit sich bringt.