Projekt: La Biosthétique Paris
Das Beste aus zwei Welten: Wie Kunden und Händler von der Progressive Web App profitieren
Mit über 10.000 Partner-Salons in 37 Ländern zählt La Biosthétique zu den Premium-Anbietern für Kosmetikprodukte. Bei der Betreuung seiner in 10 Ländern verfügbaren E-Commerce-Plattform setzt das familiengeführte Unternehmen seit 2018 auf die Expertise von Tudock. Weil im Juni 2020 der offizielle Support für die Shop-Software Magento 1 ausgelaufen war, entschied sich La Biosthétique gemeinsam mit Tudock, künftig auf den Nachfolger Magento 2 zu setzen. Die Migration kommt aufgrund der neuen Software-Architektur und dem Einsatz modernster Technologien einer Neuentwicklung gleich. La Biosthétique und Tudock nutzten dieses Replatforming-Projekt zur Verbesserung der Benutzerfreundlichkeit und zur Optimierung der dahinterliegenden Prozesse. Der Fokus lag dabei vor allem auf der Optimierung der mobilen User Experience und der Datenschnittstellen. Die eingesetzte Progressive Web App (PWA) avancierte dabei zum Herzstück des Projekts.
Der Kunde Laboratoire Biosthétique Kosmetik GmbH & Co. KG
- Inhabergeführtes Familienunternehmen
- Gegründet 1948
- Firmensitz in Paris und Pforzheim
- Produktions- und Logistikstandort in Pforzheim
- Seit 2011 je eine E-Commerce Plattform für B2B und B2C
- Produktsortiment reicht von Haar-, Kopfhaut- und Hautpflege bis hin zur dekorativen Kosmetik
- ca. 10.000 Partner-Salons weltweit, davon ca. 2.000 in Deutschland
Schönheit als Mission: Seit über 70 Jahren kreiert und produziert La Biosthétique Pflege-, Kosmetik- und Styling-Produkte. In allen Artikeln aus dem Premium-Segment stecken natürliche Inhaltsstoffe, modernste Forschung und die Leidenschaft für Schönheit. Doch jede Haut und jedes Haar ist anders und braucht dementsprechend spezielle Pflege. Bei La Biosthétique steht der Mensch deswegen im Mittelpunkt. Um individuell auf die Bedürfnisse jedes Kunden einzugehen, arbeiten in den über 10.000 Partner-Salons eigens ausgebildete Berater. Marcel Contier bewies ein Gespür für Trends, Mode und Individualität, als er 1948 das mittlerweile international ausgerichtete Unternehmen La Biosthétique gründete. Siegfried Weiser und seine Söhne Jean-Marc und Felix führen Contiers Werte als heutige Eigentümer fort – an zwei Firmensitzen. In Paris, in der Hauptstadt der Mode und Ästhetik, wird die Marke repräsentiert und kultiviert. Pforzheim ist der Maschinenraum des Unternehmens: Hier sind Produktion, Forschung und Logistik angesiedelt.
Die Ausgangssituation
Die Umstellung auf Magento 2 sollte im Sinne von La Biosthétique für Anpassungen und Verbesserungen am bisherigen Status Quo genutzt werden. Im Fokus der Anforderungen stand die User Experience für Smartphone- oder Tablet-Nutzer. Bei einem Anteil von 70 Prozent, die mobil auf den Online-Shop zugreifen, sind ein ansprechendes Design und leichte Handhabung essentiell. Für die optimale digitale Kundenansprache stand dabei die Entwicklung einer nativen App zur Diskussion, die die Nutzungsintensität und Kundenbindung erhöhen sollte. Aufgrund der großen Anzahl der mittlerweile angebotenen Apps und der nachlassenden Bereitschaft, diese herunterzuladen, entschied sich La Biosthétique gemeinsam mit Tudock letztlich jedoch für eine Progressive Web App (PWA), einem Hybriden aus einer Webseite und einer App. Eine PWA kombiniert App-ähnliches Design und Features wie Push-Benachrichtigungen oder den Offline-Modus mit den Vorzügen einer Website.
Die Herausforderung
Das Kerngeschäft von La Biosthétique bleibt der Verkauf in den Friseur- und Beautysalons. Aufgrund der zunehmenden Bedeutung des digitalen Vertriebs, möchte das Unternehmen seine Online-Plattformen für Kunden im B2C- und im B2B-Bereich weiter ausbauen. Ziel ist es, dem Kunden ein tolles Kauferlebnis in Zusammenarbeit mit den Partner-Salons zu bieten.
Durch die Premium-Produkte von La Biosthétique sind die Anforderungen an Design und User Experience zudem besonders hoch. Nicht nur die Produkte sollen für sich sprechen, auch der Content muss strategisch in das Einkaufserlebnis integriert werden. Bei hochpreisigen Produkten brauchen die Kunden die Sicherheit, die richtige Kaufentscheidung getroffen zu haben. Diese Funktion wird durch aussagekräftigen und informativen Content erzielt – Stichwort Content Commerce. Mit Texten, Bildern oder Videos fühlt sich der Nutzer dem Produkt verbundener. Apropos Daten: La Biosthétique ist international ausgerichtet, der Online-Shop ist in 10 Ländern und 7 verschiedenen Sprachen verfügbar. Neben Frankreich und Deutschland liefert das Unternehmen in weitere Länder wie Schweiz, Italien, Dänemark, u.v.w.
Die größte Herausforderung für La Biosthétique und Tudock war die Umsetzung einer Progressive Web App. Es gibt aktuell zwar viele Lösungen auf dem Markt, die meisten sind jedoch noch nicht ausgereift oder passen nicht zu den Anforderungen von La Biosthétique.
Die Lösung
Der Startpunkt des Projekts war eine Analyse der bestehenden E-Commerce-Plattform – mit dem Ziel, eine Roadmap vom Status Quo bis zum Soll-Zustand festzulegen. Dabei zeigte Tudock sämtliche Lösungswege und möglichen Features auf. Das Konzept für das zukünftige Design und die damit verbundene User Experience entwarf eine externe Designagentur in Form eines Klickdummies, einem interaktiven Webseiten-Prototypen. So stand die User Experience von Beginn an im Mittelpunkt und wurde iterativ und nachhaltig optimiert.
Gemeinsam mit den Experten von Tudock hat sich das La Biostétique-Team für die Realisierung der Progressive Web App mit Vue Storefront entschieden. Die Open-Source-Lösung bietet ein umfassendes Design-Tool-Set und eine Tracking-Funktion, bspw. zur Bestimmung des Standorts bei der Salon-Suche. Kunden haben ein App-ähnliches Shopping-Erlebnis auf all ihren Endgeräten – ganz ohne Download und ständige Updates. In Zukunft kann La Biostétique noch weitere Features wie Push-Benachrichtigungen, die Nutzung im Offline-Modus oder einen Barcode-Scanner implementieren.
Aus Händler-Sicht lohnt sich die PWA-Lösung ohnehin: Vue Storefront ist plattformunabhängig und lässt sich mithilfe einer intuitiven API (Programmierschnittstelle) mit verschiedenen Backends verbinden. So kann das Team von La Biosthétique beispielsweise flexibler an den Shop-Inhalten arbeiten.
Aus Händler-Sicht lohnt sich die PWA-Lösung ohnehin: Vue Storefront ist plattformunabhängig und lässt sich mithilfe einer intuitiven API (Programmierschnittstelle) mit verschiedenen Backends verbinden. So kann das Team von La Biosthétique beispielsweise flexibler an den Shop-Inhalten arbeiten.
Aufgrund der internationalen Ausrichtung setzt La Biosthétique für das Hosting auf eine Cloud-Infrastruktur von Amazon Web Services (AWS). Bei erhöhtem Seiten-Traffic verteilt AWS die Zugriffslast automatisch und skaliert bei Bedarf mithilfe zusätzlicher Rechenknoten auf die benötigte Serverleistung. Außerdem arbeitet AWS mit Caching (Zwischenspeichern). User-Anfragen an das Shop-System werden auf Caching-Servern zwischengespeichert. Ändert sich zwischen zwei identischen Anfragen nichts an den zu ladenden Daten (Produktdetails, Bilder, etc.), antwortet nicht das System selbst, sondern der Caching-Server. Mit diesem Gesamtpaket ist die Stabilität des Shops für alle Länderseiten gesichert.
Haptik und persönliche Beratung in den Salons machen den Erfolg von La Biostétique aus. Im Online-Shop übernehmen Videos, Bilder oder Animationen diese Rolle, um den Kunden von den Produkten zu überzeugen. Zur einfachen Erstellung dieser Inhalte ist mit dem Content Management System von Styla ein hochwertiges CMS in den Shop integriert.
Das Ergebnis
Der Online-Shop von La Biosthétique erfuhr durch die Einführung der PWA einen Anstieg der Konversionsraten (CR). Auch der neu gesetzte Fokus auf die mobilen Nutzer hat sich gelohnt: Die mobile CR sowie die CR auf dem Tablet stiegen durch die verbesserte User Experience deutlich an.
Das Projekt war zwar extrem herausfordernd, doch jetzt haben wir die Flexibilität, die wir brauchen und auch in Zukunft brauchen werden, um die spezifischen Anforderungen unseres Unternehmens zu erfüllen. Mit Tudock haben wir für all unsere Anforderungen einen starken Partner an der Seite.
Die PWA ist das neue Herzstück des Shops-Systems. Eine fixierte Navigation im unteren Screenbereich sorgt bei mobilen Nutzern für mehr Übersichtlichkeit und für eine verbesserte Nutzerführung. Durch das Hosting über AWS und die Nutzung von Caching-Servern verringerte sich die Ladezeit. Das moderne und elegante Design komplettiert die neue User Experience. Und das zeigt bereits Wirkung: Seit der Umstellung reduzierte sich die Absprungrate. Die User bleiben nicht nur vermehrt im Shop, sie kehren auch häufiger wieder zurück.
Eingesetzte Technologien
Der Ausblick
Die Herausforderung einer PWA-Lösung ist Tudock und La Biosthétique geglückt und bildet das Highlight der Migration zu Magento 2. Wegen des positiven Ergebnisses zieht La Biosthétique in Betracht, die Entwicklung auch für den B2B Bereich zu nutzen. Ein weiteres Ziel ist die zukünftige Optimierung der Performance auf den Länderseiten durch die Nutzung von Servern in der Cloud-Infrastruktur in den jeweiligen Ländern sowie die Implementierung weiterer PWA-Features wie Push-Benachrichtigungen.
Nicht nur für La Biosthétique war das Projekt ein voller Erfolg. Auch Tudock nimmt die dazugewonnene Erfahrung mit Vue Storefront und einer PWA-Lösung mit in kommende Projekte. Noch stecken viele PWA-Anwendungen mitten in der Entwicklung, doch Progressive Web Apps werden an Bedeutung gewinnen und können ein wertvolles Asset für unsere Kunden sein.
Jetzt Kontakt aufnehmen!
