Dit artikel beschrijft de presentatie van Daphna Keim , Design Lead bij L'Oréal, en haar team van productontwerpers Yann Stephant , Romain Allain en Thirin Ariaratnam , tijdens de meetup op 29 februari 2024 in de UX-Republic Hub. Het thema van de avond was: "De migratie van het e-commerce design systeem 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 wil laten zien dat "ieder van deze mensen potentiële gesprekspartners zijn met wie ze ideeën kunnen uitwisselen en die verzoeken kunnen doen".

NGlora-productoverzicht 

NGlora is een white-label oplossing die momenteel wordt beheerd door de bedrijfs- en IT-teams. Het is een product gebouwd op het Salesforce-platform , dat ze gebruikten voor al hun e-commercewebsites, met een mobile-first benadering. Het idee was om één oplossing met één architectuur te hebben, waarbij alle varianten in de code zouden zijn opgenomen. Hierdoor zou elke website eenvoudig de benodigde componenten 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 kampten ontwerpers met nog een ander probleem: hun vakgebied wordt slecht erkend. De Design Lead benadrukte vervolgens "een probleem van communicatie en legitimiteit" als gevolg van het gebrek aan ontwerpteams.

Maar zoals Daphna Keim zo treffend stelt: "een e-commercesite zonder UX en UI is onmogelijk ." Het was daarom noodzakelijk om oplossingen voor deze problemen te vinden.

Het oorspronkelijke idee was dan ook om te laten zien wat ze konden. Maar om verder te komen, was het nodig om de kern van dit organisatorische probleem te onderzoeken. Er was al een initiatief gestart om over te stappen op Figma. Ze konden het echter niet eens worden over het onderliggende migratieproces. Toen stelde ze de vraag: "Wat kunnen we met Figma doen om ons te helpen bij onze dagelijkse werkzaamheden?" Haar antwoord: Figma zou hen in staat stellen al hun processen te modelleren en te standaardiseren en, bovenal, al hun merklagen te optimaliseren en te automatiseren . Dit concept van harmonisatie en optimalisatie stelde hen vervolgens in staat om hun aanpak voor de migratie te kiezen. Ze kwamen tot een "einddoel": het creëren van één Design System dat op zijn beurt alle Design Systems van hun merken zou combineren.

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 tot tal van technische problemen leidde. Er moest een oplossing gevonden worden ." Vervolgens schetst hij de vereenvoudigde stappen voor de migratie:

• 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, productontwerper bij L'Oréal, introduceerde zijn presentatie door de oplossing van een uniek ontwerpsysteem te onthullen : "Dit is mogelijk gemaakt dankzij design tokens ." Dit zijn basiselementen die een ontwerper gebruikt om een ​​interface te creëren. Ze vormen een gemeenschappelijke taal tussen ontwerper en ontwikkelaar.

Hij wijst op het bestaan ​​van 3 soorten tokens bij L'Oréal (voor meer informatie) :

• 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 in het team, presenteerde vervolgens de 5 belangrijkste stappen die hun productiemethoden in dit nieuwe ontwerpsysteem definiëren :

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 reviews 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 sloot de presentatie af door het werk van haar team te benadrukken, dat het e-commerce-ecosysteem van het merk ingrijpend heeft veranderd. Ze onderstreepte het belang hiervan: "Onze overstap naar Figma lijkt misschien eenvoudig, maar uiteindelijk was het proces 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, assistent communicatie en marketing bij UX-Republic