19. Apr 2023

Oxid meets Headless: How Hirmer brought its Oxid store Headless up to date again

Veraltete Shop-Software bremst Online-Händler bei der Entwicklung zeitgemäßer Online-Features aus. Doch der komplette Wechsel von einem Monolithen hin zu einer Headless-Architektur ist ein komplexes Vorhaben mit vielen Fallstricken. Der Münchner Herrenmodehändler Hirmer hat einen Kompromissansatz gewählt. Er dockte ein modernes Headless Frontend an sein bestehendes Oxid-Backend an. Im Interview mit eCommerce Fachredakteurin Daniela Zimmer  bestätigen Michael Hobelsberger, Bereichsleiter E-Commerce, und Frederic Worm, Head of Shop Technologie bei Hirmer: “Wir würden es genau so wieder tun.”

Welche Relevanz hat der E-Commerce für Hirmer?

Michael Hobelsberger: Unser Online-Shop ist für uns ein wichtiger Absatzkanal, der stetig wächst. Unsere Stammkunden nutzen ihn beispielsweise, um online zu recherchieren, bevor sie dann zu uns in die Filiale kommen.

Sie haben sich entschieden, Ihre Shop-Software zu modernisieren. Was war das Problem am alten Setup?

Hobelsberger: Wir wollen im E-Commerce weiter wachsen. Dem stehen aber bestimmte Systeme und insbesondere das Frontend im Wege. Also haben wir uns entschieden, in einem ersten Schritt das Frontend auszuwechseln und gleichzeitig neue Tools wie ein PIM-System und ein Order-Management-System einzuführen.

Frederic Worm: Unsere bestehende Lösung ist jahrelang sehr zuverlässig und stabil gelaufen, im Laufe der Zeit aber ein wenig in die Jahre gekommen. Dadurch hatten wir diverse Baustellen. Unser ursprüngliches Wunschkonzept war, das komplette Tech-Stack auszutauschen. Aber das ist natürlich riskant. Also haben wir uns im ersten Schritt für einen Kompromiss entschieden und mit “commercetools Frontend” ein Headless Frontend an unser bestehendes Oxid-Backend andocken lassen. Teil des Projekts war auch, unser eigenes Entwicklungsteam, das sehr lange mit der alten Lösung gearbeitet hatte, mit Unterstützung der SHOPMACHER ein bisschen in die Zukunft zu schubsen. Und das ist auch wirklich gut gelungen.

Was hat denn letzten Endes den Ausschlag gegeben für die Headless-Variante?

Worm: Bei Monolithsystemen hat man immer das Problem, dass es Teile gibt, die gut funktionieren, während andere veraltet sind. Bei unserem Oxid war das ganz klar die Art und Weise, wie Templates gerendert werden. Während die ganze Welt schon mit reaktiven Frameworks wie React Angular oder Vue arbeitet, drucksten wir noch mit jQuery rum. Wollten die Kollegen neue Features haben, war der Entwicklungsaufwand enorm. Deswegen war für uns der erste Schritt, das Frontend auszutauschen. Unser Oxid-Backend ist auch alt und sicher gibt es da auch einiges zu kritisieren. Aber der Teil, der jetzt noch in Betrieb ist, funktioniert zuverlässig.

Hobelsberger: Ein ausschlaggebender Punkt, Headless zu gehen, war auch, dass wir auf absehbare Zeit nicht nur ein Frontend bauen wollen, sondern mehrere. Wir denken da an ein Frontend für unsere Kundenkartenbesitzer, das anders aussehen und funktionieren muss als das Shop-Frontend, aber mit derselben Technologie gebaut ist und dieselben Schnittstellen bedient. Außerdem wollen wir auch in Richtung App-Technologie oder PWA gehen.

Oliver Lucas, Managing Partner of ecom consulting GmbH

Michael Hobelsberger, Bereichsleiter E-Commerce bei Hirmer und Frederic Worm, Head of Shop Technology bei Hirmer

Warum fiel die Entscheidung auf “commercetools Frontend”?

Worm: Mit Oxid ist die Art und Weise, wie Seitentypen aufgebaut werden, sehr starr. Da gibt es eine Detailseite, eine Kategorieseite oder die Markenseite und alle werden auf eine vordefinierte Art und Weise mit Content bespielt. Unser Marketing wollte aber stärker Content-getrieben arbeiten und beispielsweise neue Landing-Pages anlassbezogen flexibel mit Inhalten bestücken. Mit “commercetool Frontend” ist es möglich, ohne großen Entwicklungsaufwand Landing-Pages zu erstellen, auf denen man beispielsweise Listen ganz anders zusammenstellen und auch flexibler mit neuen Content-Inhalten spielen kann. Das hat uns im Vorfeld gut gefallen.

Was waren in der Rückschau die größten Herausforderungen bei dem Projekt?

Hobelsberger: Ein Headless-Frontend auf ein bestehendes Backend zu packen, ist nichts, was schon 40 Händler vor uns gemacht haben. Und wir nutzen auch nicht die neueste Oxid-Version. Insofern gab es schon ein gewisses Risiko, dass das ganze Projekt scheitert, und entsprechende Diskussionen im Management, ob wir den Schritt machen sollen oder nicht. Aber die Zusammenarbeit zwischen unseren Agenturen SHOPMACHER und Deutsche Daten Plattformlösungen war sehr vertrauensvoll. Und wir haben uns alle tief in die Augen geschaut und uns gegenseitig glaubwürdig versichert: Wir kriegen das hin.

Und ab dann lief alles glatt?

Worm: Wenn es so gewesen wäre, hätte es wahrscheinlich alle überrascht. Aber wie in jedem Software-Projekt gibt es immer mehr zu tun als man denkt und die Tücke steckt im Detail.

Hobelsberger: Die Wahrheit ist: Wir haben uns alle gnadenlos verschätzt. Aber wie Frederic schon sagte: Alles andere wäre auch ein Wunder gewesen. Und da wir bei Hirmer selber entwickeln und alle lange Erfahrung im Management von IT-Projekten haben, war für uns immer nachvollziehbar, was da passiert und warum es länger dauert. Aber am Ende hat sich der Aufwand gelohnt. Das Ergebnis ist astrein.

Wo lauerten denn konkret die Tücken im Projekt? 

Worm: Wir haben im Vorfeld zwar detaillierter geplant als jemals zuvor – auch mit Unterstützung der SHOPMACHER. Aber im Detail ergaben sich einfach diverse Abhängigkeiten, die so erstmal nicht sichtbar waren. Ein Beispiel: “commercetools frontend” wirbt damit, die Suchmaschine Algolia über ein einfaches Steuermodul anbinden zu können. Allerdings ist diese Anbindung spezifisch auf die Datenstruktur von commercetools ausgelegt. In unserem Oxid-Case stellte sich heraus, dass der Standard-Stack von commercetools gar nicht zu unseren Dateiformaten passt und die Standardlösung von “commercetools frontend” überhaupt nicht anwendbar ist. Stattdessen mussten wir ein komplettes Algolia-Modul entwickeln, das so mit Algolia spricht, wie es unsere Daten erfordern. Das war uns vorher so nicht klar. Und vergleichbare Herausforderungen gab es an einigen Stellen.

Hobelsberger: Dass so ein Projekt länger dauert, ist immer erwartbar. Die entscheidende Frage ist, wie man damit umgeht. Und da war die Betreuung durch SHOPMACHER und Deutsche Daten wirklich super. Für uns war jederzeit transparent, was da passiert und warum es länger dauert. Zudem haben alle drei Parteien, unsere internen Entwickler, SHOPMACHER und Deutsche Daten, sehr konstruktiv zusammengearbeitet. Obwohl das Projekt einiges an Sprengstoff beinhaltete und wir sehr agil ohne Pflichtenheft arbeiteten, gab es an keiner Stelle Fingerpointing. Keiner hat versucht, dem anderen Fehler in die Schuhe zu schieben. Das spricht wirklich sehr für SHOPMACHER und Deutsche Daten. Und insbesondere der SHOPMACHER-Projektmanager hat einiges aushalten müssen und mit viel Sozialkompetenz überzeugt. 

Sie haben es vorhin schon angedeutet: Das Ergebnis ist aus Ihrer Sicht astrein. Was überzeugt Sie am meisten?

Hobelsberger: Eigentlich wollten wir im Projekt ja nur Oxid durch “commercetools frontend” tauschen. Der Shop sollte im Wesentlichen der alte bleiben. Aber auch da haben uns die SHOPMACHER und Deutsche Daten super begleitet. Wir bekommen viel Lob, wie sehr sich die Bedienbarkeit im Shop verbessert hat – und das, ohne dass eine Agentur für eine Million Euro eine UI gemalt hat. Stattdessen haben das Projektteam und die Entwickler einfach mitgedacht. Das ist nicht selbstverständlich, dass da auch noch so viel Know-how nebenbei mitgeliefert wird.

Was hat sich denn konkret verändert?

Hobelsberger: Die Produktliste sieht anders aus, die Filter wurden erweitert. Früher konnten unsere Kunden Produkte nach Farbe, Marke, Preis und Größe filtern. Jetzt gibt es je nach Produktkategorie zahlreiche verschiedene Kriterien wie Kragenform oder Zahl der Knöpfe am Revier. Auch die Kunden-Accounts wurden optimiert.

Worm: Das wäre in der Bedienbarkeit und Übersichtlichkeit ohne die neue Technologie im Frontend so nicht darstellbar gewesen. Das ist jetzt viel eleganter. Man wählt einen Filter und das angezeigte Sortiment ändert sich sofort. So etwas kann man nicht in Oxid bauen. Das macht einfach keinen Spaß.

Der Online-Shop von Eckerle ist bereits live. Wann folgen Hirmer und Hirmer Große Größen?

Hobelsberger: Die beiden gehen im Februar live. Das Risiko, mit allen drei Shops online zu gehen, war uns zu groß. Wir wollten erst einmal mit einem Erfahrungen sammeln und relevante KPIs wie Konversionsraten etc. beobachten. Auch Hirmer.de und Hirmer Große Größen werden wir nicht zeitgleich, sondern versetzt live schalten.

Zeit für ein letztes Fazit: Würden Sie das Projekt noch einmal so machen?

Hobelsberger: Ja, ich würde es wieder so machen. Bevor ich alles auswechsle, ist es aus Risikogründen besser, erst einen Schritt zu tun und dann den nächsten. Insofern sind wir auch eine Blaupause für andere Händler, die auf Altsystemen sitzen und sich nicht trauen, dieses auszuwechseln.

Worm: Je länger eine Bestandslösung läuft, umso mehr technische Schulden baut man auf. Neue Features zu entwickeln, wird dann immer aufwändiger und umfangreicher. Deswegen muss man einfach modularisieren. Wir bieten unseren Entwicklern im Frontend jetzt wieder eine moderne Arbeitsgrundlage, um neue Features zu entwickeln. Mit veralteten Technologien wie jQuery laufen einem ja irgendwann die besten Leute weg. Insofern ist es total sinnvoll, den Weg zu gehen.

ALSO INTERESTING

Seven tips for a more sustainable e-commerce tech stack

Seven tips for a more sustainable e-commerce tech stack

In the creativity technique, there is a method called the “flip-flop technique”. This has nothing to do with flip-flops, but takes into account the fact that most people’s psychology is much more creative when dealing with negative thoughts than when dealing with positive ideas. In concrete terms, this means collecting all the points that could contribute to the failure of a project, then “flip-flopping” them into the opposite and very quickly coming up with new creative solutions – beyond the usual patterns of thought and action.

read more
11 Tips on How to Crash an E-Commerce Project at Full Speed

11 Tips on How to Crash an E-Commerce Project at Full Speed

In the creativity technique, there is a method called the “flip-flop technique”. This has nothing to do with flip-flops, but takes into account the fact that most people’s psychology is much more creative when dealing with negative thoughts than when dealing with positive ideas. In concrete terms, this means collecting all the points that could contribute to the failure of a project, then “flip-flopping” them into the opposite and very quickly coming up with new creative solutions – beyond the usual patterns of thought and action.

read more
Cookie Consent Banner by Real Cookie Banner