Aquest article repassa la conferència de Daphna Keim, responsable de disseny de L'Oréal, i el seu equip de dissenyadors de producte Yann Stephant, Romain Allain et Thirin Ariaratnam, durant la trobada organitzada el 29 de febrer de 2024 a l'UX-Republic Hub. El tema d'aquesta vetllada: "La migració del sistema de disseny de comerç electrònic a L'Oréal: reptes i solucions".
Daphna Keim es va incorporar a la D2C Factory, encarregada de produir tots els llocs de comerç electrònic del grup, l'any 2023. A la seva arribada com a nova responsable de disseny, va identificar diversos problemes organitzatius dins d'aquest líder mundial en bellesa. L'objectiu d'aquesta jornada era posar en valor el treball realitzat en un any, un treball que ha transformat profundament l'ecosistema del comerç electrònic de L'Oréal.
L'arribada d'un nou Design Lead a L'Oréal: un canvi en l'organització del grup
Context: l'ecosistema d'un D2C
Abans d'introduir els reptes i solucions trobades, és important tornar als fonaments. L'Oréal opera a 50 països que ofereixen comerç electrònic directe i compta amb 237 llocs de retransmissió de "marca blanca". L'equip de Daphna Keim treballa amb dues agències externes, l'equivalent a 7 dissenyadors de producte. Per tant, això suposa un equip de 10 dissenyadors de productes i 400 desenvolupadors per a cada lloc.
Tal com assenyala Daphna Keim, L'Oréal presenta 4 actors principals:
- Equips corporatius : supervisen tots els projectes globals que després s'acumulen a les divisions, zones i marques. Avui, s'ocupen de tots els assumptes de comerç electrònic i gestionen la marca blanca.
- Divisions : Luxe, CPD (Producte de consum), DPP (Divisió de Productes Professionals), Derma beauty.
- Àrees Geogràfic : SAPMENA, LUSA, nord d'Àsia, Europa, etc.
- Marques : 70 marques que ara són internacionals, entre elles 34 en comerç electrònic.
Ella insisteix en el fet que vol destacar-ho "Cadauna d'aquestes persones són interlocutors potencials amb qui intercanviaran i que poden fer peticions".
Visió general del producte NGlora
NGlora és a etiqueta blanca que avui està gestionat per equips corporatius i equips informàtics. Per entrar en detalls, és un producte fet de Solució de Salesforce en el qual van arribar a crear tots els seus llocs de comerç electrònic, pensant en una solució per a mòbils. La idea era “Tenir una solució única amb una arquitectura única” on totes les variacions estarien presents al codi. Com a resultat, tots els llocs podrien configurar fàcilment els components que els interessen.
Daphna Keim explica com funciona NGlora:
- Primer trobem el solució d'enginyeria, que es tradueix a sistema central. Pel que fa al disseny, el seu equip s'encarrega de dissenyar totes les característiques de la marca blanca. "El que fem és realment pur UX: el viatge de compra, el viatge del consumidor i, de vegades, creem variacions per a determinades entitats".
- Després hi ha el que anomenem Àrees de capes que són gestionades per les àrees geogràfiques, sota la direcció dels grups informàtics. Això se centra en tot allò local (formes de pagament, programes de fidelització orientats a un país, etc.)
- Finalment, distingim el Capa de marca que designa tota la superposició de la IU. Això és específic de cada marca.
Construcció d'un sistema: cas d'ús i experiència
Un cop posades les bases, el responsable de disseny presenta el seu procés, segmentat en 4 etapes:
- Construir un equip i destacar les seves habilitats (Presentació de Daphna Keim)
- El procés de migració a Figma (Presentació de Yann Stephant)
- La transició d'una biblioteca, o fins i tot diverses en realitat, a un sistema de disseny (Presentació de Thirin Ariaratnam)
- Mètodes de treball un cop finalitzada la migració (Presentació de Romain Allain)
Fase d'incorporació de Daphna Keim
Fa gairebé un any i mig, Daphna Keim es va incorporar a la fàbrica D2C de L'Oréal com a responsable de disseny. Després passa per una fase de descobriment i incorporació força particular, on sorgeixen tots els problemes organitzatius de la marca. Així que comença per enumerar-nos-los:
- Pel que fa al disseny, hi ha moltes eines. El problema era que no tots feien servir el mateix. L'Oréal va utilitzar Sketch i Abstract. Les altres dues agències havien decidit migrar tots els fitxers de Brand Layers al seu propi espai de treball: Figma.
- No hi havia cap gestió de l'agència. Així, cada equip tenia el seu propi espai de treball i la seva pròpia manera de treballar.
- No hi havia comunicació entre els diferents equips.
- No s'ha creat cap directriu.
En termes generals, els dissenyadors es van enfrontar a un altre problema: de fet, la seva professió és una experiència poc reconeguda. Aleshores, el responsable del disseny posa èmfasi “Un problema de comunicació i legitimitat” per la manca d'equips de disseny.
Però com cita tan bé Daphna Keim, "Un lloc de comerç electrònic sense UX i UI no és possible". Per tant, calia trobar solucions a aquests problemes.
La idea inicial era doncsevangelitzar el que eren capaços de fer. Però per anar més enllà, hem hagut de cavar realment fins al fons d'aquest problema organitzatiu. Ja s'havia obert una iniciativa per migrar a Figma. Tanmateix, no es van poder posar d'acord sobre el procés subjacent a una migració. Aleshores assenyala aquest problema: "Què podem fer amb Figma per ajudar-nos en la nostra vida diària?". La seva resposta: Figma els permetria modelar, estandarditzar tots els seus processos i sobretot optimitzar i automatitzar totes les seves Capes de Marca. Aquest concepte d'harmonització i optimització els va permetre llavors triar el seu angle d'acció per a aquesta migració. Van arribar a un "objectiu final": crear un únic Sistema de Disseny que al seu torn combina tots els Sistemes de Disseny representatius de cadascuna de les seves marques.
És hora de netejar la nostra habitació!
Yann Stephant, al seu torn, presenta l'estat de joc abans de l'arribada de Daphna des del seu punt de vista com a dissenyador de producte. Segons explica, els equips de L'Oréal estaven essencialment vinculats a Sketch i Abstract. Així és com es va construir l'organització al voltant de les seves eines:
- Una biblioteca de components a Abstract, així com un fitxer mestre global (que presenta totes les pàgines de comerç electrònic en etiqueta blanca). Posteriorment, es compartiria per a totes les capes de marca.
- Quan treballaven en una consulta, necessàriament portava a l'actualització d'un o més components. Aleshores calia compartir-los amb les agències, traient-los de la llibreria i del Màster. Per fer-ho, les van duplicar en un espai Abstracte perquè les agències poguessin venir a recuperar els elements que havien estat modificats.
Però com assenyala el dissenyador de producte, "Les mides dels fitxers eren massa grans, cosa que va causar molts problemes tècnics. Havíem de trobar una solució”. A continuació, presenta els diferents passos simplificats per a la migració:
- Importar Esbossa fitxers a Figma
- L'establiment d'una anàlisi inicial de tot allò classificat (configuració de components, transcripció de fitxers, etc.)
- Automatització, optimització, ordenació i priorització de tots els fitxers per passar a a Sistema de disseny
- La creació d’un graella única (perquè cada marca tenia la seva pròpia graella per als seus llocs de comerç electrònic).
Simplificació, harmonització i optimització
Thirin Ariaratnam, dissenyador de producte de L'Oréal, presenta la seva presentació revelant la solució d'un Sistema de disseny únic : "Això va ser possible gràcies a Design Tokens". Són elements bàsics que utilitzarà un dissenyador per poder dissenyar una interfície. Representen un llenguatge comú entre dissenyador i desenvolupador.
Destaca l'existència de 3 tipus de fitxes a L'Oréal (per saber més) :
- Els Fitxes de base (el que feien servir abans de la migració.)
- Els Fitxes semàntiques (per a especificitats com ara superfícies, vores, textos, etc.)
- Els Fitxes de components (la creació de "noms" específics per a components que inclouen subcategories de components.)
"Gràcies a aquest endoll de l'organitzador del sistema de disseny, vam aconseguir crear aquest vincle entre el sistema de disseny i els màsters".
Fes un sprint al DTC (Direct To Consumer)
Romain Allain, un altre dissenyador de producte de l'equip, intervé després per presentar les 5 etapes principals que defineixen el seu mètodes de producció en aquest nou sistema de disseny :
- L’establiment d’un esprint d'1 mes, a partir d'un tiquet (= una tasca de disseny assignada) presentat per un dels grups d'interès de la marca.
- L'ús d'a sistema de branques a Figma (= instància d'una pàgina que podrem modificar independentment de la pàgina principal). Aquesta és una característica útil per a projectes grans, perquè tal com assenyala el dissenyador de productes, "cada petit canvi pot tenir un gran impacte".
- L'ús de Mètode de disseny atòmic (per saber més).
- Els crítiques et els col·laboracions : això té com a resultat copiar i enganxar les modificacions fetes en un fitxer Sprint, accessible per a totes les parts interessades de l'sprint (desenvolupadors, OP, BA, dissenyadors, etc.).
- La validació i desenvolupament de bitllets : totes les branques modificades o creades es fusionaran a les branques principals (actualització de la biblioteca)
Conclusió
El responsable de disseny de L'Oréal conclou aquesta presentació destacant el treball realitzat pel seu equip, per tal de fer possible sacsejar l'ecosistema de comerç electrònic de la marca. Ella destaca la importància en aquest punt: "La nostra migració a Figma pot semblar senzilla, però al final el viatge va ser força complex".
Acaba abordant un dels problemes actuals del seu equip. Com podem mantenir l'experiència de "disseny" mantenint un centre d'expertesa reduït? Continuarà…
Inès Bàrbara, Assistent de comunicació i màrqueting a UX-Republic
