Dieser Artikel berichtet über die Präsentation von Daphna Keim , Design Lead bei L'Oréal, und ihrem Team aus Produktdesignern Yann Stephant , Romain Allain und Thirin Ariaratnam beim Meetup am 29. Februar 2024 im UX-Republic Hub. Das Thema des Abends lautete: „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 betont, dass sie hervorheben möchte, dass „jeder dieser Menschen ein potenzieller Gesprächspartner ist, mit dem sie Ideen austauschen und der Wünsche äußern kann“.

NGlora-Produktübersicht 

NGlora ist eine White-Label- Lösung, die aktuell von den Abteilungen für Unternehmenskommunikation und IT verwaltet wird. Genauer gesagt handelt es sich um ein Produkt, das auf der Salesforce-Plattform basiert . Mit dieser Plattform wurden bereits alle E-Commerce-Websites des Unternehmens mit einem Mobile-First-Ansatz erstellt. Ziel war eine einheitliche Lösung mit einer einheitlichen Architektur, in der alle Varianten im Code enthalten sind. Dadurch kann jede Website die benötigten Komponenten einfach 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. 

Generell standen Designer vor einem weiteren Problem: Ihr Beruf genießt nur geringe Anerkennung. Der Design Lead hob daraufhin ein „Kommunikations- und Legitimationsproblem“ aufgrund fehlender Designteams hervor.

Wie Daphna Keim so treffend formuliert: „Eine E-Commerce-Website ohne UX und UI ist unmöglich .“ Daher war es notwendig, Lösungen für diese Probleme zu finden.

Die ursprüngliche Idee war daher, ihre Kompetenzen hervorzuheben . Um jedoch weiterzukommen, musste das Kernproblem der Organisation angegangen werden. Eine Initiative zur Migration zu Figma war bereits gestartet worden. Man konnte sich jedoch nicht auf den genauen Migrationsprozess einigen. Daraufhin stellte sie die Frage: „Wie können wir Figma nutzen, um unsere täglichen Abläufe zu optimieren?“ Ihre Antwort: Figma würde es ihnen ermöglichen, alle ihre Prozesse zu modellieren und zu standardisieren und vor allem alle ihre Markenebenen zu optimieren und zu automatisieren . Dieses Konzept der Harmonisierung und Optimierung half ihnen, ihren Migrationsansatz zu wählen. Sie einigten sich auf ein gemeinsames Ziel: die Schaffung eines einheitlichen Designsystems, das alle Designsysteme ihrer einzelnen Marken vereinen sollte.

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. 

Wie der Produktdesigner jedoch betont, „waren die Dateien zu groß, was zahlreiche technische Probleme verursachte. Eine Lösung musste gefunden werden .“ Anschließend beschreibt er die vereinfachten Schritte für die Migration:

• 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, leitete seine Präsentation mit der Vorstellung eines einzigartigen Designsystems ein : „Dies wurde durch Design-Tokens ermöglicht .“ Dabei handelt es sich um grundlegende Elemente, die Designer zur Erstellung von Benutzeroberflächen verwenden. Sie stellen eine gemeinsame Sprache zwischen Designern und Entwicklern dar.

Er hebt die Existenz von 3 Arten von Tokens bei L'Oréal hervor (mehr dazu hier) :

• Die Basis-Token (was sie vor der Migration verwendet haben.)
• Die Semantische Token (für Besonderheiten wie Flächen, Ränder, Texte etc.)
• Die 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 im Team, stellte anschließend die fünf Hauptschritte vor, die ihre Produktionsmethoden in diesem neuen Designsystem definieren :

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 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 Validierungsprüfungen und Ticketentwicklung : Alle geänderten oder erstellten Zweige werden in den Hauptzweigen zusammengeführt (Bibliotheksaktualisierung). 

 

Fazit 

Die Designchefin von L'Oréal schloss die Präsentation mit einem Blick auf die Arbeit ihres Teams ab, die das E-Commerce-Ökosystem der Marke grundlegend verändert hat. Sie betonte die Wichtigkeit dieses Punktes: „Unsere Migration zu Figma mag einfach erscheinen, aber letztendlich war der Prozess 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 Marketingassistentin bei UX-Republic