Raio-x do Design System Livelo
Com a aceleração do que chamamos de era digital, as empresas vêm procurando ferramentas e práticas para agilizar o seu "time-to-market" constantemente.
Isso não é diferente no maior programa de fidelidade do Brasil, a Livelo. Em setembro deste ano, comemoramos o aniversário 🎉 de 2 anos do nosso Design System, e esta série de artigos visa compartilhar um pouco desta história (incluindo os problemas encontrados 😅).
Nesta primeira parada, vamos explicar como nosso Design System está estruturado atualmente, e ao longo da série, iremos mergulhar nos bastidores dele.
Definição
Para conceituar o termo, gosto muito da simplicidade da definição que Audrey Hacq traz em seu artigo intitulado Everything You Need to Know About Design Systems.
“Um Design System é uma fonte única de verdade que agrupa todos os elementos que habilitam os times a entender, desenhar e desenvolver produtos.”
O diagrama abaixo resume os principais elementos estruturais de um Design System.
Nossa visão
Aqui na Livelo, encaramos o Design System como um produto, que visa organizar e estabelecer diretrizes de interface humana, com intuito de tornar a experiência dos nossos clientes mais fácil e intuitiva.
De forma mais prática, é a fusão das disciplinas de design + desenvolvimento para criar padrões e componentes reutilizáveis.
Os objetivos principais são:
- Facilitar a implementação de novas funcionalidades para designers e desenvolvedores
- Padronização visual e de código;
- Acelerar o design, desenvolvimento e testes;
- Permitir que designers e desenvolvedores foquem no que mais interessa: entregar valor e foco no cliente.
Time
Um dos principais elementos de um bom Design System é o time. Aqui na Livelo, a gestão está dividida entre duas áreas (UX e Engenharia). Na camada técnica, contamos com 4 desenvolvedores, 3 designers, 1 agilista e 1 QA.
As responsabilidades são:
- Documentação de boas práticas
- Escrita de guias e desenvolvimento de componentes reutilizáveis
- Suporte aos usuários
- Manutenção e evolução
- Governança
Pilares
Consistência: Assegurar que cada time consiga construir novos produtos ou fluxos de forma consistente independente do quão variados eles sejam.
Versátil: Atender às necessidades sazonais, fazendo que todo o design system se adapte de acordo com a necessidade.
Escalável: Garantir que a estrutura base do desenvolvimento permita manutenções, atualizações, melhorias e migrações, de forma rápida e consistente.
Acessível: Disponibilizar componentes e tokens que sejam acessíveis durante sua implementação e utilização pelo usuário final.
Operação
Fluxo de desenvolvimento
Atualmente, nosso modelo de desenvolvimento é centralizado. Nosso time multidisciplinar é quem atua em todos os processos de concepção, desenvolvimento e publicação dos componentes, mantendo contato constante com as demais squads.
Pretendemos adotar no futuro um modelo colaborativo, permitindo maior extensibilidade e flexibilidade.
Garantia da Qualidade
Testes Unitários — Estilos, valores, atributos e testes de snapshots.
Validações de QA — Conformidade com os layouts, comportamento e usabilidade. Envolve validações em diversos browsers e dispositivos mobile.
Validações de Design — Conferência dos designers do que foi desenvolvido em relação ao que foi previsto no layout.
Testes de Regressão — Regressão de uma release em ambiente não produtivo, para garantir o correto funcionamento dos componentes já entregues com as novas demandas que estão sendo agregadas. Parte do processo é automatizado com o que chamamos de Regressão Visual, onde os componentes são comparados com um baseline.
Acessibilidade
Os componentes do Design System são acessíveis seguindo o padrão WCAG (Web Content Accessibility Guidelines) 2.1. São observados durante desenho e criação dos componentes especificações, tais como: accessibility labels, ARIA-labels, IDs, níveis de contraste de cores, tipografia e outros recursos que garantem uma melhor experiência para uma ampla diversidade de usuários.
Plataformas e bibliotecas
Foundations — Cores, grid, espaçamentos, tipografia, opacidade, sombras, bordas e etc.
Bibliotecas Web e Mobile — Componentes React e React Native.
Storybook — Playground para consulta dos componentes pelos desenvolvedores.
Zero Height — CMS principal para documentação: onboarding, diretrizes, processos, componentes, release notes, guias de migração, acessibilidade e etc.
Library Figma — Biblioteca de componentes e foundations para os designers utilizarem em prototipação de interfaces gráficas.
Tech Stack
Documentação central e CMS — Zero Height
UI Kit/biblioteca visual — Figma
Playground — Storybook
Biblioteca de Tipagem — Typescript
Biblioteca de tokens — Style Dictionary
Biblioteca de componentes web — React
Biblioteca de componentes mobile — React Native
Regressão Visual — Happo
Comunicação
DS Talks
Realizamos encontros para evangelizar e compartilhar o conhecimento sobre design. No DS Talks, os designers trocam figurinhas sobre boas práticas e novas ferramentas. Todas as conversas são gravadas e disponibilizadas para download.
Chapter
Esse grupo se reúne quinzenalmente para discutir temas gerais em torno do Design System, tais como: novas releases, qualidade, práticas de design e desenvolvimento.
Como estamos após 2 anos
Visão geral em números
Desafios
A jornada na construção de Design System traz vários desafios. A necessidade de adesão em larga escala demanda uma mudança cultural, enquanto a metrificação se revela crucial para avaliar o impacto.
Lidar com sistemas legados exige equilíbrio entre modernização e dependência. Enquanto isso, a padronização enfrenta desafios de priorização e comunicação.
Futuro
Como evolução natural do nosso Design System, estamos desenvolvendo mecanismos para que ele tenha um funcionamento no estilo low-code, proporcionando uma maior velocidade para as squads.
Além disso, estamos evoluindo na direção de ter um produto colaborativo, saindo de um modelo 100% centralizado, permitindo que as equipes tenham uma maior liberdade na criação e adaptação de componentes.
Nos próximos capítulos, vamos colocar uma lupa sobre as escolhas realizadas, explorando em maiores detalhes as soluções implementadas.
Confira aqui a parte 2: https://medium.com/livelo/o-design-system-da-livelo-parte-2-05699524b7ce
