Este artigo relata a apresentação de Daphna Keim , Líder de Design da L'Oréal, e sua equipe de Designers de Produto, composta por Yann Stephant , Romain Allain e Thirin Ariaratnam , no encontro realizado em 29 de fevereiro de 2024, no UX-Republic Hub. O tema da noite foi: “Migrando o Sistema de Design de E-commerce na L'Oréal: Desafios e Soluções”.

Daphna Keim ingressou na D2C Factory – responsável pela produção de todos os sites de e-commerce do grupo – em 2023. Ao chegar como nova Design Lead, ela identificou vários problemas organizacionais dentro desta líder mundial em beleza. O objetivo desta conferência foi destacar o trabalho realizado em um ano, trabalho que transformou profundamente o ecossistema de comércio eletrônico na L'Oréal.

A chegada de um novo Design Lead à L’Oréal: uma mudança na organização do grupo

Contexto: o ecossistema de um D2C 

Antes de apresentar os desafios e soluções encontradas, é importante voltar aos fundamentos. A L'Oréal opera em 50 países que oferecem comércio eletrônico direto e possui 237 sites de retransmissão “marca branca”. A equipe de Daphna Keim trabalha com duas agências externas, o equivalente a 7 Designers de Produto. Isso equivale, portanto, a uma equipe de 10 Designers de Produto e 400 desenvolvedores para cada site.

Como destaca Daphna Keim, a L'Oréal apresenta 4 players principais: 

• Equipes corporativas : eles supervisionam todos os projetos globais que depois se espalham pelas divisões, zonas e marcas. Hoje, eles cuidam de todos os assuntos do comércio eletrônico e gerenciam a marca branca.
• Divisões : Luxo, CPD (Produto de Consumo), DPP (Divisão de Produtos Profissionais), Derma beauty. 
• Áreas geográfico : SAPMENA, LUSA, Norte da Ásia, Europa, etc.
• Marcas : 70 marcas que hoje são internacionais, incluindo 34 no e-commerce.

Ela insiste em destacar que “cada uma dessas pessoas são interlocutoras em potencial com quem elas trocarão ideias e que podem fazer solicitações”.

Visão geral do produto NGlora 

NGlora é uma solução white-label atualmente gerenciada pelas equipes de TI e Corporativa. Mais especificamente, é um produto construído sobre a plataforma Salesforce , que eles usaram para criar todos os seus sites de e-commerce, com uma abordagem mobile-first. A ideia era ter uma solução única com uma arquitetura única, onde todas as variações estariam presentes no código. Isso permitiria que cada site configurasse facilmente os componentes necessários.

Daphna Keim explica como funciona o NGlora: 

• Primeiro encontramos o solução de engenharia, que se traduz no sistema central. Do lado do design, sua equipe é responsável por desenhar todas as características da etiqueta branca. “O que fazemos é UX realmente puro: a jornada de compra, a jornada do consumidor e, às vezes, criamos variações para determinadas entidades.” 
• Depois há o que chamamos Áreas de camada que são administrados pelas áreas geográficas, sob a direção dos grupos de TI. Isso se concentra em tudo que é local (métodos de pagamento, programas de fidelidade direcionados a um país, etc.)
• Por fim, distinguimos o Camada de marca que designa toda a sobreposição da IU. Isso é específico para cada marca.

 

Construindo um sistema: caso de uso e experiência 

Uma vez lançadas as bases, o Líder de Design apresenta seu processo, segmentado em 4 etapas: 

• Construindo uma equipe e destacando suas competências (Apresentação de Daphna Keim)
• O processo de migração para Figma (apresentação de Yann Stephant)
• A transição de uma biblioteca, ou mesmo várias na realidade, para um Design System (Apresentação de Thirin Ariaratnam)
• Métodos de trabalho após a conclusão da migração (Apresentação de Romain Allain)

Fase de integração de Daphna Keim

Há quase um ano e meio, Daphna Keim ingressou na D2C Factory da L'Oréal como Design Lead. Em seguida, passa por uma fase bastante particular de descoberta e integração, onde emergem todos os problemas organizacionais da marca. Então ela começa listando-os para nós: 

• Do lado do design, existem muitas ferramentas. O problema é que nem todos usavam o mesmo. L'Oréal usou Sketch e Abstract. As outras duas agências decidiram migrar todos os arquivos de Brand Layers para seu próprio espaço de trabalho: Figma.
• Não havia gestão de agência. Assim, cada equipe tinha seu espaço de trabalho e sua forma de trabalhar.
• Não houve comunicação entre as diferentes equipes.
• Nenhuma diretriz foi criada. 

De um modo geral, os designers enfrentavam outro problema: a sua profissão é uma especialização pouco reconhecida. O Líder de Design destacou então “um problema de comunicação e legitimidade” devido à falta de equipas de design.

Mas, como Daphna Keim tão apropriadamente coloca, “um site de comércio eletrônico sem UX e UI é impossível ”. Portanto, era necessário encontrar soluções para esses problemas.

A ideia inicial era, portanto, promover o que eles eram capazes de fazer. Mas, para ir além, era necessário mergulhar no cerne desse problema organizacional. Uma iniciativa para migrar para o Figma já havia sido lançada. No entanto, eles não conseguiam chegar a um consenso sobre o processo subjacente à migração. Ela então levantou a seguinte questão: "O que podemos fazer com o Figma para nos ajudar em nossas operações diárias?". Sua resposta: o Figma permitiria modelar e padronizar todos os seus processos e, sobretudo, otimizar e automatizar todas as suas Camadas de Marca . Esse conceito de harmonização e otimização permitiu que eles escolhessem sua abordagem para essa migração. Chegaram a um "objetivo final": criar um Sistema de Design único que, por sua vez, combinasse todos os Sistemas de Design que representam cada uma de suas marcas.

Hora de limpar nosso quarto!

Yann Stephant, por sua vez, apresenta a situação antes da chegada de Daphna do seu ponto de vista como Designer de Produto. Como explica, as equipas da L'Oréal estavam essencialmente ligadas ao Sketch e ao Abstract. Veja como a organização foi construída em torno de suas ferramentas: 

• Uma biblioteca de componentes em Abstract, bem como um arquivo Master global (apresentando todas as páginas de e-commerce em etiqueta branca). Posteriormente, isso seria compartilhado por todas as camadas da marca.
• Quando trabalhavam em uma consulta, isso necessariamente levava à atualização de um ou mais componentes. Foi então necessário compartilhá-los com as agências, retirando-os da livraria e do Mestre. Para isso, duplicaram-nos em um espaço Abstrato para que as agências pudessem vir recuperar os elementos que haviam sido modificados. 

Mas, como o Designer de Produto destaca, “os tamanhos dos arquivos eram muito grandes, o que causou inúmeros problemas técnicos. Era preciso encontrar uma solução ”. Ele então descreve os passos simplificados para a migração:

• Importar Esboce arquivos para Figma 
• O estabelecimento de uma análise inicial de tudo o que foi classificado (configuração de componentes, transcrição de arquivos, etc.) 
• Automação, otimização, ordenação e priorização de todos os arquivos para passar para um Sistema de Design 
• A criação de um grade única (porque cada marca tinha sua própria grade para seus sites de e-commerce). 

Simplificação, harmonização e otimização 

Thirin Ariaratnam, Designer de Produto da L'Oréal, iniciou sua apresentação revelando a solução de um Sistema de Design exclusivo : "Isso foi possível graças aos Tokens de Design ". Esses tokens são elementos básicos que um designer utiliza para criar uma interface. Eles representam uma linguagem comum entre designer e desenvolvedor.

Ele destaca a existência de 3 tipos de Tokens na L'Oréal (para saber mais) :

• Os Tokens básicos (o que eles usaram antes da migração.)
• Os Tokens Semânticos (para detalhes como superfícies, bordas, textos, etc.)
• Os Tokens de componentes (a criação de “nomes” específicos para componentes que incluem subcategorias de componentes.)

“Graças a esta conexão do organizador do Design System, conseguimos criar esse vínculo entre o Design System e os Masters.”

Execute um sprint no DTC (Direct To Consumer)

Romain Allain, outro designer de produto da equipe, apresentou então os 5 principais passos que definem seus métodos de produção neste novo Sistema de Design :

1. O estabelecimento de um Sprint de 1 mês, a partir de um ticket (= uma tarefa de design atribuída) enviado por um dos stakeholders da marca. 
2. O uso de um sistema de filiais no Figma (= instância de uma página que poderemos modificar independentemente da página principal). Este é um recurso útil para grandes projetos porque, como aponta o Designer de Produto, “cada pequena mudança pode ter um grande impacto”.
3. O uso de Método de Design Atômico (Para saber mais).
4. Os rever e colaborações : isso resulta em copiar e colar as modificações feitas em um arquivo Sprint, acessível a todos os stakeholders do sprint (desenvolvedores, POs, BAs, designers, etc.). 
5. La validação e o desenvolvimento de tickets : todas as ramificações modificadas ou criadas serão mescladas nas ramificações principais (atualização da biblioteca) 

 

Conclusão 

A Diretora de Design da L'Oréal concluiu a apresentação destacando o trabalho realizado por sua equipe, que revolucionou o ecossistema de e-commerce da marca. Ela enfatizou a importância desse ponto: "Nossa migração para o Figma pode parecer simples, mas, no fim das contas, o processo foi bastante complexo . "

Ela acaba abordando um dos problemas atuais de sua equipe. Como podemos sustentar a especialização em “design” e ao mesmo tempo manter um centro de especialização reduzido? Continua…

 

 

Inès Barbara, Assistente de Comunicação e Marketing na UX-Republic