Die Migration des E-Commerce-Designsystems bei L’Oréal: Herausforderungen und Lösungen

Dieser Artikel zeichnet die Konferenz von nach Daphna Keim, Designleiter bei L'Oréal, und sein Team von Produktdesignern Yann Stephant, Romain Allain et Thirin Ariaratnam, während des Treffens, das am 29. Februar 2024 im UX-Republic Hub organisiert wurde. Das Thema dieses Abends: „Die Migration des E-Commerce-Designsystems bei L’Oréal: Herausforderungen und Lösungen“.

Daphna Keim trat 2 der D2023C Factory bei – verantwortlich für die Produktion aller E-Commerce-Websites der Gruppe. Bei ihrer Ankunft als neue Designleiterin erkannte sie mehrere organisatorische Probleme bei diesem Weltmarktführer im Beauty-Bereich. Ziel dieser Konferenz war es, die in einem Jahr geleistete Arbeit hervorzuheben, die das E-Commerce-Ökosystem bei L'Oréal tiefgreifend verändert hat.

Die Ankunft eines neuen Designleiters bei L’Oréal: eine Veränderung in der Organisation der Gruppe

Kontext: das Ökosystem eines D2C 

Bevor die Herausforderungen und gefundenen Lösungen vorgestellt werden, ist es wichtig, auf die Grundlagen zurückzukommen. L'Oréal ist in 50 Ländern tätig, die direkten E-Commerce anbieten, und verfügt über 237 „White-Label“-Relay-Sites. Das Team von Daphna Keim arbeitet mit zwei externen Agenturen zusammen, was 7 Produktdesignern entspricht. Das entspricht also einem Team von 10 Produktdesignern und 400 Entwicklern für jeden Standort.

Wie Daphna Keim betont, präsentiert L'Oréal vier Hauptakteure: 

  • Unternehmensteams : Sie betreuen alle globalen Projekte, die dann auf die Divisionen, Zonen und Marken übertragen werden. Heute kümmern sie sich um alle E-Commerce-Angelegenheiten und verwalten das White Label.
  • Abteilungen : Luxus, CPD (Consumer Product), DPP (Professional Products Division), Derma Beauty. 
  • Bereiche geographisch : SAPMENA, LUSA, Nordasien, Europa usw.
  • Markierungen : 70 Marken, die mittlerweile international agieren, davon 34 im E-Commerce.

Sie besteht darauf, dass sie dies hervorheben möchte „Jeder dieser Menschen ist ein potenzieller Gesprächspartner, mit dem er sich austauschen wird und der Wünsche äußern kann.“. 

NGlora-Produktübersicht 

NGlora ist ein weißes Etikett das heute von Unternehmensteams und IT-Teams verwaltet wird. Um näher darauf einzugehen: Es handelt sich um ein Produkt, das aus hergestellt wird Salesforce-Lösung Auf dieser Grundlage erstellten sie alle ihre E-Commerce-Websites mit Blick auf eine Mobile-First-Lösung. Die Idee war „Eine einzigartige Lösung mit einer einzigartigen Architektur zu haben“ wobei alle Variationen im Code vorhanden wären. Dadurch wären alle Standorte in der Lage, die für sie interessanten Komponenten einfach zu konfigurieren. 

Daphna Keim erklärt, wie NGlora funktioniert: 

  • Wir finden zuerst die technische Lösung, was übersetzt „das“ bedeutet Core-System. Auf der Designseite ist das Team für die Gestaltung aller Merkmale des White Labels verantwortlich. „Was wir machen, ist wirklich reines UX: die Kaufreise, die Verbraucherreise und manchmal erstellen wir Variationen für bestimmte Einheiten.“ 
  • Dann gibt es das, was wir nennen Ebenenbereiche die von den geografischen Gebieten unter der Leitung der IT-Gruppen bearbeitet werden. Der Fokus liegt auf allem Lokalen (Zahlungsmethoden, auf ein Land ausgerichtete Treueprogramme usw.)
  • Abschließend unterscheiden wir die Markenebene was das gesamte UI-Overlay bezeichnet. Dies ist markenspezifisch.

 

Aufbau eines Systems: Anwendungsfall und Fachwissen 

Sobald die Grundlagen gelegt sind, stellt der Designleiter seinen Prozess vor, der in vier Phasen unterteilt ist: 

  • Ein Team aufbauen und seine Fähigkeiten hervorheben (Vortrag von Daphna Keim)
  • Der Prozess der Migration zu Figma (Präsentation von Yann Stephant)
  • Der Übergang von einer Bibliothek oder sogar mehreren in Wirklichkeit zu einem Designsystem (Präsentation von Thirin Ariaratnam)
  • Arbeitsmethoden nach Abschluss der Migration (Präsentation von Romain Allain)

Die Onboarding-Phase von Daphna Keim

Vor fast anderthalb Jahren kam Daphna Keim als Design Lead zur D2C Factory bei L'Oréal. Anschließend durchläuft es eine ganz besondere Entdeckungs- und Onboarding-Phase, in der alle organisatorischen Probleme der Marke zum Vorschein kommen. Also beginnt sie damit, sie für uns aufzulisten: 

  • Auf der Designseite gibt es viele Tools. Das Problem war, dass nicht alle dasselbe verwendeten. L'Oréal verwendete Sketch und Abstract. Die beiden anderen Agenturen hatten beschlossen, alle Brand Layers-Dateien in ihren eigenen Arbeitsbereich zu migrieren: Figma.
  • Eine Agenturleitung gab es nicht. Somit hatte jedes Team seinen eigenen Arbeitsbereich und seine eigene Arbeitsweise.
  • Es gab keine Kommunikation zwischen den verschiedenen Teams.
  • Es wurde keine Richtlinie erstellt. 

Im Allgemeinen standen Designer vor einem anderen Problem: Tatsächlich handelt es sich bei ihrem Beruf um wenig anerkanntes Fachwissen. Der Design Lead betont dann „ein Problem der Kommunikation und Legitimität“ aufgrund des Mangels an Designteams. 

Aber wie Daphna Keim so treffend zitiert: „Eine E-Commerce-Site ohne UX und UI ist nicht möglich“. Es galt daher, Lösungen für diese Probleme zu finden.

Die ursprüngliche Idee war daherevangelisieren wozu sie fähig waren. Aber um weiter zu gehen, mussten wir diesem organisatorischen Problem wirklich auf den Grund gehen. Eine Initiative zur Migration zu Figma war bereits gestartet. Sie konnten sich jedoch nicht auf den Prozess einigen, der einer Migration zugrunde liegt. Sie weist dann auf dieses Problem hin: „Was können wir mit Figma tun, um uns in unserem täglichen Leben zu helfen?“. Seine Antwort: Figma würde es ihnen erlauben modellieren, alle Prozesse standardisieren und vor allem alle Markenebenen optimieren und automatisieren. Dieses Konzept der Harmonisierung und Optimierung ermöglichte es ihnen dann, ihren Aktionspunkt für diese Migration zu wählen. Sie kamen zu einem „Endziel“: Erstellen Sie ein einziges Designsystem, das wiederum alle Designsysteme vereint, die für jede ihrer Marken repräsentativ sind.

Zeit, unser Zimmer aufzuräumen!

Yann Stephant wiederum präsentiert den Stand vor Daphnas Ankunft aus seiner Sicht als Produktdesigner. Wie er erklärt, waren die L'Oréal-Teams im Wesentlichen an Sketch und Abstract gebunden. So wurde die Organisation rund um ihre Tools aufgebaut: 

  • Eine Komponentenbibliothek auf Abstract sowie eine globale Masterdatei (die alle E-Commerce-Seiten im White-Label-Format darstellt). Dies würde anschließend für alle Markenebenen geteilt werden.
  • Wenn sie an einer Abfrage arbeiteten, führte dies zwangsläufig zur Aktualisierung einer oder mehrerer Komponenten. Dann war es notwendig, sie mit den Agenturen zu teilen und sie aus der Buchhandlung und dem Meister zu nehmen. Zu diesem Zweck duplizierten sie sie in einem abstrakten Raum, damit die Agenturen die geänderten Elemente wiederherstellen konnten. 

Aber wie der Produktdesigner betont, „Die Dateigrößen waren zu groß, was viele technische Probleme verursachte. Wir mussten eine Lösung finden“. Anschließend werden die verschiedenen vereinfachten Schritte für die Migration vorgestellt: 

  • Importieren Skizzendateien zu Figma 
  • Die Erstellung einer ersten Analyse aller klassifizierten Elemente (Konfiguration von Komponenten, Transkription von Dateien usw.) 
  • Automatisierung, Optimierung, Bestellung und Priorisierung aller Dateien, um sie nach a zu verschieben Designsystem 
  • Die Schaffung eines einzelnes Gitter (weil jede Marke ihr eigenes Raster für ihre E-Commerce-Sites hatte). 

Vereinfachung, Harmonisierung und Optimierung 

Thirin Ariaratnam, Produktdesigner bei L'Oréal, leitet seine Präsentation ein, indem er die Lösung von a enthüllt Einzigartiges Designsystem : „Dies wurde dank Design Tokens ermöglicht“. Dies sind grundlegende Elemente, die ein Designer verwenden wird, um eine Benutzeroberfläche entwerfen zu können. Sie stellen eine gemeinsame Sprache zwischen Designer und Entwickler dar. 

Er hebt die Existenz von drei Arten von Token bei L’Oréal hervor (mehr wissen) : 

  • Die angebotene Basis-Token (was sie vor der Migration verwendet haben.)
  • Die angebotene Semantische Token (für Besonderheiten wie Flächen, Ränder, Texte etc.)
  • Die angebotene Komponententoken (die Erstellung spezifischer „Benennungen“ für Komponenten, die selbst Unterkategorien von Komponenten umfassen.)

„Dank dieses Design-System-Organizer-Plugins ist es uns gelungen, diese Verbindung zwischen dem Design-System und den Masters herzustellen.“

Führen Sie einen Sprint beim DTC (Direct To Consumer) durch.

Romain Allain, ein weiterer Produktdesigner des Teams, interveniert dann, um die fünf Hauptphasen vorzustellen, die sie definieren Produktionsmethoden in diesem neuen Designsystem : 

  1. Die Gründung eines Sprint von 1 Monat, ab einem Ticket (= einer zugewiesenen Designaufgabe), das von einem der Stakeholder der Marke eingereicht wurde. 
  2. Die Verwendung von a Filialsystem auf Figma (= Instanz einer Seite, die wir unabhängig von der Hauptseite ändern können). Dies ist eine nützliche Funktion für große Projekte, denn wie der Produktdesigner betont, „Jede kleine Veränderung kann eine große Wirkung haben“.
  3. Die Verwendung von Atomic Design-Methode (mehr wissen).
  4. Die angebotene Rezensionen und die Behandlungsräume. Kooperationen : Dies führt dazu, dass die vorgenommenen Änderungen kopiert und in eine Sprint-Datei eingefügt werden, auf die alle Beteiligten im Sprint (Entwickler, POs, BAs, Designer usw.) zugreifen können. 
  5. La Bestätigung und Ticketentwicklung : Alle geänderten oder erstellten Zweige werden in den Hauptzweigen zusammengeführt (Bibliotheksaktualisierung). 

 

Zusammenfassung 

Die Designleiterin von L'Oréal schließt diese Präsentation ab, indem sie die Arbeit ihres Teams hervorhebt, die es ermöglicht hat, das E-Commerce-Ökosystem der Marke aufzurütteln. Sie unterstreicht die Bedeutung dieses Punktes: „Unsere Migration zu Figma mag einfach erscheinen, aber letztendlich war die Reise ziemlich komplex“. 

Am Ende geht sie auf eines der aktuellen Probleme ihres Teams ein. Wie können wir die „Design“-Expertise aufrechterhalten und gleichzeitig ein reduziertes Kompetenzzentrum aufrechterhalten? Fortgesetzt werden…

 

 

 Inès Barbara, Kommunikations- und Marketingassistent bei UX-Republic