Domo Design System
Meu papel nesse projeto
Como Designer Sênior de UX/UI, minha função envolveu a coordenação da equipe de design neste projeto. Além disso, forneci orientação e apoio aos membros juniores da equipe de UX, incluindo estagiário, que se juntaram ao projeto. Também fiz contribuições significativas ao desenhar alguns dos componentes do Design System e assumi a responsabilidade de criar a documentação essencial para o projeto.
O que é um design system?
Uma biblioteca de componentes constantemente atualizada que possui componentes gráficos, cores, tipografia, espaçamentos, identidade visual, enfim, tudo o que compõe a interface de um ou mais produtos. Com a finalidade principal de escalar o desenvolvimento de novos produtos e facilitar a comunicação entre os times de design e desenvolvimento.
Iniciativa e contexto do projeto
Anualmente, a SenseData realiza a iniciativa SKR (Sensedata Key Results), que oferece aos colaboradores a oportunidade de contribuir para o desenvolvimento de projetos corporativos. Os três melhores projetos do ano são premiados.
Como Designer Sênior de UX/UI na equipe da SenseData, vi uma excelente oportunidade de formar uma equipe para trabalhar no projeto do Design System da empresa, um desejo antigo meu. Naquela época, dependíamos apenas de uma folha de componentes no Figma para orientar o desenvolvimento das interfaces. Isso muitas vezes resultava na falta de padronização no desenvolvimento de componentes e na falta de escalabilidade de alguns deles na interface, com várias variações desnecessárias.
Decidi então me reunir com alguns desenvolvedores front-end da empresa e convidei um estagiário de UX para se juntar a nós na formação de uma equipe para o projeto do Design System. Inicialmente, éramos compostos por cinco membros (um UX/UI Designer, um estagiário de UX/UI e três desenvolvedores front-end). No final do segundo trimestre do ano, a equipe passou por ajustes devido à saída de dois membros da empresa, e concluímos o projeto com dois UX/UI Designers e dois Desenvolvedores Front-End.
Oportunidades de melhoria identificadas
Após algumas reuniões inicias com a equipe do projeto identificamos algumas oportunidades de melhoria para serem trabalhadas e solucionadas no andamento do projeto :
- Falta de padrão visual nos componentes que compõe a interface do produto
- Falta de escalabilidade dos componentes
- Demora na construção dos componentes em cada novo projeto
- Dificuldade na comunicação entre o time de Design e Squads de Desenvolvimento
- Manutenção dos componentes descentralizada
A seguir demonstro todo o processo da construção do Domo DS.
Etapas do projeto
O projeto foi dividido em algumas etapas que podem ser vistas na ilustração abaixo
- Escolha do nome do Design System
Realizamos uma pesquisa via GoogleForms com todos os colaboradores da Sensedata para a escolha do nome do nosso Design System.
O nome mais votado e escolhido foi Domo DS
O Domo é inspirado em abóbadas, construções em formato de arcos que englobam um determinado espaço, assim como o Domo, que engloba as soluções da SenseData.
2. Mapeamento das Inconsistência visuais
Como parte da equipe de UX, nossa responsabilidade foi investigar toda a plataforma SenseData em busca de inconsistências visuais nos componentes. Inicialmente, comparamos os componentes da interface com a nossa folha de componentes anterior como ponto de referência. Para facilitar esse processo, criamos uma página no Figma dedicada a registrar capturas de tela das inconsistências que encontramos, classificando-as por tipo de componente. Este procedimento abrangeu todos os elementos, incluindo ícones, cores, tipografia, espaçamento e animações de carregamento utilizadas na interface da plataforma.
3. Backlog de componentes
Após mapearmos a plataforma, desenvolvemos um backlog de componentes e definimos uma ordem de prioridade para os elementos, incluindo design tokens (cores, tipografia, sombras, espaçamento, bordas), ícones e ilustrações. Utilizamos uma planilha no Excel para facilitar o processo de classificação de cada componente, organizando as entregas em trimestres, de janeiro de 2022 até a conclusão do projeto em dezembro de 2022.
Como estruturamos o nosso design system?
4. Pesquisa e ideação de novos componentes
Com o projeto do design system, reavaliamos nossa folha de componentes anterior com o objetivo de determinar quais componentes necessitavam de ajustes e reformulações para garantir sua escalabilidade.
Realizamos um processo de benchmarking, analisando outros design systems de players de mercado, além de consultar referências valiosas em sites como https://designsystemsbrasileiros.com/. Também exploramos bibliotecas de componentes React como parte do processo de pesquisa e ideação.
Design tokens
Para garantir uma boa escalabilidade decidimos começar a estruturar o nosso design system utilizando Design Tokens.
Design tokens, são as variáveis semânticas de estilo que são a base de criação para qualquer componente. Como por exemplo, as cores, a tipografia, as bordas, as sombras e espaçamentos utilizados em cada componente.
Componentes
Iniciamos o processo de ideação de componentes a partir da biblioteca de design tokens que havíamos definido. Começamos com componentes menores, como botões e campos de formulário, utilizando essa biblioteca como base. Posteriormente, avançamos para o desenvolvimento de componentes mais complexos, como modais e drawers. Essa abordagem nos permitiu criar uma base sólida e consistente para a interface do produto, garantindo que todos os componentes seguissem um padrão visual e de funcionamento bem definido.
Biblioteca de Ícones e Ilustrações
Criamos uma nova biblioteca de ícones e ilustrações
5. Documentação guia de aplicação
O Domo Ds possui uma documentação de cada compoente, que pode ser acessada por aqui https://domo-ds.dev.sensedata.io/
6. Desenvolvimento de componentes em React
O Domo DS é um projeto desenvolvido utilizando React/Typescript como stack principal, além disso é utilizado styled components para o CSS-in-JS. Todos os seus componentes possuem testes unitários (Jest) e validação de propriedades feito com PropTypes.
7. Evangelização do uso do Domo DS
Após a implementação do projeto do Design System, as equipes de design e desenvolvimento se uniram para compartilhar o conhecimento com os demais membros das equipes de design e as squads de desenvolvimento da empresa. O objetivo era capacitar essas equipes para a adoção do Design System em seus novos projetos.
8. Resultados alcançados com o projeto do Design System
- Redução do tempo de planejamento e desenvolvimento dos componentes em novos projetos de 1 sprint para 1 dia.
- Diminuição em 50% do tempo necessário para a prototipação completa de novas interfaces.
- Aumento significativo da produtividade da equipe de UX e Desenvolvimento, eliminando tarefas redundantes.
- Criação de componentes 100% reutilizáveis.
- Redução de custos no design e desenvolvimento de projetos.
- Produto agora é escalável, proporcionando maior agilidade na evolução com consistência e qualidade.
- Melhoria na comunicação e no conhecimento compartilhado entre a equipe de design e as squads de desenvolvimento.
Além disso conseguimos alcançar o 1º lugar na premiação dos projetos SKR da empresa no ano de 2022.
Agradecimentos
Agradeço especialmente à Juliana Oliveira e ao André Alcântara, membros do nosso time de UX, que desempenharam papéis essenciais neste projeto. Também estendo meus agradecimentos à equipe de desenvolvedores front-end, Brunno Monte e Gustavo Cintrão, pelo trabalho excepcional. Além disso, quero expressar minha gratidão ao meu Head de Design, Alexandre Costa, por acreditar na nossa visão e por nos dar total apoio e liberdade para conduzir este projeto. Juntos, alcançamos resultados notáveis.
