Dit artikel beschrijft de conferentie van Daphna Keim, Design Lead bij L'Oréal, en zijn team van productontwerpers Yann Stephant, Romain Allain et Thirin Ariaratnam, tijdens de meetup georganiseerd op 29 februari 2024 in de UX-Republic Hub. Het thema van deze avond: “De migratie van het e-commerce Design System bij L’Oréal: uitdagingen en oplossingen”.

Daphna Keim trad in 2 in dienst bij de D2023C Factory – verantwoordelijk voor de productie van alle e-commercesites van de groep. Bij haar aankomst als nieuwe Design Lead identificeerde ze verschillende organisatorische problemen binnen deze wereldleider in schoonheid. Het doel van deze conferentie was om het werk dat in één jaar is verricht onder de aandacht te brengen, werk dat het e-commerce-ecosysteem bij L'Oréal diepgaand heeft getransformeerd.

De komst van een nieuwe Design Lead bij L’Oréal: een verschuiving in de organisatie van de groep

Context: het ecosysteem van een D2C 

Voordat we de gevonden uitdagingen en oplossingen introduceren, is het belangrijk om terug te gaan naar de basis. L'Oréal is actief in 50 landen die directe e-commerce aanbieden, en heeft 237 “white label” relay-sites. Het team van Daphna Keim werkt samen met twee externe bureaus, het equivalent van zeven productontwerpers. Dit komt dus neer op een team van 7 Product Designers en 10 ontwikkelaars per site.

Zoals Daphna Keim opmerkt, presenteert L'Oréal 4 hoofdrolspelers: 

• Bedrijfsteams : zij houden toezicht op alle mondiale projecten die vervolgens overgaan in de divisies, zones en merken. Tegenwoordig verzorgen zij alle e-commercezaken en beheren zij het white label.
• Divisies : Luxe, CPD (consumentenproducten), DPP (divisie professionele producten), Derma-schoonheid. 
• Gebieden geografisch : SAPMENA, LUSA, Noord-Azië, Europa, enz.
• Merktekens : 70 merken die nu internationaal zijn, waarvan 34 in e-commerce.

Ze benadrukt dat ze dat onder de aandacht wil brengen “elk van deze mensen zijn potentiële gesprekspartners met wie ze zullen uitwisselen, en die verzoeken kunnen doen”. 

NGlora-productoverzicht 

NGlora is een wit label dat tegenwoordig wordt beheerd door bedrijfsteams en IT-teams. Om in details te treden: het is een product gemaakt van de Salesforce-oplossing waarop ze al hun e-commercesites kwamen creëren, met een mobile-first oplossing in gedachten. Het idee was “een unieke oplossing hebben met een unieke architectuur” waar alle variaties in de code aanwezig zouden zijn. Als gevolg hiervan zouden alle sites de voor hen interessante componenten gemakkelijk kunnen configureren. 

Daphna Keim legt uit hoe NGlora werkt: 

• Wij vinden eerst de technische oplossing, wat zich vertaalt naar de hoofdsysteem. Aan de ontwerpkant is het team verantwoordelijk voor het ontwerpen van alle kenmerken van het white label. “Wat we doen is echt pure UX: het aankooptraject, het consumententraject en soms creëren we variaties voor bepaalde entiteiten.” 
• Dan zijn er wat we noemen Laaggebieden die worden afgehandeld door de geografische gebieden, onder leiding van de IT-groepen. Dit richt zich op alles wat lokaal is (betaalmethoden, loyaliteitsprogramma's gericht op een land, enz.)
• Tenslotte onderscheiden we de Merklaag die de volledige UI-overlay aanduidt. Dit is specifiek voor elk merk.

 

Een systeem bouwen: use case en expertise 

Zodra de basis is gelegd, presenteert de Design Lead vervolgens hun proces, opgedeeld in 4 fasen: 

• Een team samenstellen en de vaardigheden ervan onder de aandacht brengen (presentatie door Daphna Keim)
• Het proces van migreren naar Figma (presentatie door Yann Stephant)
• De overgang van een bibliotheek, of zelfs meerdere in werkelijkheid, naar een ontwerpsysteem (presentatie door Thirin Ariaratnam)
• Werkmethoden zodra de migratie voltooid is (Presentatie door Romain Allain)

De onboardingfase van Daphna Keim

Bijna anderhalf jaar geleden trad Daphna Keim in dienst bij de D2C Factory van L'Oréal als Design Lead. Vervolgens doorloopt het een nogal bijzondere ontdekkings- en onboarding-fase, waarin alle organisatorische problemen van het merk naar voren komen. Dus begint ze met het opsommen van ze voor ons: 

• Aan de ontwerpkant zijn er veel hulpmiddelen. Het probleem was dat ze niet allemaal dezelfde gebruikten. L'Oréal gebruikte schets en abstract. De twee andere bureaus hadden besloten alle Brand Layers-bestanden te migreren naar hun eigen werkruimte: Figma.
• Er was geen agentschapsmanagement. Zo had elk team zijn eigen werkruimte en zijn eigen manier van werken.
• Er was geen communicatie tussen de verschillende teams.
• Er is geen richtlijn gemaakt. 

Over het algemeen hadden ontwerpers met een ander probleem te maken: in feite is hun beroep een weinig erkende expertise. De Design Lead benadrukt vervolgens “een probleem van communicatie en legitimiteit” vanwege het gebrek aan ontwerpteams. 

Maar zoals Daphna Keim zo goed citeert: “een e-commercesite zonder UX en UI is niet mogelijk”. Het was daarom noodzakelijk om oplossingen voor deze problemen te vinden.

Het oorspronkelijke idee was dan ook omevangeliseren waartoe zij in staat waren. Maar om verder te gaan, moesten we dit organisatorische probleem echt tot op de bodem uitzoeken. Er was al een initiatief geopend om naar Figma te migreren. Ze konden het echter niet eens worden over het proces dat ten grondslag ligt aan een migratie. Vervolgens wijst ze op dit probleem: “Wat kunnen we met Figma doen om ons te helpen in ons dagelijks leven?”. Zijn antwoord: Figma zou dat toestaan modelleren, al hun processen standaardiseren en vooral al hun merklagen optimaliseren en automatiseren. Dit concept van harmonisatie en optimalisatie stelde hen vervolgens in staat hun actiehoek voor deze migratie te kiezen. Ze kwamen tot een ‘einddoel’: één enkel Design System creëren dat op zijn beurt alle Design Systems vertegenwoordigt die representatief zijn voor elk van hun merken.

Tijd om onze kamer op te ruimen!

Yann Stephant presenteert op zijn beurt de stand van zaken vóór de komst van Daphna vanuit zijn standpunt als productontwerper. Zoals hij uitlegt, waren de teams van L'Oréal in wezen gehecht aan Sketch en Abstract. Hier ziet u hoe de organisatie rond haar tools is opgebouwd: 

• Een bibliotheek met componenten op Abstract, evenals een globaal masterbestand (waarin alle e-commercepagina's in white label worden gepresenteerd). Dit wordt vervolgens gedeeld voor alle merklagen.
• Als ze aan een query werkten, leidde dit noodzakelijkerwijs tot de update van een of meer componenten. Het was toen nodig om ze met de bureaus te delen en ze uit de boekwinkel en de Meester te halen. Om dit te doen, dupliceerden ze ze in een abstracte ruimte, zodat de bureaus de gewijzigde elementen konden komen ophalen. 

Maar zoals de productontwerper opmerkt: “De bestandsgroottes waren te groot, wat voor veel technische problemen zorgde. We moesten een oplossing vinden”. Vervolgens worden de verschillende vereenvoudigde stappen voor de migratie gepresenteerd: 

• Importeren Schetsbestanden naar Figma 
• Het maken van een eerste analyse van alles wat geclassificeerd was (configuratie van componenten, transcriptie van bestanden, enz.) 
• Automatisering, optimalisatie, bestellen en prioriteren van alle bestanden om te verplaatsen naar een Ontwerpsysteem 
• De oprichting van een enkel rooster (omdat elk merk zijn eigen raster had voor zijn e-commercesites). 

Vereenvoudiging, harmonisatie en optimalisatie 

Thirin Ariaratnam, Product Designer bij L'Oréal, introduceert zijn presentatie door de oplossing te onthullen van a Uniek ontwerpsysteem : “Dit werd mogelijk gemaakt dankzij Design Tokens”. Dit zijn basiselementen die een ontwerper zal gebruiken om een ​​interface te kunnen ontwerpen. Ze vertegenwoordigen een gemeenschappelijke taal tussen ontwerper en ontwikkelaar. 

Hij benadrukt het bestaan ​​van 3 soorten tokens bij L’Oréal (om meer te weten) : 

• de Basistokens (wat ze vóór de migratie gebruikten.)
• de Semantische tokens (voor bijzonderheden zoals vlakken, randen, teksten etc.)
• de Componenttokens (het creëren van specifieke “namen” voor componenten die zelf subcategorieën van componenten bevatten.)

“Dankzij deze Design System organizer plugging zijn we erin geslaagd deze link tussen het Design System en de Masters te creëren.”

Een sprint uitvoeren bij het DTC (Direct To Consumer)

Romain Allain, een andere productontwerper van het team, komt vervolgens tussenbeide om de 5 belangrijkste fases voor te stellen die hun product definiëren productiemethoden in dit nieuwe Design System : 

1. De oprichting van een sprint van 1 maand, vanaf een ticket (= een toegewezen ontwerpopdracht) ingediend door een van de stakeholders van het merk. 
2. Het gebruik van een vertakkingssysteem op Figma (= exemplaar van een pagina die we onafhankelijk van de hoofdpagina kunnen wijzigen). Dit is een handige functie voor grote projecten, omdat, zoals de Product Designer opmerkt, “Elke kleine verandering kan een grote impact hebben”.
3. Het gebruik van Atomaire ontwerpmethode (om meer te weten).
4. de beoordelingen en samenwerkingen : dit resulteert in het kopiëren en plakken van de aangebrachte wijzigingen in een Sprint-bestand, toegankelijk voor alle belanghebbenden in de sprint (ontwikkelaars, PO's, BA's, ontwerpers, enz.). 
5. La bevestiging en ontwikkeling van kaartjes : alle gewijzigde of aangemaakte filialen worden samengevoegd in de hoofdfilialen (bibliotheekupdate) 

 

Conclusie 

De Design Lead van L'Oréal sluit deze presentatie af door het werk van haar team onder de aandacht te brengen, waardoor het mogelijk wordt om het e-commerce-ecosysteem van het merk op te schudden. Zij benadrukt het belang op dit punt: “Onze migratie naar Figma lijkt misschien eenvoudig, maar uiteindelijk was de reis behoorlijk complex”. 

Uiteindelijk behandelt ze een van de huidige problemen van haar team. Hoe kunnen we de “ontwerp”-expertise in stand houden en tegelijkertijd een kleiner expertisecentrum behouden? Wordt vervolgd…

 

 

 Inès Barbara, Communicatie- en marketingassistent bij UX-Republic