D'Migratioun vum E-Commerce Design System bei L'Oréal: Erausfuerderungen a Léisungen

Dësen Artikel retraces der Konferenz vun Daphna Keim, Design Lead bei L'Oréal, a säin Team vu Produktdesigner Yann Stephant, Romain Allain et Thirin Ariaratnam, während der Meetup organiséiert den 29. Februar 2024 am UX-Republic Hub. D'Thema vun dësem Owend: "D'Migratioun vum E-Commerce Design System bei L'Oréal: Erausfuerderungen a Léisungen".

D'Daphna Keim ass bei der D2C Factory bäikomm - verantwortlech fir all d'E-Commerce-Site vum Grupp ze produzéieren - am Joer 2023. No hirer Arrivée als neien Design Lead, huet si verschidde organisatoresch Probleemer an dësem Weltleader a Schéinheet identifizéiert. D'Zil vun dëser Konferenz war d'Aarbecht ze ënnersträichen, déi an engem Joer erreecht gouf, Aarbecht déi den E-Commerce Ökosystem zu L'Oréal déif transforméiert huet.

D'Arrivée vun engem neien Design Lead bei L'Oréal: eng Verréckelung an der Organisatioun vun der Grupp

Kontext: den Ökosystem vun engem D2C 

Ier Dir d'Erausfuerderungen a Léisunge virstellt, ass et wichteg zréck op d'Fundamenter ze goen. L'Oréal schafft a 50 Länner, déi direkten E-Commerce ubidden, an huet 237 "White Label" Relais Sites. Dem Daphna Keim seng Equipe schafft mat zwou externen Agencen, d'Äquivalent vu 7 Produktdesigner. Dëst entsprécht also engem Team vun 10 Produktdesigner a 400 Entwéckler fir all Site.

Wéi d'Daphna Keim weist, stellt L'Oréal 4 Haaptspiller vir: 

  • Corporate Équipë : Si iwwerwaachen all global Projeten déi dann an d'Divisiounen, Zonen a Marken kaskadéieren. Haut këmmeren si sech ëm all E-Commerce-Saache a verwalten de wäisse Label.
  • Divisiounen : Luxus, CPD (Consumer Product), DPP (Professional Products Division), Derma Beauty. 
  • Beräicher geographesch : SAPMENA, LUSA, Nordasien, Europa, etc.
  • Marks : 70 Marken déi elo international sinn, dorënner 34 am E-Commerce.

Si insistéiert op d'Tatsaach, datt si dat wëll Highlight "Jidderee vun dëse Leit si potenziell Gespréichspartner mat deenen se austauschen an déi Ufroe maache kënnen". 

NGlora Produit Iwwersiicht 

NGlora ass a wäisse Label déi haut vun Corporate Teams an IT Teams geréiert gëtt. Fir an Detailer ze goen, ass et e Produkt aus dem Salesforce Léisung op déi si komm sinn all hir E-Commerce Siten ze kreéieren, mat enger mobil-éischt Léisung am Kapp. D'Iddi war "eng eenzegaarteg Léisung mat enger eenzegaarteger Architektur ze hunn" wou all Variatiounen am Code präsent wieren. Als Resultat wäerten all Site fäeg sinn d'Komponent(en) déi hinnen interesséieren einfach ze konfiguréieren. 

D'Daphna Keim erkläert wéi NGlora funktionnéiert: 

  • Mir fannen éischt de Ingenieur Léisung, déi iwwersetzt op de Kär System. Op der Designsäit ass säin Team verantwortlech fir all d'Features vum wäisse Label ze designen. "Wat mir maachen ass wierklech reng UX: d'Kaafrees, d'Konsumentrees an heiansdo kreéiere mir Variatiounen fir verschidden Entitéiten." 
  • Da ginn et wat mir nennen Layer Beräicher déi vun de geographesche Beräicher gehandhabt ginn, ënnert der Leedung vun den IT-Gruppen. Dëst konzentréiert sech op alles lokal (Bezuelmethoden, Loyalitéit Programmer gezielt an engem Land, etc.)
  • Schlussendlech ënnerscheede mir de Brand Layer déi de ganzen UI Iwwerlager bezeechent. Dëst ass spezifesch fir all Mark.

 

E System bauen: Benotzungsfall an Expertise 

Wann d'Fundamenter geluecht sinn, presentéiert den Design Lead dann hire Prozess, segmentéiert a 4 Etappen: 

  • En Team bauen a seng Fäegkeeten ervirhiewen (Presentatioun vum Daphna Keim)
  • De Prozess vun der Migratioun op Figma (Presentatioun vum Yann Stephant)
  • Den Iwwergank vun enger Bibliothéik, oder souguer e puer an der Realitéit, an en Design System (Presentatioun vum Thirin Ariaratnam)
  • Aarbechtsmethoden wann d'Migratioun fäerdeg ass (Presentatioun vum Romain Allain)

Dem Daphna Keim seng Onboarding Phase

Virun bal annerhallwem Joer ass d'Daphna Keim bei der D2C Factory zu L'Oréal als Design Lead ugeschloss. Et geet dann duerch eng zimlech speziell Entdeckungs- an Onboard-Phase, wou all organisatoresch Problemer vun der Mark entstinn. Also fänkt hatt un andeems se se fir eis oplëschten: 

  • Op der Design Säit ginn et vill Tools. De Problem war datt se net all déiselwecht benotzt hunn. L'Oréal benotzt Sketch an Abstrakt. Déi zwou aner Agenturen hunn decidéiert all Brand Layers Dateien op hiren eegene Workspace ze migréieren: Figma.
  • Et war keng Agence Gestioun. All Team hat also hiren eegene Workspace an hiren eegene Wee fir ze schaffen.
  • Et gouf keng Kommunikatioun tëscht de verschiddenen Equippen.
  • Keng Richtlinn gouf geschaf. 

Am Allgemengen hunn Designer mat engem anere Problem konfrontéiert: tatsächlech ass hire Beruff e bëssen unerkannt Expertise. Den Design Lead betount dann "e Problem vu Kommunikatioun a Legitimitéit" wéinst dem Mangel u Designteams. 

Awer wéi d'Daphna Keim sou gutt zitéiert, "En E-Commerce Site ouni UX an UI ass net méiglech". Et war also néideg Léisunge fir dës Problemer ze fannen.

Déi éischt Iddi war also zeevangeliséieren wat si fäeg waren ze maachen. Awer fir méi wäit ze goen, hu mir dës organisatoresch Problem wierklech misse gräifen. Eng Initiativ fir op Figma ze migréieren war schonn opgemaach. Si konnten sech awer net eens ginn iwwert de Prozess deen eng Migratioun ënnerläit. Si weist dann dëse Problem op: "Wat kënne mir mat Figma maachen fir eis an eisem Alldag ze hëllefen?". Seng Äntwert: Figma géif hinnen erlaben Modell, standardiséiert all hir Prozesser a virun allem all hir Brand Layers optimiséieren an automatiséieren. Dëst Konzept vun der Harmoniséierung an der Optimiséierung huet hinnen dunn erlaabt hiren Handlungswénkel fir dës Migratioun ze wielen. Si sinn zu engem "Endziel" ukomm: en eenzegen Design System erstellen deen am Tour all Design Systemer Vertrieder vun all hire Marken kombinéiert.

Zäit eis Zëmmer ze botzen!

De Yann Stephant stellt den Zoustand vum Spill virum Daphna senger Arrivée vu senger Siicht als Produkt Designer vir. Wéi hien erkläert, waren d'L'Oréal Teams wesentlech u Sketch an Abstract verbonnen. Hei ass wéi d'Organisatioun ronderëm seng Tools gebaut gouf: 

  • Eng Bibliothéik vu Komponenten op Abstrakt, souwéi eng global Master Datei (presentéiert all E-Commerce Säiten am wäisse Label). Dëst géif duerno fir all Brand Layer gedeelt ginn.
  • Wann se un enger Ufro geschafft hunn, huet et onbedéngt zum Update vun engem oder méi Komponenten gefouert. Et war dann néideg fir se mat den Agencen ze deelen, se aus dem Librairie an dem Master erauszehuelen. Fir dëst ze maachen, hu se se an engem abstrakte Raum duplizéiert sou datt d'Agencen kéinte kommen an d'Elementer recuperéieren déi geännert goufen. 

Awer wéi de Produkt Designer weist, "D'Dateigréissten waren ze grouss, wat vill technesch Problemer verursaacht huet. Mir hu missen eng Léisung fannen". Et presentéiert dann déi verschidde vereinfacht Schrëtt fir d'Migratioun: 

  • Import Skizz Dateien op Figma 
  • Etablissement vun enger initialer Analyse vun allem wat klasséiert gouf (Konfiguratioun vu Komponenten, Transkriptioun vu Dateien, asw.) 
  • Automatisatioun, Optimisatioun, Uerdnung a Prioritéit vun all de Fichieren fir op eng plënneren Design Systemer 
  • D'Kreatioun vun engem eenzegt Gitter (well all Mark säin eegent Gitter fir seng E-Commerce Sites hat). 

Vereinfachung, Harmoniséierung an Optimisatioun 

Den Thirin Ariaratnam, Produkt Designer bei L'Oréal, stellt seng Presentatioun vir andeems se d'Léisung vun enger Eenzegaarteg Design System : "Dëst gouf méiglech gemaach dank Design Tokens". Dëst sinn Basiselementer déi en Designer benotzt fir en Interface ze designen. Si representéieren eng gemeinsam Sprooch tëscht Designer an Entwéckler. 

Hien beliicht d'Existenz vun 3 Aarte vu Tokens bei L'Oréal (fir méi ze wëssen) : 

  • Les Base Tokens (wat se virun der Migratioun benotzt hunn.)
  • Les Semantesch Tokens (fir Spezifizitéiten wéi Flächen, Grenzen, Texter, asw.)
  • Les Komponent Tokens (d'Schafe vu spezifesche "Nimm" fir Komponenten déi selwer Ënnerkategorien vu Komponenten enthalen.)

"Dank dem Design System Organisateur Plugging, hu mir et fäerdeg bruecht dëse Link tëscht dem Design System an de Masters ze kreéieren."

Run e Sprint am DTC (Direct To Consumer)

De Romain Allain, en anere Produktdesigner vun der Equipe, intervenéiert dann fir déi 5 Haaptstadien ze presentéieren déi hir Produktiounsmethoden an dësem neien Design System : 

  1. D'Grënnung vun engem Sprint vun 1 Mount, vun engem Ticket (= eng zougewisen Design Aufgab) vun engem vun de Marken Akteuren presentéiert. 
  2. Mat engem Filial System op Figma (= Instanz vun enger Säit déi mir onofhängeg vun der Haaptsäit änneren kënnen). Dëst ass eng nëtzlech Feature fir grouss Projeten, well wéi de Produkt Designer weist, "All kleng Ännerung kann e groussen Impakt hunn".
  3. D'Benotzung vun Atomic Design Method (fir méi ze wëssen).
  4. Les Rezensiounen et les Zesummenaarbecht : dëst resultéiert an d'Kopie an d'Paste vun den Ännerungen, déi gemaach goufen an e Sprint-Datei, zougänglech fir all Akteuren am Sprint (Entwéckler, POs, BAs, Designer, etc.). 
  5. La publizéieren et le Ticket Entwécklung : all Ändern oder erstallt Filialen ginn an d'Haaptzweige fusionéiert (Bibliothéikupdate) 

 

Konklusioun 

Den Design Lead vu L'Oréal schléisst dës Presentatioun of andeems se d'Aarbecht vun hirem Team ënnersträicht, sou datt et méiglech ass den E-Commerce-Ökosystem vun der Mark z'erwëschen. Si ënnersträicht d'Wichtegkeet op dësem Punkt: "Eis Migratioun op Figma schéngt einfach awer schlussendlech war d'Rees zimlech komplex". 

Si schlussendlech eng vun hiren aktuellen Themen vun hirem Team adresséiert. Wéi kënne mir Expertise "Design" erhalen an e reduzéierten Expertisezentrum behalen? Fortsetzung kënnt no…

 

 

 Inès Barbara, Kommunikatiouns- a Marketingassistent bei UX-Republic