Overview
Sobre
A Natura&Co atua em mais de 100 países, com mais de 3.700 lojas, 35 mil funcionários e cerca de 7,7 milhões de Representantes e Consultores.
O grupo Natura&Co é formado por diferentes marcas, aplicações e plataformas tecnológicas. Neste ecossistema digital, surgem vários problemas, tais como:
Dificuldade em manter a consistência visual e da experiência do usuário
Dificuldade em estabelecer um vocabulário de compreensão comum
Dificuldade em padronizar a escrita de código
Muitas pessoas fazendo o mesmo trabalho repetidamente
Desafios
Construir um ecossistema para que as pessoas que trabalham nos produtos digitais do grupo Natura&Co possam criar soluções consistentes e aderentes às marcas com time to market reduzido, beneficiando-se dos melhores padrões e práticas, por cada stack tecnológica em seus produtos.
Minha participação
Minha função neste projeto foi atuar como o principal Designer de Produto, aprimorando a especificação técnica, documentação, branding e bibliotecas de componentes, bem como suporte técnico aos designers e desenvolvedores, realizando QA de componentes garantindo a viabilidade técnica dos componentes em todas as tecnologias aplicadas em seus produtos. Atuei também na padronização e treinamento de designers com boas práticas de handoff e documentação de componentes, a fim de manter o padrão e processos fluidos de design.
Ferramentas
Jira, Teams e Notion (Gerenciamento da squad & Status), Miro (Mapa de dados, dinâmicas e desenho de arquitetura), Figma e Adobe XD (depreciado) (UI & Prototipação), Zeroheight, Github, Storybook e Sample Apps (documentação técnica).
O Processo
Análise e Pesquisa
O primeiro passo foi conduzir uma pesquisa completa para compreender o sistema de design existente, seus pontos fortes, fracos e oportunidades de melhoria. Colaborei com designers, desenvolvedores e stakeholders para coletar insights e feedback, o que ajudou na definição do status do Design System e seus componentes. Assim como auxiliou a mapear o processo de desenvolvimento de componentes Core e Team.
Definição de Tasks e Objetivos
Com uma compreensão clara do estado atual do sistema de design, é mais fácil definir metas e objetivos específicos para o processo de melhoria em cada sprint. Esses objetivos estavam focados em melhorar a colaboração, simplificar fluxos de trabalho e proporcionar uma experiência de usuário mais consistente em todas as plataformas.
Auditoria do Design System
Realizei uma extensa auditoria do sistema de design existente para identificar componentes desatualizados, inconsistências e áreas de melhoria em cada tecnologia existente. Esta auditoria foi documentada usando Notion e Jira, criando representações visuais do design do sistema relacionamentos de status e componentes dependentes.
Definindo um Roadmap
Com base na pesquisa, análise e auditoria, foi definido um roteiro descrevendo as tarefas, cronogramas e marcos do projeto, assim como objetivos em cada sprint. Este roteiro serviu como documento orientador para a equipe, garantindo que permanecêssemos no caminho certo durante toda a melhoria processo. Levantando em cada sprint o processo de análise, desenvolvimento, handoff e documentação necessária para atualização dos componentes.
Design e Desenvolvimento Iterativo
Usando Figma e Adobe XD, definimos um padrão de estrutura e organização dos componentes e UI Kit, para garantir a aderência e equalizar o conhecimento entre Product Designers de toda a companhia. Colaborei estreitamente com os desenvolvedores durante este processo para garantir viabilidade técnica e implementação eficiente, com o objetivo de projetar componentes logicamente similares ao código de cada stack.
Fluxo de consumo do DS
Modelo de consistência e overview de operações
Documentação e Guidelines
À medida que novos componentes eram projetados ou atualizados, documentava simultaneamente suas especificações técnicas, diretrizes de uso e comportamento em diferentes plataformas. Esta documentação foi organizada em Zeroheight, tornando-a facilmente acessível a todos os membros da equipe.
Em paralelo, era disponibilizado no UI Kit, onde Designers poderiam consumir em seus projetos o componente mais atualizado e pronto para desenvolvimento.
Testes e Garantia de Qualidade
Cada componente passou por testes rigorosos para garantir que atendesse aos padrões desejados e funcionasse perfeitamente em diversas tecnologias. O Storybook foi usado para testar a viabilidade técnica dos componentes e para resolver prontamente quaisquer problemas visuais, funcionando como um ambiente de homologação de cada componente.
Soluções
Colaboração simplificada: Ao utilizar ferramentas como Jira, Teams e Notion, foram estabelecidos canais de comunicação eficazes, com maior colaboração entre designers, desenvolvedores e stakeholders. Esse fluxo de trabalho simplificado resultou em tomadas de decisão, atualizações e resolução de problemas mais rápidas.
Consistência Visual Aprimorada: As marcas, as diretrizes e as bibliotecas atualizadas ajudaram a manter uma identidade visual coesa em todos os produtos. Essa consistência melhorou o reconhecimento da marca e proporcionou aos usuários uma experiência familiar e agradável.
Documentação Técnica Melhorada: A documentação técnica abrangente do Zeroheight forneceu diretrizes claras para designers e desenvolvedores, reduzindo a ambiguidade e garantindo a implementação consistente dos componentes.
Suporte Técnico Eficiente: A documentação técnica estruturada, combinada com canais de suporte acessíveis como o Teams, capacitou designers e desenvolvedores a encontrar soluções rapidamente, aumentando a produtividade e reduzindo gargalos de desenvolvimento.
Accessibilidade: Cada componente é desenvolvido com propriedades e guidelines adequadas aos padrões de acessibilidade como contraste, tamanho de área clicável, orientações de leitura e aplicação.
Produto Final e Resultados
Maior eficiência
O Design System aprimorado e sua documentação abrangente reduziram significativamente o tempo necessário para designers e desenvolvedores criarem e implementarem componentes. Isso levou a ciclos de desenvolvimento de produtos mais rápidos.
Experiência de usuário consistente
Com um sistema bem definido, todos os produtos da Natura&Co apresentaram uma experiência de usuário consistente e harmoniosa, independentemente da tecnologia utilizada para o desenvolvimento.
Colaboração mais presente
Os canais de comunicação aprimorados e os fluxos de trabalho simplificados resultaram em uma melhor colaboração entre as equipes de design e desenvolvimento. Este ambiente colaborativo promoveu a criatividade e a inovação.
Maior qualidade do produto
O rigoroso processo de QA e as verificações de viabilidade técnica garantiram que apenas componentes confiáveis e de alta qualidade chegassem aos produtos finais. Isso se traduziu em menos bugs e em uma experiência de usuário mais estável.
Imagem de marca aprimorada
A consistência da marca em todos os produtos fortaleceu a imagem da marca Natura&Co, promovendo a confiança e a fidelidade entre os usuários.
Concluindo, a melhoria do Design System da Natura&Co foi um projeto transformador que impactou positivamente a eficiência, a colaboração e a experiência do usuário da organização. O processo de pesquisa, design e desenvolvimento, juntamente com documentação e testes abrangentes, resultou em um sistema de design robusto e confiável que serve de base para a criação de produtos excepcionais das marcas envolvidas.
34
Componentes Core
6
Temas de marcas
22
Squads
+390
Usuários ativos do Design System
+84.300
Redução de horas Dev (2023)