LIVIM Weiterentwicklung und Optimierung des Onlineshops

Zum Projektstart betrieb Livim einen Onlineshop auf Basis von Magento 2, für den in der Vergangenheit bereits individuelle Erweiterungen entwickelt worden waren. Es gab ebenfalls bereits ein individuell angepasstes Design, jedoch bestand Optimierungsbedarf im Hinblick auf eine intuitive und reibungslose Bedienung.

Die Notwendigkeit für das Projekt ergab sich einerseits aus der Instabilität und langen Ladezeiten im Produktivbetrieb der Plattform, andererseits war der Kunde unzufrieden mit dem Design des Shops.

Viele der im Shop angebotenen Möbel werden erst nach dem Verkauf im Onlineshop individuell durch weltweit verteilte Möbelproduzenten hergestellt. Dies bringt einen komplexeren After-Sales Prozess mit sich, da der Kunde bis zu 60 Tage auf seine Möbelstücke wartet. Daher kam es sehr häufig zu Rückfragen von Kunden, was den Kundenservice sehr stark auslastete.

Das Projekt betreuen wir gemeinsam mit unserem Partner run_as_root GmbH.

Technische Schulden

Da der Code über Jahre hinweg und zudem von verschiedenen Entwicklerteams entwickelt wurde, ist er unaufgeräumt und schwer verständlich. 

Big Bang Relaunch oder kontinuierliche Entwicklung

Gemeinsam mit dem Kunden musste entschieden werden, ob der Relaunch des Frontends auf einen Schlag oder in kleineren Schritten erfolgen sollte. Beide Varianten bringen Vor- und Nachteile mit sich, deshalb sollte diese Entscheidung wohlüberlegt sein.

Hier wurde sich für einen Relaunch des Frontends auf Basis von Hyvä entschieden. 

Kompatibilität

In Vergangenheit wurden zahlreiche Magento Extensions installiert, die mit einem Relaunch auf Hyvä zum Teil obsolet, aber auch inkompatibel werden. 

Da Hyvä nicht mehr mit RequireJS oder jQuery arbeitet, musste sichergestellt werden, dass die vorhandenen Module und Funktionen nach dem Umbau weiterhin genutzt werden können.

Arbeitsgemeinschaft auf Distanz

Da das Projekt in einer Arbeitsgemeinschaft durchgeführt wird, entstand ein komplett neues Teamgefüge, welches zudem auch über mehrere Länder verteilt arbeitet. Dies bringt organisatorische Herausforderungen mit sich.

Komplexer Konfigurator

Bei Livim können die Kunden ihre Möbel individuell mithilfe eines Konfigurators zusammenstellen. Für die verschiedenen Komponenten eines Möbelstücks können jeweils Form, Farbe und Material ausgewählt werden. Der Endkunde kann sich auf diese Weise sein Möbelstück genau nach seinen Vorstellungen konfigurieren.

Der Konfigurator beinhaltet extrem komplexe Logiken und ist deshalb sehr schwer zu warten und weiterzuentwickeln. Dies wird zusätzlich dadurch erschwert, dass es sich um Fremdcode handelt und es eine unüberschaubare Anzahl an Abhängigkeiten gibt, welche nicht dokumentiert sind.

Dies macht ein Refactoring dieses Teils des Codes nahezu unmöglich aus wirtschaftlicher Sicht.

Refactoring & neue Features

Schrittweise wurden neue Features entwickelt und bestehender Code überarbeitet, um technische Schulden abzubauen und Probleme im Betrieb der Plattform zu lösen. Ca. 1/3 aller Drittanbieter Extensions wurden im Zuge eines Magento Versionsupdates durch Magento Core Feature ersetzt.

Um das Investment für den Kunden in einem wirtschaftlich vernünftigen Maß zu halten haben wir uns für eine Strategie des Refactorings anstelle einer Neuentwicklung des Backends entschieden. Diese Strategie bot zudem den Vorteil einer schnellen Time to Market für Verbesserungen, wodurch der Produktivbetrieb schnell stabilisiert werden konnte. 

Effiziente Zusammenarbeit auf Distanz

Dank moderner Kommunikations- und Kollaborationstools gestaltet sich die Zusammenarbeit im Team und mit dem Kunden einfach und effizient. Es wurde ein gemeinsamer Slack Channel erstellt, über den der Kunde Wünsche und neue Anforderungen in Echtzeit an das Entwicklungsteam kommunizieren kann.

Die auf diesem Wege kommunizierten Anforderungen werden dann eigenverantwortlich vom Team aufbereitet und in konkrete To-Dos heruntergebrochen.

Um den Kunden möglichst eng in die Entwicklung mit einzubeziehen gibt es eine wöchentliche Abstimmung sowie ein Kanban Board und Backlog in Gitlab, auf dem der Fortschritt stets klar und transparent einsehbar ist. So stellen wir sicher, dass wir stets die Prioritäten im Blick haben.

Unser Vorgehen

Es wurde ein komplett neues Frontend konzipiert, welches sich nah am nutzerfreundlichen Hyvä-Standard orientiert. Lediglich wenn es für die User Experience wirklich notwendig war, wurde von diesem Standard abgewichen. So konnte mit geringem Aufwand und somit geringen Kosten eine sehr gute User Experience geschaffen werden.

Für die einzelnen Seitentypen wurden jeweils Figma Mock-Ups als Basis für das Frontend erstellt und iterativ mit dem Shopbetreiber abgestimmt. So konnten die Seitentypen direkt im Anschluss daran schnell mit Hyvä umgesetzt werden.

Schnelle Erfolge

Im Laufe der Umsetzung konnten dank Hyvä schnelle Ergebnisse im Hinblick auf Standard-Seitenbereiche wie Header, Footer und Kategorieseiten erzielt werden. 
Durch die einfache Handhabung der CSS-Klassen mit TailwindCSS konnte das Layout aus den Figma Designs mit geringem zeitlichen Aufwand in eine funktionierendes Shop-Frontend umgesetzt werden.

Konfigurator

Auch den Konfigurator galt es auf Basis von Hyvä zu erneuern.

Da ein Refactoring in Verbindung mit einer Anpassung des bestehenden Konfigurator-Codes auf Basis von Hyvä unwirtschaftlich waren, wurden die Frontend-Funktionen des Konfigurators neu in alpineJS geschrieben und alter Code gleichzeitig refactored oder entfernt. Dabei wurden gleichzeitig auch Verbesserungen im UI vorgenommen.

Die Businesslogik sowie das Datenmodell des Konfigurators wurden zunächst nicht verändert. Hier steht die Erneuerung noch für die Zukunft aus.

Checkout auf Luma-Basis

Im gesamten Warenkorb und im Checkout-Bereich wurde ein Fokus-Layout umgesetzt auf Basis der Extension OneStepCheckout in Verbindung mit dem Magento Standard Luma Theme. So konnte das Problem umgangen werden, dass für Hyvä nahe Checkout-Lösungen keine ausreichende Kompatibilität von Zahlungsanbietern gegeben war.

Reduzierte Inhalte im Header und Footer fokussieren die Nutzerführung auf den wesentlichen Teil der Kaufabwicklung. 

Performance

Unser Ziel war es, ein Frontend mit einer hohen Ladegeschwindigkeit und einem hervorragenden Benutzererlebnis zu schaffen.

Das performante Laden aller Ressourcen stellt nur einen Vorteil des neuen Shops dar. Wir generieren die CSS Dateien mit nur den tatsächlich genutzen CSS Klassen, sodass die Dateien jeweils nur wenige Kilobyte groß sind. Zusätzlich werden durch ein gut strukturiertes Markup, Ressourcenmanagement und Javascript unnötige Sprünge beim Laden vermieden.

Des Weiteren wird die Auslieferung des Frontends durch Cloudlfare optimiert. Das Cache-Proxy liefert alle statischen Inhalte inkl. Bilder noch besser komprimiert aus.

Aus diesem Maßnahmen resultiert ein hervorrgendes PageSpeed Scoring, welches sich auch äußerst positiv auf das SEO-Ranking des Shops auswirken wird.

Konsistentes Benutzererlebnis

Der Betrieb der Plattform läuft nun zuverlässig und stabil. Die Endkunden erhalten ein zuverlässiges Frontend, und müssen sich nicht länger über lange Ladezeiten oder Fehler im Frontend ärgern. Die einzelnen Seiten und Elemente weisen einen modernen Look & Feel auf und ermöglichen eine intuitive Bedienung des Shops, die einem klaren "roten Faden" folgt. 

Intuitiver Check-out Prozess

Für die Endkunden des Shops wurde der Check-out Prozess erheblich fokussierter gestaltet, sodass sie schnell und unkompliziert ihr individuelles Möbelstück bestellen können.

Dabei wurde verstärkt darauf geachtet, potenzielle Hürden abzubauen, die zum Abbruch des Kaufvorgangs führen könnten. In Summe konnte u.A. durch diese Maßnahme die Conversion Rate um 35% im Vergleich zum Vorjahr gesteigert werden.

Konsistenz in der Kommunikation

Der After-Sales Prozess wurde ebenfalls optimiert. E-Mails, die der Endkunde von Livim erhält sind nun optisch ansprechend, einheitlich gestaltet und weisen ein konsistente Informationsarchitektur im komplexen After-Sales Prozess auf, um so auch eine konsistente Kauferfahrung zu ermöglichen. Dadurch konnte das Aufkommen an Rückfragen nach der Bestellung spürbar reduziert werden, was wiederum den Kundenservice entlastet.

Technische Schulden reduziert

Durch das Entfernen diverser Drittanbieter Extensions und dem kontinuierlichem Refactoring im Projekt ist eine deutlich gesteigerte Wartbarkeit und Anpassungsfähkeit des Systems erzielt worden. Neue Features können so schneller entwickelt werden und auch künftige Magento Updates sind mit deutlich geringerem Aufwand realisierbar.

Aktuell werden nach wie vor Optimierungen am Onlineshop vorgenommen und neue Features entwickelt. Auch das Frontends wird weiterhin kontinuierlich optimiert.

Auch der Abbau technischer Schulden wird weitergeführt, um die Performance der Plattform weiter zu erhöhen und die Wartbarkeit des Systems weiter zu erhöhen

Die Zusammenstellung eines individuellen Möbelstücks über den Konfigurator im Shop ist derzeit noch relativ komplex. Der Produktkonfigurator soll zukünftig intuitiver bedienbar und einfacher zu warten sein. Geplant ist eine eigenständige Softwarelösung, welche dann in den Magento Shop integriert werden kann und Schritt für Schritt den alten Konfigurator ablöst.

Um den neuen Produktkonfigurator einsetzen zu können, wird zunächst die Komplexität in der Artikelpflege für die Shopbetreiber reduziert, sodass potenzielle Fehleingaben verhindert werden. 

Diese Maßnahmen sollen dazu beitragen, dass es weniger manueller Nacharbeit bei Bestellungen notwendig sind und die Conversion Rate weiter gesteigert wird. Für die Kunden soll die Bestellung ihrer individuellen Möbelstücke insgesamt unkomplizierter ablaufen.