mofakult × Commerce

Mobiler Onlineshop für 13 Länder

Mofakult erobert Europa. Dafür haben wir einen mobile-optimierten und mehrsprachigen Onlineshop gestaltet und entwickelt. 

hero-image

Individueller Onlineshop in vier Sprachen

Aufgaben
Ein mehrsprachiger Onlineshop soll internationale Kund:innen abholen, auf mobilen Endgeräten glänzen und die internen Prozesse verbessern – unter anderem durch die Anbindung ans ERP-System.

Ergebnis
Der neue Onlineshop ermöglicht es 13 Länder, 4 Sprachen und 2 verschiedene Kundengruppen in einem CMS zu pflegen. Der Picking-Prozess wurde optimiert und in den ersten 12 Monaten nach dem Launch gewann mofakult 83% mehr Neukunden als im Jahr davor. 

Unsere Services

Detailliebe fürs Einkaufserlebnis

Diese Warenkorb-Animation symbolisiert die Liebe zum Detail, die in die Onlineshop-Entwicklung geflossen ist. Im gesamten Shop steht das Einkaufserlebnis ganz klar im Vordergrund.

Add-to-cart-animation

Cross-Selling in der Produktübersicht

Auf den durchmischten Produktseiten »Neu« und »Aktion« unterstützen passende Cross-Selling-Artikel die Kaufentscheidung der Nutzer:innen und vermitteln die richtige Stimmung in Produktkategorien wie »Merch«.

Cross-Selling

Visuelle Produktkategorien

Eigens erstellte Produktkategorie-Bilder begleiten die User durch die mehrstufigen Kategorie-Ebenen in der Navigation. Sie führen von der ersten Übersicht bis zum finalen Produkt. 

Categories

Outcomes

<100 ms
Ladezeit; vorher 3 Sekunden.
10%
mehr Umsatz direkt nach dem Launch.
83%
mehr Neukunden in den ersten 12 Monaten nach dem Launch

Up-to-date: mobile-optimierter Onlineshop

Die Daten des alten Magento-Shops haben einen deutlichen Trend zu mobilen Einkäufen gezeigt. Bei der Konzeption war deshalb klar, dass unser Ziel für die Entwicklung des neuen Onlineshops »mobile first« heißt.

Neben der Darstellung und Platzierung von Funktionen haben wir auch die Ladezeit optimiert. Mit einem Mix aus einer SSR-Version aller Seiten und Caching konnten wir die Ladezeiten von 3 Sekunden (vorheriger Magento-Shop) auf unter 100 Millisekunden beschleunigen.

Mobile screens
Optimierte Übersichts- und Detailseiten für den Einkauf am Smartphone.

Sprachen, Domains, Kundengruppen

Die Programmierung des neuen Onlineshops war für mofakult der Startschuss für die Eroberung Europas. Daher läuft der Shop EU-konform auf verschiedenen Länderdomains und zeigt die richtigen Preise, Preisformate, Währungen und Steuersätze an.

Wir haben das CMS Sulu für mofakult so angepasst, dass in einer einzigen Oberfläche sämtliche Inhalte für 13 verschiedene Länder und vier Sprachen gepflegt werden können.

Zusätzlich zu den Ländern und Sprachen unterscheidet mofakult zwischen zwei Kundengruppen. Während Privatkund:innen auf der Startseite mit einem Tagesdeal und attraktiven Highlights begrüßt werden, werden Geschäftskund:innen die empfohlenen Verkaufspreise der Produkte angezeigt.

Map
Von der Schweiz aus nach ganz Europa
domain-selection
Jeder Content-Block kann im CMS pro Land ein- und ausgeblendet werden und erleichtert somit die Kuration des Inhalts erheblich.
country-blocks
Damit ermöglichen wir, dass trotz gleicher Sprache (hier Deutsch) unterschiedliche Inhalte ausgespielt werden können.

Nahtlose ERP-Integration

Der wohl größte technische Vorteil eines individuellen Onlineshops ist die nahtlose Integration ins ERP-System. Für mofakult bedeutet das Effizienz. 12 Bestellungen werden automatisch auf eine Picking-List gedruckt und ans Lager bzw. den Versand weitergegeben. Shop und ERP teilen sich die Datenhoheit. 

Während das ERP die PIM-Aufgaben (Produktinformationsmanagement) übernimmt und somit die Datenquelle für alle Produkt- und Kategoriedaten ist, ist umgekehrt der Shop die Datenquelle für alle Kunden- und Bestelldaten.

picking-list
Mitarbeiterin sammelt Artikel für zwölf Bestellungen gleichzeitig

Detailseiten mit dem Blick auf’s Wesentliche

Der individuelle Onlineshop spielt seine Stärken auch auf den Produktdetailseiten aus. Es gibt drei verschiedene Versionen: 

  • Einfache Produkte ohne Konfigurationsmöglichkeiten
  • Produkte mit Varianten (Größe, Farbe, etc.) 
  • Frei konfigurierbare Set-Produkte

Zudem können je nach Produkt optionale Zusatzartikel und Staffelpreise angezeigt werden. Dadurch werden die Daten auf der Produktdetailseite so schlank wie möglich gehalten und bieten den Kund:innen eine gute Übersicht.

Variant product
Produktdetailseite eines Varianten-Produkts mit Konfigurationsmöglichkeiten
Set liste
Auflistung der im Set enthaltenen Einzelteile
mood
Erste Testfahrt mit dem frisch überholten Mofa

Tech Highlights

Wir kombinieren innovative Techniken und Tools, die exakt zum Use Case von mofakult passen.

Angular SPA mit SSR
Durch die Umsetzung als Single Page Application (SPA) bietet der Shop ein reaktives, App-ähnliches Erlebnis mit schnellen Ladezeiten durch Server Side Rendering (SSR). Durch die Verschmelzung von Shop Inhalten und CMS Inhalten (Content Commerce) werden User über Stories zu Produkten geführt.
Best of Breed Ansatz
Die Integration von unabhängigen Systemen (Angular Frontend, Sulu CMS, Sylius Shop und Comarch ERP) verbessert die Flexibilität und die Ausfallsicherheit. Die einzelnen Module kommunizieren über APIs miteinander und können im Gegensatz zu einem monolitischen Ansatz jederzeit ausgetauscht werden.
Instant Content Delivery
Durch Intelligentes Caching und verteilte Content Bereitstellung wird eine schnelle und zuverlässige Lieferung von Text- und Bildinhalten in allen benötigten Formaten gewährleistet. Und das unabhängig davon, von welchem Ort oder von welchem Gerät (Mobile, Tablet, Desktop) ein User zugreift.
Zentralisiertes Monitoring
Alle Logs und Metriken laufen in einem zentralen Grafana Dashboard zusammen. Dadurch hat man mit einem Blick eine Übersicht über die Gesamtheit der verteilten Systeme und qualifizierten Kontext für Entscheidungen.
Automatisierte Skalierung
Kubernets helfen dabei, den schwank-enden Nutzerzahlen gerecht zu werden. Je nach Auslastung skaliert die Infrastruktur in Echtzeit hoch oder herunter. Das Resultat ist nicht nur eine optimale Performance, sondern auch Optimierung von Serverkosten.
Marktspezifische Inhalte
Content Blöcke können sowohl auf Länder-, als auch auf Sprachebene so befüllt werden, dass je nach Region unterschiedliche Versionen der selben Seite angeboten werden. Damit kann auf die unterschiedlichen Anforderungen der Märkte sehr genau eingegangen werden.

Verwendete Technologien

Angular
Angular
Symfony
Symfony
Kubernetes
Kubernetes
Elasticsearch
Elasticsearch
Grafana
Grafana
»Zu uns passt kein Onlineshop von der Stange, denn wir sind anders, wir sind mofakult. Mit Fusonic haben wir den Partner gefunden, den wir wirklich brauchen, der zu uns passt und der unsere Ideen zu 100 % umsetzen kann.«
Marc Zürcher
Marc Zürcher
Gesellschafter und Inhaber @ mofakult

Weitere Referenzen

Permission-Request-Title
Liebherr × Customer Service
Schnelle Angebotsfreigabe übers Smartphone
DevOps-Automatisierung
mdq × DevOps & Cloud
DevOps-Automatisierung
Lass uns gemeinsam etwas Großartiges erschaffen.

Kontaktformular

*Pflichtfeld
*Pflichtfeld
*Pflichtfeld
*Pflichtfeld

Wir schützen deine Daten

Wir bewahren deine persönlichen Daten sicher auf und geben sie nicht an Dritte weiter. Mehr dazu erfährst du in unseren Datenschutzbestimmungen.