Design System é a metodologia de design que padroniza elementos para construir experiências consistentes, que atendam às necessidades do usuário. Talvez você também conheça esse termo por outra definição: ele também tem sido usado para falar sobre ferramentas específicas ou para nomear sistemas, por exemplo.
Entender o que é design system no sentido de metodologia pode ajudar as organizações em um desafio específico: o de evitar o retrabalho, além de muitos outros que se relacionam com isso.
Navegue pelo conteúdo:
- O que é Design System?
- Design system como metodologia
- Qual a relação entre design system e retrabalho?
Você sabe o que é design e o que é sistema? Esses dois conceitos separados já dizem muito. O livro "Design Thinking", de Nigel Cross, define que design pode denominar tudo que está ao nosso redor e que não é resultado da própria natureza, que foi projetado e criado por alguém. Portanto, quanto melhor for esse processo de design, melhor será a experiência do usuário com os espaços ou objetos.
Existem diversas metodologias de design, como o design system.
Já o termo “sistema” pode ser definido como “a unidade funcional composta por uma variedade de elementos, componentes ou subsistemas que interagem entre si, exercendo uma função ou assumindo uma utilidade”. Essa é a definição do livro “Design: Conceitos e Métodos”, de Tai Hsuan-An.
“Na natureza, por exemplo, uma árvore é um sistema que, por sua vez, é composto por vários subsistemas, tais como raízes, troncos, galhos e folhas. Um conjunto de muitas árvores forma um sistema maior, que é a mata ou floresta. Em escala menor, os prótons, nêutrons e elétrons são os elementos mínimos que formam o sistema mínimo, que é o átomo, que é constituído de vários outros ainda menores. Esses sistemas mínimos formam a molécula, que já é outro sistema ainda maior e assim por diante”.
Tai Hsuan-An no livro “Design: Conceitos e Métodos” (tradução livre).
Somando esses dois conceitos, chegamos a uma definição sobre o que é a metodologia de design system. No livro "Design Systems: A practical guide to creating design languages for digital products", uma referência da área, Alla Kholmatova apresenta a seguinte explicação sobre o conceito:
“Design system é um conjunto de padrões interconectados e práticas compartilhadas organizados de forma coerente para atingir o propósito de produtos digitais. Padrões são os elementos que se repetem e que combinamos para criar uma interface: coisas como fluxos de usuários, interações, botões, campos de texto, ícones, cores, tipografia e microtextos (microcopy). Práticas são como escolhemos criar, capturar, compartilhar e usar esses padrões, particularmente quando trabalhamos em equipe”.
Alla Kholmatova no livro “Design Systems” (tradução livre).
A autora também explica que, no design system, o propósito do produto é o que molda os padrões de design definidos. Essa escolha pode ser influenciada por fatores, como os funcionais, relacionados ao domínio ao qual o produto pertence e sua funcionalidade principal.
Ela cita como exemplo as diferenças entre um software para negociação e análises de mercado, que prioriza a presença de elementos como barras de tarefas, campos e grades de dados, gráficos e ferramentas de visualização de dados; de um site de aprendizado online, que já tem como prioridade artigos, vídeos, tópicos de discussão, indicadores de progresso e atividades interativas; e que ambos são diferentes de um e-commerce, que já valoriza mais a exibição de produtos, filtros de lista, carrinho de compras e um checkout eficiente.
Neste contexto, a pessoa responsável por aplicar essa metodologia em um projeto atua como um maestro a reger uma orquestra, já que esses padrões precisam interagir, conectar e, ainda assim, funcionar perfeitamente juntos. Para isso acontecer, esse profissional precisa estar familiarizado com metas e objetivos de negócio, que o permitam atuar alinhado com a visão de futuro. Isso exige uma boa capacidade sistêmica, para agir diante de todo um sistema e entender cada ponto do processo, não só o final da experiência.
Então, a diferença do design system em relação às demais formas de fazer design está no fato dessa metodologia focar na criação como um único ecossistema vivo, orientado por uma visão, e não só como resultado de entregas isoladas ou de elementos pontuais que são unidos ao final da jornada.
O conceito de design system não é complexo, mas aplicá-lo em um contexto real tem seus desafios. Por isso, entendemos que a teoria pode nortear, mas a prática exige método e disciplina. Pela experiência da Caiena, quando atuamos na concepção de novos produtos e serviços, ou realizamos consultorias com esse objetivo, percebemos que o maior risco não é a falta de orçamento ou de criatividade, mas a fragmentação dos processos. Sem estruturar o trabalho com uma metodologia, equipes diferentes acabam criando respostas diferentes para o mesmo problema: dois botões para a mesma ação, dois fluxos para a mesma tarefa, dois nomes para a mesma coisa. Em algum momento, alguém precisa unificar tudo isso, e é aí que o retrabalho aparece.
Os dois termos da definição de Alla Kholmatova, padrões e práticas, ajudam a explicar por quê. Se padrões são os elementos que se repetem, cada padrão definido uma vez é uma decisão que a equipe não precisa tomar de novo: o botão, o campo de texto e o microtexto já existem e podem ser reaproveitados. E se práticas são a forma como a equipe cria, registra e compartilha esses padrões, são elas que fazem todo mundo saber que o padrão existe e onde encontrá-lo. Sem os padrões, a equipe recria. Sem as práticas, a equipe diverge.
Alla Kholmatova explica em seu livro que os resultados da eficiência do design system na organização podem ser vistos quando todos os processos são guiados por um propósito em comum. A prática do design system pode ser considerada eficaz quando combina o custo-benefício com a eficiência e a satisfação dos usuários. Em nossa visão, a redução do retrabalho é parte desse custo-benefício.
“Quando existem lacunas, também é fácil vê-las. Um sistema de design fragmentado leva a uma experiência de utilizador fragmentada, cheia de mensagens contraditórias. Queremos que o usuário assine a nossa newsletter, mas também queremos que ele veja os nossos produtos mais recentes. Queremos que ele avance pelas etapas, mas também precisamos de garantir que avalia cada receita”.
Alla Kholmatova no livro “Design Systems”.
A autora descreve o problema do ponto de vista de quem usa o produto. Para quem constrói, ele aparece de outra forma: cada mensagem contraditória na interface indica que duas decisões foram tomadas separadamente, e alguém vai precisar voltar para conciliá-las. Esse tempo poderia ser dedicado a outras melhorias, mas acaba sendo usado para refazer o que já estava pronto. Quando a equipe compreende o que deseja alcançar e conta com padrões e práticas para chegar lá, as tarefas tornam-se mais fluidas, com menos revisões e menos decisões repetidas.
Então, para reduzir o retrabalho com as práticas de design system, questione-se:
- Seu time sabe qual é o propósito central e inegociável do produto?
- Os padrões que se repetem no produto estão definidos em um só lugar, ou cada equipe recria os seus?
- Existe uma prática combinada para criar, registrar e compartilhar esses padrões?
- Quando surge uma necessidade nova, o sistema se adapta ou é preciso abrir uma exceção?
- Quanto tempo a equipe gasta corrigindo inconsistências que já tinham sido resolvidas antes?
As decisões de design system só surtirão efeitos positivos se o projeto for orientado por uma resposta em comum a essas perguntas. Isso não deve se restringir à equipe, mas também orientar outras áreas da organização. Sistemas são construídos dia após dia, sobre uma mesma base, até que tudo se mova na mesma direção.
Vivemos na prática a tecnologia e o design há mais de 20 anos, por isso, além de reunir muita experiência nesses temas, mantemos uma curadoria atenta ao que vale a pena ler, pensar e aplicar na Newsletter da Caiena. Assine abaixo para receber os conteúdos direto no e-mail sobre design, tecnologia e cultura organizacional quinzenalmente.
.webp)
.webp)
