UX Team Summit 2022: Design Systems
Os principais destaques do evento que reuniu vários times brasileiros para compartilhar suas experiências sobre Design Systems.
Fala galera! Há algumas semanas, fui convocado pela Mergo para ser apresentador e facilitador do evento UX Team Summit 2022. Este ano, tivemos o evento focado em Design Systems.
A proposta do evento é convidar times de grandes empresas para compartilhar aprendizados de como seus times estão criando soluções para seus problemas do dia a dia nos seus times de DesignOps.
Sem mais delongas, trouxe neste artigo os principais pontos que chamaram a minha atenção. Bora lá!
Time de Design System da Jusbrasil (Farol)
Com Caio Ávila, Anderson de Oliveira e Malu Dini.
Estrutura do time
Time dedicado e com o grande diferencial em ter pessoas especialistas em Ways of Working (Processos), Acessibilidade e Ilustração.
Abordagem
Arquitetura: Design Tokens, Motion Tokens e Biblioteca de Componentes.
Processo: Me chamou a atenção que definições e avaliações de acessibilidade estão presentes em todas as etapas do processo de concepção de um componente.
Handoff: Outra estratégia genial foi criar um pequeno hack para identificar com o emoji 🔗 quais propriedades do Figma são exatamente espelhadas no código.
Tecnologia
Web Components, Stencil, Lit, CSS Modules, React e Radix.
Próximos passos
Mail System, Modelo Handoff SEO, Biblioteca de ícones própria, Illustration System e Panorama de Design.
Time de Design System da Locaweb
Com Willian Bernardo, Mateus Villain e Walder Pinheiro.
Estrutura do time
Time dedicado.
Abordagem
Tokens Semânticos: Design tokens com estrutura semântica, evitando trazer os nomes das cores na nomenclatura das variáveis, biblioteca de base componentes e biblioteca de ícones.
Tecnologia
Bibliotecas instaláveis disponibilizadas no repositório privado:
- Biblioteca de ícones
- Base componentes
- Filtros e funções reutilizáveis
- Wrap do Cypress
- Biblioteca de parser da linguagem gherkin para javascript
- Algoritmo que extrai os ícones do Figma 🤯
- Integração com Azure Pipeline
- Desenvolvimento de um CLI
Meu destaque vai para esse produto fictício construído 100% com o Design System, que ajuda no Onboarding de desenvolvimento, habilitando fazer testes e aprender com o mão na massa.
Resultados
- 458 Componentes e 107 Styles;
- 3 Produtos novos com 100% DS;
- 9 produtos em fase avançada de implementação;
- Queda significativa no tempo construção e validação de protótipos;
- Diminuição do Lead time de Operação;
- Diminuição no número de bugs e inconsistências;
- Time to Market otimizado;
- Melhora nos principais indicadores de satisfação.
Time de Design System do BMG (Genesis)
Com Guilherme Batista, Lyncoln Nellucci e Bruno Lucas de Azevedo.
Estrutura do time
Time dedicado.
Abordagem
Inventário: No início da definição do Genesis DS, o time fez um mapeamento de inventário com todos os componentes e variações.
Processo de contrubuição: O time também aceita contribuições, criou uma árvore de decisão e um processo para os times seguirem, com a mentoria do time do DS.
Tecnologia
Biblioteca web compartilhada de componentes básicos (ex.: botões,
formulários, etc… ) + Tokens centralizados + Bibliotecas dos Projetos.
Aprendizados
- É constante a necessidade de mostrar o valor do Design System
para as áreas da empresa quando o ambiente é muito dinâmico. - O modelo de trabalho descentralizado é tão desafiador quanto
o centralizado. As vezes as pessoas não vão aceitar, e tudo bem. - Comunicação e colaboração são peças chaves.
Time de Design System da RaiaDrogasil (Pulso)
Com Paulo Ziolle, Dani Cruz e Rafael Minatti.
Estrutura do Time
Time dedicado + Content designer part-time.
Abordagem
Temas: Arquitetura multi-marcas para servir as marcas do grupo, sendo Pulso a referência inicial e as demais bibliotecas são geradas através de tokens semânticos e arquitetura multi-temas.
Tokens Semânticos: Por se tratar de um e-commerce, os produtos necessitam de uma cor para Call to Actions e outras aplicações, neste caso, o time resolveu usando um design token chamado Highlight Color.
Conteúdo: O grande destaque e o trabalho do time de DesignOps é a parceria com o time de Content, que também gerou um Guia de Escrita para os times serem mais autônomos nas decisões de conteúdo.
E mais interessante é que os componentes começaram a receber o conteúdo real para guiar futuros ajustes dos times.
Testes de usabilidade: No cenário onde o campo focado recebia a cor de marca vermelha, o time decidiu fazer testes com usuários para entender qual a percepção dos clientes e decidiram mudar a cor de foco para uma cor neutra.
Aprendizados
- Contribuição de Design;
- Contribuição de Conteúdo da imersão à entrega;
- Construção conjunta com os times;
- Aumento de engajamento e eficiência do produto;
- Foco em acessibilidade.
Time de Design System do Banco Carrefour (Annecy)
Com Bruno Severino, Ray J. Braz e Thais Yabuuti.
Estrutura do time
Além de ter um time dedicado super completo com PO, designers e desenvolvedores, no caso do Banco Carrefour, a estrutura permite uma proximidade com ResearchOps e ContentOps.
Abordagem
Arquitetura de Temas: Design tokens específicos de cada marca alimentam os componentes. Esses componentes estão centralizados assim como documentações, elementos visuais, código, ícones, comportamentos, regras de uso, tom e voz, linguagem neutra, boas práticas de cada componente ou assunto de conteúdo. Que por fim são consumidos pelos aplicativos de cada marca.
Processo de contribuição: os times têm autonomia para contribuir seguindo o processo abaixo e sendo mentorados pelo time Ops.
Tecnologia
Web Components, Lit, Javascript e Cypress.io.
Métricas
O time também criou um dashboard com métricas de uso dos componentes publicados (no ar) com visualização entre marcas. Aliás, você pode ter mais detalhes sobre o dashboard neste artigo.
Time de Design System da Unico (Genoma)
Com Marcos Pagano, Aline Fukuhara e Renata Nobre.
Estrutura do Time
Time dedicado com a colaboração de outras pessoas dos squads, formando uma guilda de Design System.
Abordagem
Arquitetura: Biblioteca de componentes no Figma, documentação de design e engenharia centralizada no Zeroheight e componentes codados em Flutter.
Processo de contribuição: os times também podem contribuir com as bibliotecas e documentações.
Tecnologia
Os componentes são codados em Flutter e documentados através do Widgetbook.
Time de Design System da Globo (Codex)
Com Bernardo Quental, Camila Bruno e Lucas de Lima.
Estrutura do Time
Time dedicado + Guilda de Design e Desenvolvimento.
Abordagem
Arquitetura: A grande diferença das demais estruturas são as definições de Padrões, muito semelhante à abordagem do Atomic Design.
Multi-libraries e expansível: O Codex alimenta uma rede de outros Design Systems, onde a os projetos são apartados, ou seja, Codex tem sua própria arquitetura que alimenta os demais Design Systems de cada produto.
Cerimônias da Guilda
- Open Review: Alinhamento geral sobre o andamento dos
projetos do Codex; - Design Sprint: Modelo colaborativo para kickoff de
capítulos do Codex; - Workshops: Para quem tem interesse em entender os fluxos de
trabalho e adoção do Codex.
Ufa! Muita informação, não é? Esses foram apenas alguns dos destaques do evento, sem contar as sessões de perguntas e respostas que tiveram muito mais conhecimento compartilhado através das dúvidas da audiência.
Se você não participou do UX Team Summit 2022, pode ter certeza que perdeu muuuuito conhecimento. Que tal ficar por dentro das novidades da Mergo para não perder o próximo? Acesse o site da Mergo.
