In questo articolo ripercorriamo il convegno di Daphna Keim, Design Lead presso L'Oréal, e il suo team di designer di prodotto Yann Stephant, Romain Allain et Thirin Ariaratnam, durante l'incontro organizzato il 29 febbraio 2024 presso UX-Republic Hub. Il tema di questa serata: “La migrazione del Design System dell’e-commerce in L’Oréal: sfide e soluzioni”.

Daphna Keim è entrata a far parte della D2C Factory, responsabile della produzione di tutti i siti di e-commerce del gruppo, nel 2023. Al suo arrivo come nuova Design Lead, ha identificato diversi problemi organizzativi all'interno di questo leader mondiale nel settore della bellezza. Lo scopo di questa conferenza era quello di evidenziare il lavoro svolto in un anno, lavoro che ha trasformato profondamente l'ecosistema dell'e-commerce presso L'Oréal.

L’arrivo di un nuovo Design Lead presso L’Oréal: un cambiamento nell’organizzazione del gruppo

Contesto: l'ecosistema di un D2C 

Prima di presentare le sfide e le soluzioni trovate, è importante tornare alle fondamenta. L'Oréal opera in 50 paesi che offrono e-commerce diretto e dispone di 237 siti di rilancio “white label”. Il team di Daphna Keim lavora con due agenzie esterne, l'equivalente di 7 Product Designer. Si tratta quindi di un team di 10 Product Designer e 400 sviluppatori per ciascun sito.

Come sottolinea Daphna Keim, L'Oréal presenta 4 attori principali: 

• Squadre aziendali : supervisionano tutti i progetti globali che poi si riversano nelle divisioni, nelle zone e nei marchi. Oggi si occupano di tutte le questioni relative all'e-commerce e gestiscono l'etichetta bianca.
• Divisioni : Lusso, CPD (Prodotto di Consumo), DPP (Divisione Prodotti Professionali), Derma beauty. 
• le zone Geografico : SAPMENA, LUSA, Asia settentrionale, Europa, ecc.
• Marks : 70 marchi ormai internazionali, di cui 34 nell'e-commerce.

Insiste sul fatto che desidera sottolinearlo “ognuna di queste persone è un potenziale interlocutore con cui scambierà e che potrà avanzare richieste”. 

Panoramica del prodotto NGlora 

NGlora è una etichetta bianca che oggi è gestito da team aziendali e team IT. Entrando nei dettagli, si tratta di un prodotto realizzato in Soluzione Salesforce su cui sono arrivati ​​a creare tutti i loro siti di e-commerce, pensando a una soluzione mobile-first. L'idea era “avere una soluzione unica con un’architettura unica” dove tutte le variazioni sarebbero presenti nel codice. Di conseguenza, tutti i siti sarebbero in grado di configurare facilmente i componenti di loro interesse. 

Daphna Keim spiega come funziona NGlora: 

• Troviamo innanzitutto il soluzione ingegneristica, che si traduce in sistema centrale. Dal punto di vista del design, il suo team è responsabile della progettazione di tutte le caratteristiche dell'etichetta bianca. "Quello che facciamo è davvero pura UX: il percorso di acquisto, il percorso del consumatore e, a volte, creiamo variazioni per determinate entità." 
• Poi ci sono quelli che chiamiamo Aree di livello che vengono gestiti dalle aree geografiche, sotto la direzione dei gruppi IT. Si concentra su tutto ciò che è locale (metodi di pagamento, programmi fedeltà mirati in un paese, ecc.)
• Infine distinguiamo l Strato di marca che designa l'intera sovrapposizione dell'interfaccia utente. Questo è specifico per ogni marchio.

 

Costruire un sistema: casi d'uso e competenze 

Una volta gettate le basi, il Design Lead presenta il processo, suddiviso in 4 fasi: 

• Costruire una squadra ed evidenziarne le competenze (Presentazione di Daphna Keim)
• Il processo di migrazione a Figma (Presentazione di Yann Stephant)
• Il passaggio da una biblioteca, o anche più in realtà, a un Design System (Presentazione di Thirin Ariaratnam)
• Metodi di lavoro una volta completata la migrazione (Presentazione di Romain Allain)

Fase di onboarding di Daphna Keim

Quasi un anno e mezzo fa, Daphna Keim è entrata a far parte della D2C Factory di L'Oréal in qualità di Design Lead. Si passa poi ad una fase di discovery e onboarding piuttosto particolare, dove emergono tutte le problematiche organizzative del brand. Quindi inizia elencandoli per noi: 

• Dal punto di vista della progettazione, ci sono molti strumenti. Il problema era che non tutti usavano lo stesso. L'Oréal ha utilizzato Sketch e Abstract. Le altre due agenzie avevano deciso di migrare tutti i file di Brand Layers nel proprio spazio di lavoro: Figma.
• Non c'era la gestione dell'agenzia. Pertanto, ogni squadra aveva il proprio spazio di lavoro e il proprio modo di lavorare.
• Non c'era comunicazione tra le diverse squadre.
• Non è stata creata alcuna linea guida. 

In generale, i designer si trovano ad affrontare un altro problema: la loro professione, infatti, è una competenza poco riconosciuta. Il responsabile della progettazione sottolinea quindi “un problema di comunicazione e legittimità” a causa della mancanza di team di progettazione. 

Ma come cita così bene Daphna Keim, “un sito e-commerce senza UX e UI non è possibile”. Era quindi necessario trovare soluzioni a questi problemi.

L'idea iniziale era quindi quella dievangelizzare cosa erano capaci di fare. Ma per andare oltre, bisognava andare davvero a fondo in questo problema organizzativo. Era già stata aperta un'iniziativa per migrare verso Figma. Tuttavia, non riuscivano a mettersi d’accordo sul processo alla base di una migrazione. Poi sottolinea questo problema: “Cosa possiamo fare con Figma per aiutarci nella nostra vita quotidiana?”. La sua risposta: Figma glielo permetterebbe modellare, standardizzare tutti i loro processi e soprattutto ottimizzare e automatizzare tutti i loro Brand Layer. Questo concetto di armonizzazione e ottimizzazione ha poi permesso loro di scegliere il proprio angolo d'azione per questa migrazione. Sono arrivati ​​ad un “obiettivo finale”: creare un unico Design System che a sua volta unisca tutti i Design System rappresentativi di ciascuno dei loro marchi.

È ora di pulire la nostra stanza!

Yann Stephant a sua volta presenta la situazione prima dell'arrivo di Daphna dal suo punto di vista di Product Designer. Come spiega, i team L'Oréal erano essenzialmente legati a Sketch e Abstract. Ecco come è stata costruita l’organizzazione attorno ai suoi strumenti: 

• Una libreria di componenti su Abstract, nonché un Master file globale (che presenta tutte le pagine di e-commerce in white label). Questo verrà successivamente condiviso per tutti i livelli del marchio.
• Quando si lavorava su una query, questa portava necessariamente all'aggiornamento di uno o più componenti. È stato poi necessario condividerli con le agenzie, prelevandoli dalla libreria e dal Master. Per fare questo, li hanno duplicati in uno spazio Abstract in modo che le agenzie potessero venire a recuperare gli elementi che erano stati modificati. 

Ma come sottolinea il Product Designer, "Le dimensioni dei file erano troppo grandi e questo ha causato molti problemi tecnici. Bisognava trovare una soluzione”. Presenta quindi i diversi passaggi semplificati per la migrazione: 

• Importare File di schizzo in Figma 
• L'istituzione di una prima analisi di tutto ciò che è stato classificato (configurazione dei componenti, trascrizione dei file, ecc.) 
• Automazione, ottimizzazione, ordinamento e definizione delle priorità di tutti i file per passare a a Sistema di progettazione 
• La creazione di un file griglia unica (perché ogni brand aveva una propria griglia per i propri siti e-commerce). 

Semplificazione, armonizzazione e ottimizzazione 

Thirin Ariaratnam, Product Designer presso L'Oréal, introduce la sua presentazione rivelando la soluzione di a Sistema di progettazione unico : “Ciò è stato possibile grazie ai Design Tokens”. Questi sono gli elementi base che un designer utilizzerà per poter progettare un'interfaccia. Rappresentano un linguaggio comune tra progettista e sviluppatore. 

Sottolinea l'esistenza di 3 tipi di gettoni presso L'Oréal (per saperne di più) : 

• I Segnalini base (cosa usavano prima della migrazione.)
• I Gettoni semantici (per dettagli come superfici, bordi, testi, ecc.)
• I Gettoni componenti (la creazione di “denominazioni” specifiche per i componenti che a loro volta includono sottocategorie di componenti.)

“Grazie a questo collegamento organizzatore del Design System, siamo riusciti a creare questo collegamento tra il Design System e i Master.”

Eseguire uno sprint al DTC (Direct To Consumer)

Romain Allain, altro Product Designer del team, interviene poi per presentare le 5 fasi principali che ne definiscono metodi di produzione in questo nuovo Sistema di Progettazione : 

1. L'istituzione di a sprint di 1 mese, da un ticket (= un compito di progettazione assegnato) inviato da uno degli stakeholder del marchio. 
2. L'uso di a sistema di filiali su Figma (= istanza di una pagina che potremo modificare indipendentemente dalla pagina principale). Questa è una funzionalità utile per progetti di grandi dimensioni perché, come sottolinea il progettista del prodotto, “ogni piccolo cambiamento può avere un grande impatto”.
3. L'impiego di Metodo di progettazione atomica (per saperne di più).
4. I recensioni e collaborazioni : ciò si traduce nel copiare e incollare le modifiche apportate in un file Sprint, accessibile a tutti gli stakeholder dello sprint (sviluppatori, PO, BA, designer, ecc.). 
5. La convalida e sviluppo dei biglietti : tutti i rami modificati o creati verranno accorpati nei rami principali (aggiornamento libreria) 

 

Conclusione 

La Design Lead di L'Oréal conclude questa presentazione evidenziando il lavoro svolto dal suo team, consentendo così di dare una scossa all'ecosistema e-commerce del marchio. Sottolinea l’importanza di questo punto: “La nostra migrazione a Figma può sembrare semplice ma alla fine il viaggio è stato piuttosto complesso”. 

Finisce per affrontare uno dei problemi attuali della sua squadra. Come possiamo sostenere le competenze “progettuali” mantenendo un centro di competenze ridotto? Continua…

 

 

 Inès Barbara, Assistente di comunicazione e marketing presso UX-Republic