Aplicando Design Thinking ao Animalia Design System
Como a abordagem apoiou na melhoria do processo de criação de um componente
Texto criado de forma colaborativa com Mayara Brandão da Silva
Caso você não tenha lido nosso artigo anterior sobre como os UX Researchers estão apoiando no Design System, estamos aqui no UX Lab apoiando na criação de componentes para o Animalia Design System!
Este projeto foi conduzido em equipe por mim, Vinícius Mattos da equipe de Research e a Mayara Brandão da equipe de Product Design. Vamos estar escrevendo este artigo em conjunto e contando para vocês um pouco dessa nossa vivência.
Mas primeiro, o que é um Design System?
"Design System é uma coleção de componentes reutilizáveis, padronizados para determinado produto, site ou sistema web. Diferente de um style guide (guia de estilos), um design system vai além: o design system unifica a linguagem de um determinado produto."
Animalia, o Design System da TOTVS
O Animalia DS — ou Animalia Design System — é o design system open source da TOTVS, que nasceu com o objetivo de melhorar a performance no desenvolvimento de aplicações corporativas, facilitando a comunicação entre designers e desenvolvedores, com uma documentação prática de componentes que garanta uma melhor usabilidade para os clientes.
E o que é o Design Thinking?
O design thinking é um método centrado no ser humano, altamente colaborativo, experimental, otimista e visual. Assim, é preciso acreditar que se pode fazer a diferença, desenvolvendo um processo intencional para chegar ao novo, impactar positivamente as pessoas e criar soluções de negócio inovadoras.
Agora que estamos alinhados, podemos seguir!
O processo de criação de componente antes do design thinking:
Vamos estar focando no processo de criação de um componente na camada de design, que antes do processo de design thinking era composto por 3 etapas: Inventário, Descoberta e Handoff.
Eu já possuía conhecimento e prática das etapas de inventário e descoberta e a Mayara já tinha da etapa de inventário e handoff. Agora contamos nosso maior desafio do projeto para vocês: Não enviesar a solução com os nossos desejos de melhoria em cada etapa. Como não trazer nossas próprias dores e não percorrer o caminho do “nós já sabemos o que precisa melhorar”? Estes foram os primeiros questionamentos que nós fizemos, e neste momento não sabíamos como iríamos conduzir o projeto, mas tínhamos certeza que o nosso intuito era melhorar o processo de criação de componentes para todos os designers que atuam no Animalia e também para as pessoas desenvolvedoras que recebiam o componente para desenvolver.
Nossa jornada
Quando estamos em um projeto, o tempo é um dos itens mais escassos e precisamos fazer escolhas, priorizando o que é mais importante e que traz mais valor.
Recebemos o desafio de encontrar as dores que a equipe enfrentava e sugerir melhorias em apenas duas semanas e isso cumprindo todas as etapas do processo colaborativo que é o design thinking.
Aqui trabalhamos o Design Thinking no formato do Espiral Design.
Como mostrado no Espiral, a primeira etapa é pesquisar!
Entrevistas com membros do time
Durante dois dias, rodamos entrevistas com os membros da equipe do Animalia DS para entender pontos de dores, organizações das atividades e o que sentiam falta durante a execução do processo.
Análise das entrevistas
Com todas as falas coletadas, analisamos os pontos em comum, onde as atividades das etapas se encontravam, identificando as principais dores das pessoas, designers e desenvolvedoras, no processo de criação de componentes na camada de design. Nosso entregável dessa tarefa foram insights e os desafios que guiaram as sessões de ideação.
Sessão de Ideação
Realizamos sessões de ideação com pessoas designers, desenvolvedores e agile master buscando soluções para as dores encontradas. Utilizamos a dinâmica do Crazy 8s, onde em 5 minutos cada participante cria 8 soluções diferentes para o desafio que apresentamos para eles. No caso levamos a questão do repasse de uma fase para outra e a do onboarding de um novo participante.
As soluções sugeridas foram: mais materiais de apoio para novos integrantes, projetos em dupla para os integrantes se apoiarem e entre outras ideias.
Prototipação
Depois de priorizar quais soluções que fariam mais sentido para a estratégia do Animália naquele momento, começamos a prototipar um novo cronograma baseado nos pontos encontrados, uma blueprint para a visualização de quais seriam as demais interações que existiam com outras áreas ou pessoas da TOTVS e também criamos um card sorting para entender quais conteúdos a equipe gostaria de aprender ou se aprofundar e principalmente: como gostariam de receber esse conhecimento.
Entenda mais sobre card sorting aqui: https://brasil.uxdesign.cc/card-sorting-como-descobrir-o-modelo-mental-de-organiza%C3%A7%C3%A3o-de-conte%C3%BAdo-18e9a50121aa
Hora de validar!
O processo de validação envolveu uma mistura de entrevistas com validação de cronograma e cardsorting para os temas de estudos.
Primeiro perguntamos como seria o cronograma ideal do participante, a dica aqui é: Enquanto uma pessoa designer entrevista, outra pessoa designer vai transcrevendo ao pé da letra tudo o que a pessoa validadora está falando. Após coletar a perspectiva de cronograma ideal, apresentamos o cronograma prototipado. Fazemos dessa forma porque assim conseguimos comparar o que a pessoa validadora disse inicialmente ser o ideal e o que ela fala depois do cronograma ser apresentado, se ela reforça o que disse anteriormente ou muda de ideia.
Após a análise do cronograma, conduzimos a pessoa para a validação do card sorting listando os principais assuntos que gostaria de aprofundar, o que considerava conhecimento básico necessário para a execução das etapas em que estava envolvida e outros pontos referentes a conteúdos e forma de aprendizagem.
Análise das validações
A análise do feedback durou 01 dia, em que verificamos o que foi um padrão entre os entrevistados e o que eram pontos específicos. Iteramos o cronograma de cada etapa do processo, e identificamos que era necessário quebrar a etapa de handoff em duas: sendo uma chamada de Proposta visual, em que o trabalhamos a usabilidade, acessibilidade, quais interações serão adotadas pelo componente e por fim o protótipo em alta fidelidade (UI). A última etapa do processo ainda se mantém com o nome Handoff e o seu propósito inicial de especificar tudo que foi proposto na etapa anterior para as pessoas desenvolvedoras.
A partir do feedback do cardsorting desenhamos uma trilha de conteúdos em vídeos para auxiliar no onboarding e apoio na realização das atividades. Sim! Vídeos foram a principal forma que nossos integrantes do Design System utilizam para aprender conteúdos. É claro que pensando em aproveitar ao máximo o esforço de criação do conteúdo, vamos aproveitar os roteiros dos vídeos como material de leitura para as pessoas que preferem esse método.
Além disso, podemos destacar outros pontos de melhoria incorporados ao cronograma como: maior tempo para as pessoas designers pensarem em acessibilidade, um período maior para iteração, a etapa de handoff divida em duas partes: uma para o período de criação do componente e uma para focada nas folhas do hanodff, e envio do material pouco antes da finalização para outros integrantes da equipe oferecerem feedback ou sugerirem ajustes antes da entrega final.
Conclusão
O Design Thinking foi a premissa durante todo processo. Em todas etapas tivemos integrantes do time que conviviam dentro do processo, que possuíam dores e expectativas em relação a execução de suas atividades e que principalmente, estavam dispostos a trabalhar conosco de forma colaborativa.
Nossas sugestões de melhoria já estão sendo aplicadas pelo time na realização das etapas de inventário, descoberta, proposta visual e handoff. Estamos passando por um momento de piloto desse novo processo e num futuro próximo vamos retornar para para entender o que deu certo e o que precisa ser aprimorado. Porque Design Thinking é sobre tomar decisões, por em prática, validar, iterar e melhorar nossa experiência, e é isso que seguiremos fazendo.
Até o próximo capítulo!
Texto criado de forma colaborativa entre Vinícius Mattos e Mayara Brandão da Silva
Fontes
https://brasil.uxdesign.cc/crazy-eights-e88b1d12e2af
https://medium.com/ux-strategy/como-redigir-insights-1ea139000728?source=false---------0
