O que é design system e qual o seu valor?
Como surgiu o conceito e como acompanhar resultados
Você já ouviu falar em design system? Para quem está imerso no contexto de produtos digitais, esse termo tem sido cada vez mais difundido. Mas do que se trata? Por quem e para quem ele é feito?
São dúvidas comuns, que motivaram a criação desse conteúdo, apresentando o conceito e trazendo também um pouco de perspectiva de produto e negócios ao explorar alguns exemplos e cases.
Definição
Quando falamos em produtos digitais, além de toda a lógica de negócio e da distribuição de dados, existe a experiência do usuário. Nesse caso, costumamos lidar com interfaces visuais que nos ajudam a realizar tarefas em websites ou aplicativos mobile, por exemplo.
Essas interfaces são construídas utilizando diversos pedacinhos pequenos que se repetem. Imagine um simples botão em sua estrutura. Quantas vezes ele aparece na experiência de um aplicativo? Pois é, essas telas contêm uma série de componentes e estilos - pequenos pedacinhos que se tornam um todo.
Só que muitas vezes o design system acaba sendo interpretado apenas como uma biblioteca de componentes e estilos, sendo que ele é muito mais do que isso. Por isso, vamos voltar no tempo para entender como esse conceito surgiu.
História
Os primeiros indícios de símbolos visuais vêm desde a pré-história, até chegarmos nas primeiras logos, como uma espécie de “assinatura” corporativa, identificando e diferenciando as marcas. Algumas delas, como a da Shell, feita em 1971, são conhecidas até hoje.
A extensão desse trabalho de identidade visual se daria através dos manuais de marca, ajudando a definir diretrizes para a aplicação da logo em diferentes superfícies, desde materiais impressos até sinalização.
Impulsionada pelo crescimento da internet, chegamos na era digital, onde websites ainda tinham poucos recursos para customizar suas páginas, já que naquele momento só contávamos com a linguagem HTML, com navegadores definindo a renderização de estilos.
Com a introdução do CSS, páginas começaram a definir seus próprios estilos de cores, tamanhos e tipografia de forma organizada, o que passa a abrir novas possibilidades de design.
Mais tarde, interações ganharam outro nível com o Javascript e a partir daí surgiram os frameworks. A construção desses sites vinha sendo otimizada cada vez mais.
O crescimento dos aplicativos mobile seria mais um dos canais de um produto que precisariam estar alinhados, até que aumenta-se também a necessidade por websites pensados de forma responsiva — e até mobile-first.
Como forma de padronizar experiências entre diferentes produtos - e reforçando sua importância como grandes organizações no mercado - Google e Apple começam a documentar suas próprias guidelines de design e desenvolvimento.
Até que começamos a ver cada vez mais design systems open-source, com excelentes documentações incluindo regras de aplicação, bibliotecas de design no Figma e também de desenvolvimento, como é o caso do Storybook.
Visão
No fim das contas, entendemos que o design system é como um produto que serve a outros produtos. O time envolvido trabalha em sua manutenção para que outros times possam o consumir e, consequentemente, os usuários finais.
Materializando um pouco mais, o DS contém uma base de design, código e documentação.
Objetivo
Em qualquer cartilha sobre design system você deve encontrar como objetivo macro esses três pontos principais:
- Consistência
- Eficiência
- Escalabilidade
Mas o que isso quer dizer exatamente? Alguns exemplos de estudos e casos nos ajudam a entender melhor esses pontos:
Heurística
De acordo com os princípios de usabilidade criados por Jakob Nielsen (do Nielsen Norman Group) e amplamente difundidos, uma das 10 heurísticas trata-se da Consistência e Padronização, colocando o usuário final como o principal beneficiado ao entregar uma experiência mais coerente como um todo.
Consistência e credibilidade
Existe um estudo chamado “efeito da usabilidade-estética”, que defende que os usuários passam a se importar menos com pequenos erros se o todo estiver consistência. De maneira geral, eles passam a ter mais “boa-vontade” ao usar um produto, o que pode ser associado também à simples credibilidade passada. A UX da UI.
O valor do design
Em pesquisa realizada pela consultoria McKinsey & Company, após estabelecer alguns critérios para o que seria um “bom design” dentro de uma empresa, alguns players foram acompanhados durante um período de 5 anos e, ao cruzar os dados com o faturamento de cada uma delas, percebemos que as empresas melhor avaliadas (linha de cima, em azul) obtém boa vantagem numérica sobre as demais.
Conexão e valor
De acordo com um levantamento feito pelo escritório de branding Ana Couto, há 67% mais propensão ao consumo de uma marca com um propósito maior conectado aos consumidores. Temos como exemplo as lojas da Apple, conhecidas por fidelizar clientes no mundo inteiro pela conexão criada com a marca.
A IBM, por exemplo, possui toda sua documentação digital da marca, englobando toda a sua linguagem de design compartilhada. Ou seja, perceba o valor em manter esse produto aberto publicamente para toda uma comunidade além de seus colaboradores, reforçando a cultura da marca e recebendo feedbacks e contribuições como retorno.
Eficiência e escalabilidade
Ainda em pesquisa realizada pela Meiuca (consultoria especializada em design system), em um trabalho realizado pela Rede houve redução de 96% na quantidade de linhas de código. Nesse caso, faz sentido não só trabalhar mais rápido, mas principalmente trabalhar melhor, aprimorando processos e investindo mais tempo em pesquisa.
Design system e produto
Como dito anteriormente, o design system é um produto que atende a outros produtos. Dessa forma, esse diagrama simples da escola Interaction Design Foundation nos ajuda a entender como nosso objetivo final precisa ser desejável, viável e sustentável, o que pode ser também comparado aos papéis exercidos por designers, desenvolvedores e gerentes de produto, respectivamente, dentro uma squad.
Só que na prática nem tudo sai como a gente quer. A etapa de handoff pode chegar a ser traumática para alguns. Ao mesmo tempo, gerentes de produto precisam lidar com assuntos diversos no dia a dia, desde análise de dados até a priorização e acompanhamento de melhorias.
Conversando com PMs de diferentes squads de um mesmo produto, ficou o percepção de que o trabalho precisava ser melhor organizado, podendo investir mais tempo em planejamento. O sentimento geral é o de que precisávamos investir numa experiência mais consistente. Mas por onde começar? É aí que o design system entra.
Na prática
Apenas fazendo um exercício simples, pense em uma feature qualquer. Estime a quantidade de horas que deverão ser dedicadas para a realização dessa tarefa do zero, considerando pesquisa, design e implementação, sem um design system.
Agora vamos estimar novamente essa mesma feature, considerando que agora existem diretrizes e bibliotecas de estilos e componentes prontas à disposição do time, desde o design até uma base de códigos reutilizáveis. Será que podemos considerar uma redução de ao menos metade do tempo de execução de design e implementação?
Nesse caso, há uma redução de mais de 30% na quantidade de horas. O que poderia ser feito com essa otimização durante um ano inteiro de trabalho?
Como medir resultados
Mas como trazer as conversas sobre o valor do design system para a realidade do negócio, medindo e acompanhando resultados? Abaixo alguns exemplos e cases bem interessantes sobre o assunto.
Figma Libraries
Atualmente já é possível por exemplo ter acesso à gráficos de acompanhamento de uso das bibliotecas no Figma por outros times. De qualquer forma, esta se limita a uma ótica de design, mas não deixa de ser um indicador válido.
Inventário
Se o produto já conta com um inventário existente em produção, uma das formas de se trabalhar é entendendo e evoluindo estilos e componentes. Nesse caso, podemos medir a porcentagem de cobertura do inventário. Talvez não seja a melhor métrica, mas nos ajuda a acompanhar o progresso do trabalho e ter um status desse trabalho de documentação.
Quanti e quali
Pesquisas quantitativas e qualitativas podem nos dar uma “fotografia” do momento atual em relação ao entendimento ou adoção às iniciativas envolvendo design system na empresa. Muitas vezes, receber esse tipo de feedback qualitativo pode até ser o retorno mais valioso.
Case — Gitlog
A título de referência, este case é um trabalho de acompanhamento de um relatório de commits (atualizações de linhas de código) gerado pela ferramenta GitLog, filtrando os que seriam referentes à estilização. As linhas de cima medem o produto em questão, com uma queda atribuída às crescentes evoluções do design system e sua adoção pelo produto.
ROI estimado
Esse é o Design System ROI Calculator, uma calculadora de economia de custos estimados prevendo alguns casos diferentes. Definindo alguns poucos parâmetros pré-setados, é possível entender e projetar a economia de custos ao se investir em um design system.
Documentação + Google Analytics
Uma vez que o local onde está centralizada toda a documentação possibilite integração com o GA (pode ser usada uma ferramenta como Zeroheight por exemplo) , uma série de bons indicadores também passa a poder fazer parte do dia-a-dia de acompanhamento do sucesso do seu design system.
Mais algumas métricas:
De negócio (antes x depois do DS)
- Tempo despendido em design e implementação de interfaces (speed to market)
- Estimativa de custo economizado em horas x colaborador
- Custo estrutura DS x Economia equipe (ROI)
De produto
- Quantos colaboradores usando o DS
- Quantos % das aplicações usando DS
- Tempo despendido em entregas de DS
De tecnologia (design + desenvolvimento)
- Quantidade de componentes
- Componentes mais utilizados
- Componentes reaproveitados
Estes são só alguns exemplos das diversas métricas que o time pode ter. O mais importante é entender o momento, desafios e quais os objetivos da equipe e do negócio como um todo. Além dos ganhos em eficiência, podemos dizer que seu produto também estará propenso a vender mais.
Por trás de todo o conhecimento que está sendo construído sobre design system em comunidade, cada contexto é diferente e, para que as evoluções possam continuar acontecendo, a iniciativa precisa estar em constante manutenção, sempre demonstrando o seu valor e o quanto é sustentável e eficiente.
Implementing such a design system is a marathon — not a sprint.
Referências:
Brad Frost — Design Systems : o passado, presente e o futuro | BrazilJS CONF 2021 https://www.youtube.com/watch?v=4BIaRTlwSns
10 Usability Heuristics for User Interface Design | Nielsen Norman Group https://www.nngroup.com/articles/ten-usability-heuristics/
O Efeito da Estética-Usabilidade e o paradoxo da Primeira Impressão no Design https://brasil.uxdesign.cc/o-efeito-da-est%C3%A9tico-usabilidade-e-o-paradoxo-da-primeira-impress%C3%A3o-no-design-5474727bcb4c
The business value of design | McKinsey & Company https://www.mckinsey.com/capabilities/mckinsey-design/our-insights/the-business-value-of-design
TIP — Transparência, inspiração, propósito | Ana Counto Branding http://www.anacouto.com.br/wp-content/uploads/2018/02/TIP_White-Paper.pdf
From Prototype to Product: Ensure That Your Solution Is Feasible and Viable | Interaction Design https://www.interaction-design.org/literature/article/from-prototype-to-product-ensuring-your-solution-is-feasible-and-viable
Measuring the Impact of a Design System https://didoo.medium.com/measuring-the-impact-of-a-design-system-7f925af090f7
Analyze usage with GA | Zeroheight Learning Hub https://learninghub.zeroheight.com/hc/en-us/articles/4939118329883-Analyze-usage-with-GA
One Formula To Rule Them All: The ROI Of A Design System https://www.smashingmagazine.com/2022/09/formula-roi-design-system/
Os pilares estruturais de um Design System — Entendendo como um design system funciona e o que é essencial https://medium.com/@herre.ro/os-pilares-estruturais-de-um-design-system-5981a014f568
Livro: Building Design Systems: Unify User Experiences Through a Shared Design Language | Sarrah Vesselov and Taurie https://www.amazon.com.br/Building-Design-Systems-Experiences-Language/dp/148424513X
