Construindo um Design System: desafios e o que aprendemos com eles

Com colaboração de Bruna Zabel, Carol Godoi e Jeferson da Silva, do time de Design de Produto do Asaas.

Asaas
Estação Asaas 🚀
5 min readSep 29, 2022

--

O que é um Design System?

De forma resumida, um Design System é um conjunto de ferramentas. Não se trata, porém, de um style guide: trata-se de um ecossistema de bibliotecas instaláveis, com componentes programados e padrões semânticos de design, reunindo padrões de comportamentos que podem ser aplicados nos mais diversos projetos.

É importante destacar, também, que o Design System não é uma bala de prata que irá resolver todos os problemas de uma vez: é um produto vivo, que precisa de melhorias constantes, para que seja possível a melhoria consistente de outros produtos.

Qual é a importância de ter um Design System?

Produtividade da equipe

A premissa mais básica do Design System é aumentar a produtividade da equipe. Isso porque ele consegue auxiliar nas áreas de UX (experiência do usuário), UI (interface do usuário) e também na parte de desenvolvimento.

Quando olhamos para o processo de UX, os padrões bem definidos e pensados auxiliam em conversas com clientes, execução de workshops, construção de testes de usabilidade e possibilita reaproveitar componentes já pensados em projetos anteriores.

Já nos processos de UI, o Design System possibilita uma interface já padronizada, construída com padrões de mercado e alinhada com a identidade da empresa.

Ainda, reutilizar componentes evita que a equipe de desenvolvimento precise criar novos componentes do zero a cada projeto. É uma relação de ganha-ganha-ganha para todos os envolvidos!

Experiência do usuário

O Design System contribui para a melhoria na experiência do usuário à medida que, ao padronizarmos formas de fazer e usar, é possível fazer entregas mais rápidas e mais consistentes.

Com isso, os PDs podem focar em entender melhor os comportamentos dos usuários, pesquisar e entender tendências do mercado e assim transformar fluxos de experiências complexos em simples.

Uma boa experiência para o nosso usuário também vem da padronização dos fluxos. Como ele está habituado a fazer determinadas ações no produto, se isso se mantiver em outros lugares, além da qualidade de hierarquia e dos padrões visuais, ele reduzirá o esforço cognitivo para o cliente e como consequência, tornar sua experiência muito melhor.

Prévia da documentação do nosso Design System mais recente.

Benefícios indiretos

É importante salientar que um Design System também traz benefícios indiretos para outras áreas dentro da empresa, como por exemplo:

  • RH: otimização do ELTC (Valor do Tempo de Vida do Empregado) dos times de produto na fase de onboarding e desenvolvimento profissional, reduzindo o tempo que os novos profissionais passam estudando a interface.
  • Diretoria: aumento do retorno financeiro dos times de produto, pela velocidade, produtividade e constância na qualidade das entregas.
  • Engenharia: com o Design System, é mais fácil manter o alinhamento e a proximidade com o time de Engenharia, uma vez que ele unifica a comunicação e diminui os atritos.

Quais os principais desafios?

O desafio inicial da criação de um Design System está em vendê-lo para a empresa. Trata-se de um processo longo e que demanda muita pesquisa; afinal, você não está lá para convencer as pessoas a criarem um Design System, mas sim para mostrar o real retorno que isso pode trazer ao produto.

No nosso contexto, em que o produto já está no mercado, o planejamento do Design System trouxe desafios diferentes.

Em primeiro lugar, foi necessário pensar se a parte de implementação seria fracionada ou total, e também levar em consideração a aceitação dos usuários. Isso porque, como os usuários ativos já estavam confortáveis com o que utilizavam, a curva de aprendizado para a nova interface não poderia ser grande demais.

Além dessas preocupações, manter um Design System funcionando e fazer com que ele seja escalável também são desafios, pois é necessário ter controle do que vai ser criado dentro do DS e se os novos incrementos têm potencial para crescimento em grande escala e para reutilização em outros pontos da interface.

Aprendizados que tivemos no processo

Durante a execução do Design System do Asaas, reunimos alguns aprendizados:

  • Colaboração é tudo: envolver o máximo possível de PDs, desenvolvedores, Product Managers (PMs), diretores no processo de pesquisa e venda da ideia de um DS é essencial para que ele já inicie no caminho certo.
  • Contato com usuários: manter contato constante com os usuários, realizar pesquisas, testes e grupos focais auxilia muito na tomada de decisões.
  • Acompanhamento entrega a entrega: acompanhar cada entrega do Design System e observar o usuário interagindo com ele é fundamental para entender se você está no caminho certo e, se qualquer imprevisto acontecer, conseguir resolver de forma ágil.

Com base nesses aprendizados, separamos também algumas dicas para auxiliar na manutenção e no bom funcionamento de um DS.

Dicas para manutenção e bom funcionamento

  • Mantenha o alinhamento entre os envolvidos: as pessoas responsáveis precisam estar sempre alinhadas, desde a criação até a manutenção do Design System. Esse alinhamento é essencial para manter os padrões usados pelo time de design espelhados no código.
  • Difunda a cultura de design: para que a empresa adote o Design System como um produto, é importante relembrar sua importância e resultados obtidos a partir dele.
  • Assuma a responsabilidade: assim como em qualquer outro produto, quando questionamentos ou desafios surgirem por decisões já tomadas, o time precisa ter consciência e assumir a responsabilidade para evoluir junto.
  • Entenda o processo: o Design System não é um projeto, portanto, não é concluído com uma entrega final. Sempre haverá o que refinar e evoluir, e com o tempo, ele ficará cada vez mais completo.

Para conferir mais conteúdos relacionados às áreas de design e de produto do Asaas, continue navegando pelo nosso blog!

Estamos com oportunidades abertas! Confira nossas vagas e venha trabalhar com a gente.

Ah, e se você curtiu esse post, não deixe de bater palmas pra ele! 👏

--

--