Relaunch des bw-online-shops: Frontend-Neuentwicklung mit Hyvä

Kein erfolgreicher Onlineshop bleibt über Jahre unverändert. Sortimente wachsen, Marketingmaßnahmen werden komplexer und technische Anforderungen verändern sich. Mit der Zeit entsteht daraus die Notwendigkeit, Design, UX und Frontend-Struktur neu zu bewerten.

Genau an diesem Punkt stand auch der bw-online-shop, einer unserer Kunden, den wir seit 2017 auf seiner erfolgreichen Reise begleiten und betreuen durften und noch dürfen. Dieser auf Adobe Commerce (Magento) basierende Shop wurde über Jahre hinweg kontinuierlich von uns erweitert und verbessert. Durch das sich stetig verändernde technische Umfeld wurde es Zeit, auch hier neue technische Wege zu gehen, damit der bw-online-shop auch 2026 die bestmögliche und zukunftsfähige Technologie am Markt nutzt.

Gemeinsam mit unserem Kunden entschieden wir uns deshalb für ein Redesign und einen Wechsel der Technologie für das Frontend mit Hyvä. In diesem Beitrag zeigen wir, wie wir den Onlineshop analysiert, umstrukturiert und in ein neues Frontend-Setup überführt haben.

Der bw-online-shop gehört in Deutschland zu den führenden Onlineshops im Militär-, Outdoor- und Freizeitbereich. Mit einer der größten Produktpaletten auf dem Markt hat sich der Shop über die Jahre stetig weiterentwickelt.

Als betreuende Agentur haben wir den bw-online-shop über mehrere technische Entwicklungsphasen hinweg weiterentwickelt: vom früheren Aconon-Shop auf Magento 1 und später von Magento 1 auf Magento 2. Parallel dazu wurde der Onlineshop im laufenden Betrieb kontinuierlich ausgebaut. Dabei entstanden zahlreiche individuelle Funktionen und Marketingformate, unter anderem Influencer-Landingpages, saisonale Aktionsflächen, Adventskalender und weitere Kampagnenbereiche. Diese Entwicklung ist typisch für erfolgreiche E-Commerce-Projekte: Ein Shop wächst mit Sortiment, internen Prozessen und den Anforderungen aus Marketing und Vertrieb.

Im Relaunch ging es deshalb darum, diese Struktur neu zu bewerten und in ein konsistentes Frontend zu überführen.

Im Mittelpunkt des Projekts standen die Optimierung der Nutzererfahrung (UX) und die Verbesserung der Performance im Frontend. Gleichzeitig war es wichtig, den Auftritt gestalterisch zu modernisieren, ohne den Wiedererkennungswert des bw-online-shops zu verlieren.

Die wichtigsten Ziele des Relaunches waren:

• Nutzererlebnis und Konversion verbessern
  Nutzer sollten schneller passende Produkte finden, sich klarer orientieren und den Kauf noch einfacher abschließen können.
• Design modernisieren, ohne Vertrautheit zu verlieren
  Der bw-online-shop sollte nicht beliebig neu aussehen. Die Kunden sollten sich weiterhin zurechtfinden, gleichzeitig aber von einer ruhigeren Gestaltung, klareren Flächen und einer besseren visuellen Hierarchie profitieren.
• Frontend-Struktur mit Hyvä neu aufbauen und Performance verbessern
  Das Frontend sollte mit dem Hyvä-Theme schlanker und moderner aufgebaut werden. Dadurch entstanden bessere Voraussetzungen für Performance, Ladezeiten und die kontinuierliche Weiterentwicklung des Shops.
• Content- und Kampagnenpflege flexibler machen
  Mit der wachsenden Zahl an Landingpages, Aktionsflächen und Kampagnenformaten stiegen auch die Anforderungen an die redaktionelle Pflege. Deshalb wurde im Relaunch eine blockbasierte Struktur umgesetzt, die solche Inhalte modularer machte und mehr Flexibilität bei der Erstellung und Anpassung von Kampagnen gab.
• Checkout und Produktfindung optimieren
  Der Kaufabschluss sollte übersichtlicher gestaltet und die Produktausspielung in Suche und Kategorien relevanter ausgerichtet werden.

Warum Hyvä für das neue Frontend eingesetzt wurde

Mit Hyvä konnte die Storefront neu aufgebaut werden, während Magento 2 als Commerce-Basis erhalten blieb. Für die Frontend-Neuentwicklung im bw-online-shop bot dieser Ansatz mehrere Vorteile:

• Bessere Performance-Grundlage, weil weniger Frontend-Abhängigkeiten mitgeführt werden.
• Ein wachsendes Ökosystem aus kompatiblen Erweiterungen, Templates und Entwicklungsmustern.
• Schrittweise Umstellungsmöglichkeiten durch den Fallback-Mechanismus, sodass Bereiche kontrolliert stetig übertragen werden können.

Damit war Hyvä in unserem Fall die passende Lösung.

Im Rahmen des Redesigns sollte der bw-online-shop so gestaltet werden, dass er weiterhin vertraut wirkt, aber klarer, ruhiger und besser strukturiert ist.

Das Design setzt jetzt auf ruhigere Farben, klare Flächen und weniger ablenkende Elemente. Produkte, Kategorien und zentrale Kaufaktionen rücken dadurch stärker in den Vordergrund. Auch Buttons und zentrale Interaktionselemente sind klarer gestaltet und hervorgehoben. Helle Varianten und rote Akzente helfen dabei, wichtige Aktionen hervorzuheben, ohne die gesamte Oberfläche unruhig wirken zu lassen.

Barrierefreiheit war ein weiteres zentrales Thema des Redesigns. Sie ist gesetzlich ohnehin vorgeschrieben, aber auch entscheidend, um allen Nutzern ein gleichwertiges Einkaufserlebnis zu bieten. Die neue Frontend-Architektur bildete dafür die technische Basis und berücksichtigte entsprechende Anforderungen von Grund auf.

Der Wechsel zu Hyvä erforderte eine genaue Analyse der vorhandenen Frontend-Bestandteile. Im Rahmen der Umsetzung haben wir folgende zentrale Arbeitsschritte durchgeführt:

• Module neu entwickeln: Relevante Frontend-Funktionen wurden für das Hyvä-Setup angepasst oder neu umgesetzt.
• Kommunikation zwischen Frontend und Backend sicherstellen: Das neue Hyvä-Frontend musste nahtlos mit Produktdaten, Kategorien, Warenkorb, Checkout und weiteren Magento-Prozessen zusammenspielen.
• Content-Pflege für Landingpages und Kampagnen neu organisieren: Magento bleibt die Basis für Commerce-Funktionen. Für redaktionelle Inhalte wurde zusätzlich WordPress eingesetzt, da sich Seiten- und Blockstrukturen dort flexibler pflegen lassen. Die Inhalte einiger Landingpages werden jetzt über das WordPress-Backend verwaltet und anschließend im Shop-Frontend ausgespielt.
• Checkout vereinfachen: Der bisher fünfstufige Checkout wurde auf drei Schritte reduziert. Dadurch sollte der Kaufabschluss übersichtlicher und schneller werden.
• Kategorien mit FactFinder verbinden: Die Kategorien wurden an FactFinder angebunden, um Produkte schneller, aktueller und relevanter auszuspielen und die Darstellung stärker zu personalisieren.
• Design, UX, Barrierefreiheit und Technik zusammenführen: Die neue Gestaltung sollte nicht nur visuell überzeugen, sondern auch technisch einwandfrei umgesetzt, barrierefrei nutzbar und auf eine bessere Nutzerführung ausgerichtet sein.

Mit dem Relaunch haben wir den bw-online-shop gestalterisch modernisiert und die Frontend-Schicht auf Basis von Hyvä neu aufgebaut.

Das Ergebnis ist ein Onlineshop, der klarer gestaltet, technisch schlanker aufgestellt und besser auf die laufende Weiterentwicklung vorbereitet ist. Nutzer profitieren von einer besseren Orientierung, einem vereinfachten Checkout und einer effektiveren Produktfindung über die Suche und die Kategorien.

Gleichzeitig ist der Relaunch kein Endpunkt. Gerade bei einem Magento-Shop bleibt die kontinuierliche Weiterentwicklung wichtig: Nutzerverhalten sollte beobachtet, Inhalte sollten angepasst, Kampagnen erweitert und einzelne Funktionen gezielt optimiert werden. Mit der neuen Frontend-Struktur hat alkima WEB & DESIGN ® dafür eine klarere technische Grundlage geschaffen.

Viele Magento-Shops funktionieren grundsätzlich, sind aber über die Jahre komplexer geworden. Design, Frontend, Content-Pflege, Checkout oder Produktfindung entsprechen dann nicht mehr vollständig den aktuellen Anforderungen.

Wenn Sie das Gefühl haben, dass Ihr Onlineshop eine technische und gestalterische Weiterentwicklung benötigt, prüfen wir gemeinsam, welche Schritte sinnvoll sind: vom Redesign über die Frontend-Neuentwicklung bis zur laufenden Optimierung Ihres Magento-Shops. Sprechen Sie uns an!