Magento 2 mit Hyvä Frontend und Hyvä React Checkout: Trotec

Erfolgsstory: Trotec GmbH – Early Adopter mit Hyvä, Internationalisierung und umfassende UX-Optimierung

  • Anzahl der Storeviews: 21
  • Projektlaufzeit Hyvä Relaunch mit Hyvä Checkout: 6 Monate
  • Teamgröße: 14 Entwickler
  • Zahlarten: 22

...

Über das Unternehmen

Logo Myline24 - Referenz von WilMa Digital GmbH

Trotec ist ein global agierender Hersteller von Luftfiltern, Heizgeräten, Klimageräten und mehr, die sowohl für private als auch geschäftliche Kunden entwickelt wurden. Das Unternehmen steht für hochwertige Qualität, Innovationskraft und ein umfassendes Produktportfolio, das in Branchen wie Bau, Industrie und Facility Management zum Einsatz kommt. Der Online-Shop ist ein essenzieller Vertriebskanal, der leistungsfähig und flexibel sein muss, um den weltweiten Anforderungen gerecht zu werden.

Die Herausforderung

Der Online-Shop von Trotec musste umfassend modernisiert und internationalisiert werden, was mehrere Herausforderungen mit sich brachte:

  • Hyvä als neue Technologie: Trotec entschied sich, als einer der ersten Shops das neue Hyvä-Theme einzusetzen, um die Performance und User Experience zu verbessern. Das frühe Adaptieren dieser neuen Technologie erforderte eine flexible und lösungsorientierte Herangehensweise.
  • Komplexe Internationalisierung: Der Shop umfasste 21 Storeviews, mit jeweils spezifischen steuerlichen und rechtlichen Anforderungen, die berücksichtigt werden mussten, um weltweit reibungslos operieren zu können.
  • Integration verschiedener Zahlungssysteme: Die Vielfalt an landesspezifischen Zahlungsarten und Payment Providern musste integriert werden, um den Anforderungen der internationalen Märkte gerecht zu werden.
  • Zusätzliche Funktionalitäten: Trotec benötigte zahlreiche individuelle Shop-Funktionalitäten, darunter eine Buy Together-Funktion, Packstation-Anbindung, B2B-spezifische Zahlungsarten, eine Adressvalidierung und VAT-Validierung sowie die Integration von Ersatzteilen via API.
  • Schnittstellen zu Drittanbietern: Die Integration von Systemen wie Akeneo (PIM), Emarsys (Marketing-Automatisierung) und anderen Datenquellen erforderte eine performante Anbindung an den Shop.
  • Nahtloser Betrieb während der Transformation: Alle Änderungen mussten schrittweise während des laufenden Betriebs umgesetzt werden, was eine stabile Projektplanung, differenzierte Teams und eine optimierte Deployment-Strategie erforderte.

Unsere Lösung

Um diese Herausforderungen zu bewältigen, haben wir folgende Maßnahmen umgesetzt:

  • Hyvä-Theme und React Hyvä Checkout: Als Early Adopter von Hyvä implementierten wir das neue Theme, um eine signifikante Verbesserung der Performance und der Ladezeiten zu erzielen. Der React Hyvä Checkout wurde komplett neugestaltet und sorgte für eine schnelle, reibungslose Kaufabwicklung.
  • Optimiertes Hosting: Neukonfiguration des Shops mit dem professionellen Magento-Hosting bei Maxcluster
  • Internationalisierung des Shops: Die 21 Storeviews wurden im Einklang mit den jeweiligen steuerlichen und rechtlichen Vorgaben internationalisiert, um Trotec die nahtlose Expansion auf internationale Märkte zu ermöglichen.
  • Umfangreiche Zahlungsintegration: Integration von landesspezifischen Zahlungsarten und Payment Providern wie IDeal, Webpay, Twint, Izipay, Payone, Mondu, Ratepay, Postfinance, Saferpay, Przelewy24, Apple Pay und vielen anderen, um die globale Zahlungsabwicklung zu ermöglichen.
  • Content-Management und spezifische Features: Umsetzung einer umfangreichen Content-Implementierung mit dem Magento Page Builder, Integration von speziellen Features wie der Buy Together-Funktion, B2B-Zahlungsarten im B2C-Shop, Elasticsearch inklusive virtueller Kategorien sowie die Implementierung eines Adressvalidierungstools.
  • Schnittstelle zu Akeneo: Die Integration von Akeneo als PIM-System (Product Information Management) ermöglichte eine effiziente Verwaltung und Pflege der Produktinformationen, was für den internationalen Betrieb und die Lokalisierung von Produkten essenziell war.
  • Emarsys Integration: Die Integration von Emarsys erfolgte individuell über eine API-Anbindung, da die Standardmodule nicht die nötigen Funktionen abdeckten. Dies ermöglichte ein umfassendes, automatisiertes Marketing über verschiedene Kanäle hinweg.
  • Packstation-Integration: Implementierung der Anbindung an Packstationen, um den Kunden eine flexible und bequeme Lieferoption zu bieten.
  • KPI-Modul und Monitoring: Wir implementierten ein KPI-Modul, das ein erweitertes Monitoring ermöglichte, um kritische Shop-Kennzahlen im Blick zu behalten und proaktiv auf Änderungen reagieren zu können.
  • Umfangreiches Testsetup: Einführung eines umfassenden Testsetups mit Cypress, Unit Testing und weiteren Tools, um sicherzustellen, dass alle neuen Funktionen reibungslos funktionieren.
  • B2B-Verhalten im B2C-Shop: Integration spezifischer B2B-Funktionen in den B2C-Shop, um den Geschäftskunden spezielle Zahlungsoptionen und maßgeschneiderte Prozesse zur Verfügung zu stellen.
  • VAT-Validierung: Implementierung der VAT-Überprüfung zur Validierung von Umsatzsteuer-Identifikationsnummern, um den B2B-Geschäftsverkehr zu erleichtern.
  • Kontinuierliche Performance-Optimierung: Regelmäßige Optimierungen zur Verbesserung von Pagespeed, Web Vitals und der allgemeinen Shop-Performance wurden durchgeführt, um die Nutzererfahrung konstant zu verbessern.
  • Kundenspezifische Erweiterungen: Wir haben viele kundenspezifische Logiken integriert, um die User Experience zu optimieren. Dazu gehörten die Anpassung der Breadcrumbs, die Datenspeicherung im Kundenkonto und die Nutzung eines Content Delivery Networks (CDN) für das Laden von Produktbildern zur Verbesserung der Ladezeiten.

Die neue UX-Implementierung

Etwa 2 Jahre nach dem Hyvä Relaunch stellt die Implementierung eines neuen UX eine besondere Herausforderung dar, da sie schrittweise während des laufenden Betriebs umgesetzt wurde. Das UX-Design wurde von einer externen Consulting-Firma in mehreren Schritten geliefert. Die neuen UX-Komponenten wurden von uns partiell in den Shop integriert:

  • Einzelne Storeviews als Testumgebung im Produktiv-Betrieb: Beginnend mit dem neuen Checkout wurde das neue UX Design zunächst nur in spezifischen Storeviews implementiert, um eine kontrollierte Testphase zu ermöglichen. Nach erfolgreichen Tests erfolgte die globale Einführung.
  • Schrittweiser Rollout anderer Shop-Elemente: Im nächsten Schritt wurden andere Teile des Shops überarbeitet, wie der Warenkorb, der Footer, der Header und die CMS-Seiten, Kategorieseiten und Produktseiten. Dies geschah alles Step by Step, sodass der Betrieb des Shops jederzeit gewährleistet war.
  • Teamkoordination und PM: Die parallele Umsetzung der neuen UX und das Testing erforderten eine präzise Koordination der Teams, eine angepasste Deployment- und Versionsstruktur sowie eine hohe Flexibilität im Projektmanagement.
  • Kontinuierliche Optimierung: Performance, Pagespeed und Web Vitals wurden laufend optimiert, um die bestmögliche Nutzererfahrung zu bieten.

Von A/B-Tests bis zur Inhouse-Expertise: Optimierungen, die den Unterschied machen

Nach dem erfolgreichen UX-Relaunch konnten wir den nächsten Schritt gehen und weitere Optimierungen vornehmen:

  • A/B Testing: Mit Google Optimize führten wir gezielte A/B-Tests im Checkout durch, um datenbasierte Entscheidungen zu unterstützen und den Conversion-Prozess zu verbessern.
  • Personalisierung: Nach einer umfassenden Evaluierung verschiedener Systeme implementierten wir eine Personalisierungslösung, die in enger Abstimmung mit den Marketingzielen von Trotec entwickelt wurde. Die Auswertung übernahm das Marketing-Team.
  • Such-Optimierung: Um die Suchfunktion zu verbessern, haben wir das vorhandene Elastic Search-Modul im vollgen Umfang genutzt. Mit einer optimierten Konfiguration & Optimizern und enger Zusammenarbeit mit dem Produktmanagement erzielten wir schnelle Erfolge. Darüber hinaus implementierten wir die Bestseller-Positionierung: Ein Feature, das Top-Produkte anhand von Verkaufsdaten prominent platziert und so gezielt zum Verkaufserfolg beiträgt.
  • Schulung des internen Entwicklerteams: Nachdem wir die großen Entwicklungsprojekte erfolgreich abgeschlossen hatten, unterstützten wir Trotec beim Aufbau eines Inhouse-Entwicklerteams. Durch umfassende Schulungen und einen sorgfältig vorbereiteten Knowledge-Transfer konnten wir das Team schrittweise in die bestehende Infrastruktur einführen. Unsere detaillierte Dokumentation und die enge Zusammenarbeit sorgten für einen reibungslosen Übergang zur internen Entwicklung und langfristige Eigenständigkeit des Teams.

Das Ergebnis

Unsere Arbeit brachte Trotec auf das nächste Level: Der Shop wurde auf das moderne Hyvä-Theme umgestellt, was zu einer deutlichen Performance-Steigerung führte. Die stufenweise Einführung der neuen UX im laufenden Betrieb war eine große Herausforderung, die wir dank sorgfältiger Planung und enger Zusammenarbeit mit den UX- und internen Teams erfolgreich meisterten. Das neue Checkout-System sowie die Integration zahlreicher Zahlungssysteme und die Internationalisierung des Shops haben Trotec eine nahtlose globale Expansion ermöglicht. Das Projekt ist ein Paradebeispiel dafür, wie technische Innovation, flexible Arbeitsweise und hervorragendes Projektmanagement zusammenkommen können.

unique

Warum WilMa Digital?

WilMa Digital steht für Innovation und Flexibilität. Als Hyvä Early Adopter haben wir den technologischen Wandel bei Trotec maßgeblich begleitet und komplexe Anforderungen wie die schrittweise UX-Implementierung, die Internationale Shop-Optimierung sowie die Integration verschiedener Systeme (Akeneo, Emarsys und mehr) nahtlos umgesetzt. Wir waren in alle relevanten internen Prozesse eingebunden und haben dafür gesorgt, dass der Shop läuft – auch wenn es darum ging, Aufgaben zu übernehmen, die über den normalen Rahmen hinausgingen.

Sag Hallo
unique

Möchtest du deinen Shop mit moderner Technologie und einer flexiblen, globalen Ausrichtung auf das nächste Level bringen?

Lass uns gemeinsam daran arbeiten – starte heute deine Erfolgsgeschichte mit WilMa Digital!

Jetzt kontaktieren