1'042 Seiten umfasste der gedruckte Produktkatalog von Compona. Über 40’000 verschiedene Steckerteile, Werkzeuge, Zubehör und unzählige Spezifikationen waren darin aufgeführt. Zwar existierte bereits ein Web-Katalog, dieser wusste aber aufgrund unzureichender Übersicht und langer Ladezeiten nicht vollends zu überzeugen – weshalb die meisten Kunden weiterhin auf den Print-Wälzer zurückgriffen.
Als attraktive Alternative musste ein neuer Webshop mit deutlich verbesserter Usability und Performance her – komplexe Produkte sollten möglichst einfach und zielgruppengerecht zugänglich gemacht werden.
Dazu führte Eyekon im Rahmen eines agilen Vorprojekts mehrere Workshops mit Compona durch und prüfte methodisch verschiedene Optionen für die optimale User Experience.
Durchgesetzt hat sich ein dynamisches Konzept, das den Usern erlaubt, über verschiedene Wege zum gewünschten Produkt zu gelangen. Schliesslich sollte mit der neuen Plattform nicht mehr nur die etabliere B2B-Kundschaft angesprochen, sondern auch ein Einstieg für Endkunden ermöglicht werden – und Entwickler von Prototypen haben nun einmal ein anderes Suchverhalten als strategische Einkäufer von Grossunternehmen.
Eine hochperformante Live-Search-Engine richtet sich deshalb an Kunden, die mit der technischen Materie vertraut sind und bereits konkrete Vorstellungen oder Informationen, wie beispielsweise Produktnummern, haben. Sie lässt sowohl eine Volltextsuche als auch die Suche nach Tags zu, aktualisiert die Resultatliste während des Eintippens und erreicht Antwortzeiten von 100 Millisekunden.
Für eine eher explorative Suche nach Kriterien setzen wir auf ein innovatives Commerce-Feature – den eigens fürs den Compona-Shop entwickelten «Treefinder». Über die Verschmelzung zweier UI-Elemente (Drop Down und Tree View) gibt er dem User die Möglichkeit, intuitiv hierarchische Filter zu setzen und so ausgehend vom Hersteller oder von der Funktion zur relevanten Produktliste vorzudringen. Jede Interaktion mit dem Treefinder generiert ein Filter-Kriterium als Tag, welcher auch wieder gelöscht werden kann.
Dass die enorme Datenmenge so performant und mit wenigen Klicks durchforstet werden kann, ist der innovativen Daten- und Systemarchitektur von Intelliact zu verdanken, welche auf React-Redux basiert und über eine schlanke Middleware die Systeme PIM (OpusCapita) und ERP (Abacus) direkt und unmittelbar an den Webshop koppelt. Für die Such- und Filterfunktionen wurde auf die leistungsstarke Search-Engine von Algolia gesetzt, die mit dem auf React basierenden Frontend eine hervorragende Performance ermöglicht. Für Shop-unabhängigen Content wie Firmeninformationen wird bewusst nur ein kleines CMS (Kirby) verwendet, da dieser Aspekt nicht im Vordergrund stehen sollte.
Mit diesem Best-of-Breed-Ansatz können wir direkt auf die spezialisierten Kernfunktionen der jeweiligen Systeme zugreifen und den langsamen und schwerfälligen Umweg über eine spezialisierte Shopsoftware vermeiden. Typische Suchanfragen werden von Algolia in rund 50 Millisekunden beantwortet – mit dem Rendern ergibt dies normalerweise Antwortzeiten von circa 100 Millisekunden. Bilder werden von einem globalen CDN (Imgx) ausgeliefert und somit auch bei langen Ergebnislisten schnell dargestellt.
Die Ergebnislisten überzeugen aber nicht nur durch saubere Aufbereitung, sondern auch durch ihre Dynamik: Sie lassen eine Personalisierung zu. Indem der Kunde beliebig Spalten mit Zusatzinformationen verschiebt, hinzugefügt oder löscht, kann er die Shop-Ansicht nach seinen Wünschen gestalten. Diese Funktion ist ein Novum in der E-Commerce-Landschaft und spricht vor allem Poweruser, meist Einkäufer von Grossunternehmen, an.
Noch weiter steigern wir die Experience an diesem Punkt des Kaufprozesses mit einer integrierten, intelligenten Empfehlungs-Engine: Zu jedem Suchergebnis schlägt der Shop, sofern vorhanden, passende Werkzeuge, Komplementär- oder Substitutionsgüter vor.
Auch wenn die neuen Shop-Funktionen bereits viel von der Beratungsleistung übernehmen: Die Beschaffung von Steckverbindern ist komplexer, als es auf den ersten Blick scheint – ganz ohne Rückfrage kann der Kauf häufig nicht abgeschlossen werden. Aus diesem Grund wurde eine über die gesamte Journey verfügbare Chat-Funktion eingebaut, die die direkte Kommunikation mit den Fachspezialisten von Compona erleichtert. Mit dem eingesetzten System von Olark sieht der Compona-Berater auf einen Blick, wo der User im Shop steht, und kann entsprechenden Support anbieten.
Dass ein eingeloggter User im Shop direkt seine eigenen, persönlichen Preise und Konditionen zu sehen bekommt, versteht sich durch die direkte Anbindung an das ERP (Abacus) von selbst. Der Verzicht auf ein separates Shop-System hat auch im Checkout-Prozess seinen Vorteil. Dieser orientiert sich zwar an den Best-Practices der etablierten Systeme, wurde aber in entscheidenden Details optimiert. So kann z.B. ein Kundenkommentar zu einem beliebigen Artikel hinterlegt werden. Als Payment-Provider kommt die bewährte Technologie von Datatrans zum Einsatz.
Ein responsives Design – umgesetzt rein mit CSS – sorgt für eine optimierte Darstellung auf allen Endgeräten. Obwohl es sich um eine Single-Page-App (React-Redux) handelt, kann jede Page über eine eigene URL aufgerufen werden. Das Rendering mit Javascript ist für den Google-Bot kein Problem. Andere Bots (Facebook, Bing, etc.) erhalten direkt das HTML und CSS ohne Javacript ausgeliefert, damit die Seiten indexiert werden können. Der Google Lighthouse-Score für SEO liegt somit bei 100 Prozent.
* Angabe Compona.
Zeitraum seit Go Live (01.09.2018 - 01.02.2019), im Vergleich zum Vorjahr (01.09.2017 - 01.02.2018).
** Google Analytics.
Zeitraum seit Go Live (03.09.2018 - 01.02.2019), im Vergleich zum Vorjahr (04.09.2017 - 02.02.2018).
Zahlen im Vergleich zum Vorjahr: türkis/violett = Gesamtuser, orange/gelb = Desktop, grün/blau = Mobile. Das Zeitfenster ist zugunsten eines deckenden Wochenverlaufs um einen Tag verschoben. Der Einbruch im Dezember/Januar ist auf die Feiertage/Ferien zurückzuführen.
Deep-Links:
compona.com/product/1898367/de/dose-rund-m12-5p-schraubklemm-9904368205
Diese Produkt-Detailseite zeigt die Vorschläge der Empfehlungs-Engine (unter «Weitere und verwandte Produkte») optimal auf.
compona.com/catalog/de
Unter diesem Link finden Sie eine Produktübersicht und können unter «Darstellungseinstellungen» die Tabelle personalisieren.
