Como UX Research pode ajudar na construção do Design System?

Jéssica Damaceno Gonçalves
Hub de Design TOTVS
4 min readNov 27, 2021
imagem de um laptop com imagens na tela de componentes como: menu, cards. Componentes web e de aplciativos.
imagem de Tirza van Dijk

Design System é um assunto que está em alta há um bom tempo, muitas empresas e pessoas vem falando sobre e qual o impacto que traz para a construção de uma boa experiência para seus produtos.

O Design System hoje é uma das mais importantes ferramentas em qualquer time de produto. Principalmente porque melhora a qualidade de design do produto e usabilidade, definindo a aparência de cada elemento de design, podendo ser reaproveitado em um produto, também auxilia a simplificar a criação de novos layouts e no entendimento dos componentes.

Design System é exatamente como um produto, e sua construção para que seja de fato eficiente é necessário passar pelos mesmos métodos de pesquisa em design, principalmente por ter o foco em interações e comportamentos no aspecto tecnológico, a pesquisa é fundamental nessa etapa de construção, é essencial para entender:

1.Qual o comportamento de um componente estudado

2. Como as pessoas interagem com este componente

3. Qual sua característica e composição básica

4. Como as pessoas design utilizam este componente e para quê

O papel da pessoa Researcher nesta etapa pode ser fundamental por ter esse olhar de pesquisa. Além de tudo, assim como no nosso dia a dia descobrir novas oportunidades e possíveis cenários de variação de um componente, por exemplo.

“UX Research é o estudo sistemático dos usuários-alvo e seus requisitos, para adicionar contextos e percepções realistas aos processos de design. Os pesquisadores de UX adotam vários métodos para descobrir problemas e oportunidades de design. Fazendo isso, eles revelam informações valiosas que podem ser inseridas no processo de design.”

— Interaction Design Foundation

E por onde começamos tudo?

Nesta primeira etapa começamos com o inventário, onde se realiza um benchmark interno para entender como tal componente se comporta, qual sua característica, para quais cenários é utilizado, etc.

Na etapa do inventário, a pessoa designer investiga internamente dentro das marcas existentes da empresa como o componente selecionado para análise se comporta em cada uma.

Há interação? Qual seu comportamento em diferentes estados? Quais cores são utilizadas? Como aparece na versão mobile? Essas perguntas guiam nossa pesquisa para entendermos os padrões e divergências existentes entre elas. Assim como em todas pesquisas, o designer deve documentar esses achados de forma clara e acessível para os outros designers que seguirem no projeto conseguirem acessar os aprendizados da etapa.

A etapa pode terminar com diversas perguntas em aberto para a próxima fase, a de descoberta!

Nela a investigação não é mais interna mas sim externa, analisamos os principais design systems do mercado (como Carbon, Material Design, Ant Design) para entender como o componente estudado é apresentado por cada um deles.

Além de uma parte super importante que é entender o que os grandes portais sobre acessibilidade, usabilidade e experiência do usuário, como NN Group e W3, recomendam a utilização do componente. Após fazer todas essas comparações e análise, começamos a entender quais são as boas práticas oficiais recomendadas, os estados possíveis do componente e como responder aquelas perguntas que surgiram na etapa do inventário.

As etapas se relacionam com a essência de Research, pois o nosso trabalho como pesquisador é tirar o enviesamento do que nós achamos ser o melhor ou pior como designer, limpamos nossas mentes e mergulhamos durante duas semanas de pesquisa focando em um componente por vez.

A pessoa designer que ficou com o inventário de um componente não faz sua descoberta, mas sim repassa para outro, para eliminar mais uma possibilidade de enviesar o que o designer acredita ser o “certo”. Outro ponto necessário que vale a menção é a existência de dailys com todos membros do squad realizadas para que a comunicação entre todos membros da equipe se mantenha clara e atualizada.

Finalizamos a etapa de descoberta com uma rodada de “CNP — Como nós podemos?” (Você pode ler sobre essa dinâmica aqui!). O designer conta as necessidades e problemas do componente em forma de uma história e deixa para os outros designers criarem opções de como perguntar como nós podemos chegar em um componente que abrace os aprendizados envolvendo acessibilidade e as dores coletadas.

Para um designer que já teve que incluir o DS como apenas mais um "to do" em sua lista de tarefas, sei que muitas vezes ele não é tratado como o destaque necessário no roadmap de produtos e ver ele ser tratado com tanta importância chega a ser utópico.

O Design System deve sim ser tratado como um produto da empresa, com pessoas alocadas para essa missão, olhando para acessibilidade e boas práticas até entregarmos as melhores possibilidades para nosso usuário. E até lá, muitas pesquisas ainda serão realizadas.

Texto colaborativo @Vinícius Mattos

--

--

Jéssica Damaceno Gonçalves
Hub de Design TOTVS

UX Researcher at TOTVS | Research Ops | Facilitadora | Psicóloga