Este artigo refaz a conferência de Daphna Keim, líder de design da L'Oréal e sua equipe de designers de produto Yann Stephant, Romain Allain et Thirin Ariaratnam, durante o encontro organizado em 29 de fevereiro de 2024 no UX-Republic Hub. O tema desta noite: “A migração do Design System do 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 no fato de que deseja destacar que “cada uma dessas pessoas são potenciais interlocutores com quem irão trocar, e que poderão fazer solicitações”. 

Visão geral do produto NGlora 

NGlora é uma etiqueta branca que hoje é gerenciado por equipes corporativas e equipes de TI. Para entrar em detalhes, é um produto feito a partir do Solução Salesforce no qual eles criaram todos os seus sites de comércio eletrônico, com uma solução mobile-first em mente. A ideia era “ter uma solução única com uma arquitetura única” onde todas as variações estariam presentes no código. Como resultado, todos os sites seriam capazes de configurar facilmente o(s) componente(s) de seu interesse. 

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 modo geral, os designers enfrentaram outro problema: na verdade, sua profissão é uma expertise pouco reconhecida. O líder de design então enfatiza “um problema de comunicação e legitimidade” devido à falta de equipes de design. 

Mas como Daphna Keim cita tão bem, “um site de comércio eletrônico sem UX e UI não é possível”. Era, portanto, necessário encontrar soluções para estes problemas.

A ideia inicial era, portanto,evangelizar o que eles eram capazes de fazer. Mas, para ir mais longe, tivemos que realmente ir ao fundo deste problema organizacional. Já havia sido aberta uma iniciativa de migração para o Figma. No entanto, não conseguiram chegar a acordo sobre o processo subjacente a uma migração. Ela então aponta esse problema: “O que podemos fazer com o Figma para nos ajudar no dia a dia?”. Sua resposta: Figma permitiria que eles modelar, padronizar todos os seus processos e acima de tudo otimizar e automatizar todas as suas Brand Layers. Este conceito de harmonização e otimização permitiu-lhes então escolher o seu ângulo de atuação para esta migração. Eles chegaram a um “objetivo final”: criar um único Design System que por sua vez reúna todos os Design Systems representativos de 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 aponta o Designer de Produto, “Os tamanhos dos arquivos eram muito grandes, o que causou muitos problemas técnicos. Tivemos que encontrar uma solução”. Em seguida, apresenta as diferentes etapas simplificadas 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, apresenta sua apresentação revelando a solução de um Sistema de Design Único : “Isso foi possível graças aos Design Tokens”. Esses são elementos básicos que um designer usará para projetar 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, intervém então para apresentar as 5 etapas principais que definem seu métodos de produção neste novo Design System : 

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 Design Lead da L'Oréal conclui esta apresentação destacando o trabalho realizado pela sua equipa, permitindo assim agitar o ecossistema de e-commerce da marca. Ela destaca a importância neste ponto: “Nossa migração para Figma pode parecer simples, mas no final das contas a jornada foi bastante complexa”. 

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 Bárbara, Assistente de Comunicação e Marketing na UX-Republic