UX Research e a criação de um Design System
Como UX Researchers auxiliaram na criação do Design System da TOTVS.
Durante as últimas sprints, o time de pesquisa do Hub de Design participou da criação do Animalia, o Design System da TOTVS. Como todo processo de design, nossa participação foi um momento muito colaborativo e que permitiu que o time de pesquisa tivesse mais contato com essa etapa do processo onde envolvemos componentes, layout, acessibilidade entre outros pontos.
Importância da pesquisa
Quando pensamos na experiência das pessoas (UX), entendemos a importância da realização de pesquisa. A pesquisa garante que as soluções desenvolvidas (sendo produtos ou serviços) realmente façam sentido para as pessoas que vão utilizar. Envolver pessoas usuárias no decorrer de todo o processo e deixar de desenvolver ideias cheias de nossos próprios vieses, ajuda a diminuir a perda de tempo e dinheiro.
Existem diversos métodos que nos apoiam nesse momento, alguns que utilizamos no momento de discovery dos projetos (que é quando exploramos os problemas, geramos ideias e validamos) também foram utilizados na criação do Design System da TOTVS como: pesquisas em profundidade, shadowing, validação de conceito, benchmark, coleta e validação de hipóteses, tudo isso para criar um ecossistema de componentes que fosse aderente para todas as pessoas e produtos da companhia.
Etapas e atuação do time de pesquisa
Inventário
A atuação do time de pesquisa aconteceu em duas principais etapas, a primeira foi o inventário, momento de mapear e entender como as marcas e produtos dentro da companhia utilizavam os componentes e suas composições. A TOTVS é uma empresa de tecnologia que atua em diversos segmentos, logo seu ecossistema é gigantesco, com produtos variados com objetivos diversos e é normal que exista componentes e telas específicos para cada um desses produtos e segmentos.
Para realizar esse mapeamento procuramos pelas documentações dos (1) produto/projeto, (2) a construção de componentes/telas no Zeplin ou Figma e claro, (3) envolvendo pessoas designers, desenvolvedoras ou do suporte e por meio de um bate papo e até mesmo shadowing online, conseguimos coletar as informações importantes para esse mapeamento.
Depois de coletar os insumos das marcas, realizamos a primeira análise através de agrupamento por similaridade, dessa forma, todo componente com composição ou funcionalidade parecidas, era agrupado para começarmos a entender o comportamento e objetivo desse componente nos produtos. Além do agrupamento por similaridade, também realizamos o mapeamento das variações do componente (seja por comportamento ou composição).
Como esse é um momento exploratório, no decorrer da etapa era natural o surgimento de dúvidas, dessa forma as dúvidas e suposições eram anotadas para que as pessoa que seguisse para a próxima etapa, pudesse respondê-las e se aprofundar nesses pontos.
A etapa de inventario foi de extrema importância pois ao mapear e entender o como e o por que os produtos dentro da companhia utilizam certos componentes, conseguimos atender da melhor forma a necessidade dos produtos, construindo componentes aderentes e que fizessem sentido para as pessoas.
Descoberta
Com o objetivo de mapear o comportamento, composição, requisitos acessibilidade e boas práticas dos componentes, a etapa de descoberta consiste na realização de benchmark entre Design Systems externos e organizações que são referência no assunto. Nesse momento, foi possível identificar praticas em comum do mercado, o que funcionou e o que não, além de outra percepção sobre a aplicação (local e função) de cada componente.
A acessibilidade foi e é uma premissa em nosso Design System, dessa forma, foi de extrema importância mapear Design Systems que são referência no mercado e claro, que se preocupam com questões de acessibilidade, além de realizar estudos tendo como base WCAG com as diretrizes de acessibilidade (Guia WCAG e Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1) e NN Group com as boas praticas (NN Group).
Além de mapear o comportamento, composição e requisitos de acessibilidades dos componentes, realizamos um comparativo entre os design systems mapeados, para entender os pontos em comum e a diferença entre eles.
Como apoio para o mapeamento foram realizadas validações com pessoas desenvolvedoras, designers e com pessoa especialista em usabilidade/acessibilidade do nosso time. Com as validações foi possível entender se precisávamos explorar mais algum requisito de acessibilidade, entender a viabilidade técnica e já apresentar para as pessoas designers o estudo referente o componente para que posteriormente, essas pessoas continuassem com proposta visual do componente.
O processo de design é colaborativo e envolver o máximo de pessoas durante as etapas só gera benefícios, a criação de nosso Design System foi um exemplo disso, envolver pessoas de diversos contexto trouxe percepções diferentes que ajudaram e tem ajudado a criar o ecossistema Animalia. Nesse texto compartilhei minha perspectiva durante a construção do Animalia, Design System da TOTVS e caso queira conhecer outras percepções, abaixo estão dois outros textos feitos por Bia Ferrer, Vinícius Mattos + Mayara Brandão da Silva designers que também ajudaram na construção do Design System na TOTVS.
Se quiser tomar um café e trocar figurinhas sobre a construção do Design System ou algum outro ponto sobre design, me chama :)
