desculpe pelo trocadilho, não me contive

Como utilizar dados para a melhoria contínua

Você sabe aonde encontrá-los?

Recentemente executei um projeto de redesign para a página inicial do portal de Design System da TOTVS, o Animalia DS. Mas essa necessidade não surgiu das “vozes de nossas cabeças”; e é sobre isso que falaremos hoje.

Essa história começou em meados setembro de 2023, onde o nosso time de pesquisa fez um trabalho em profundidade para entender questões relacionadas ao acesso e uso do Animalia DS, com a pretenção de aumentar o engajamento e fomento do assunto na TOTVS.

Então depois de analisar e sintetizar os dados coletados na pesquisa, a nossa researcher Jéssica Gonçalves executou a dinâmica para geração de insights, que cuminou em 4 ao todo, sendo um deles a vertente que originou o redesign do Portal.

O processo de design seguiu para a geração de desafios através da dinâmica How Might We, que resultou no seguinte “X da questão”:

“Como Nós Podemos fazer com que o Portal do Animalia seja aderente a todos os perfis (pessoas desenvolvedoras e designers)?”

Com isso, o time de pesquisa realizou um workshop de ideação entre pessoas multidisciplinares para gerar o máximo de ideias que pudessem corroborar na resolução deste desafio, no qual foram os entregáveis finais desta etapa.

Agora que entendemos a origem desta demanda, vamos falar como se procedeu o plano de ação para resolver este desafio e qual foi o resultado final. Me acompanhe por favor. 👀

Já no final de fevereiro deste ano (2024), eu e minha colega de equipe Lucy, com base na entrega desta pesquisa iniciamos a etapa seguinte do Espiral Design; a Usabilidade. De maneira geral, executamos seis técnicas dentro da etapa deste ciclo:

1. Revisão e preparo das ideias;
2. Protótipo de média;
3. Design critique;
4. Teste de usabilidade;
5. Métricas de usabilidade;
6. Análise e priorização de ajustes.

Como eu não quero me estender muito por aqui, vou passar apenas pelos pontos principais sem me aprofundar muito no “como” das coisas. Até porque tem muitos livros, artigos e vídeos explicando detalhadamente cada um, e acredito que a riqueza deste artigo esteja nas experiências e aprendizados que obtivemos.

Revisão e preparo das ideias

Vale ressaltar que logo de início já utilizamos mais uma vez os dados, coletando a telemetria e mapa de calor produzidos por meio de acessos do portal desde a sua implementação até a data presente.

Capturas de tela da telemetria e mapa de calor do portal

Além disso, nos basemos também no resultado de uma dinâmica de Card Sorting com os conteúdos do portal, para entender como as pessoas categorizavam esses assuntos.

Fora isso, também fizemos um benchmarking dos principais DS’s (seis para ser mais exato) só para dar uma espiadinha em como os brothers andam estruturando seus portais. 🥸

Protótipo de média

Agora com mais direcionamento de outros dados, arregaçamos as mangas e iniciamos a construção do wireframe. Aliás, dos wireframes (você já vai entender o porquê). Para isso, usamos o bom e velho Miro como ferramenta mesmo, que é bem prático e tem uma lib que atende super bem.

Vale ressaltar que neste momento trabalhamos de maneira árdua em questões de writting/content design, para facilitar desde rótulos de cards e botões até os textos em da página no geral.

Captura de tela das diversas versões de proposta que montamos

Design critique

E após alguns desenhos, discussões e pair design, abrimos a cozinha para outros designers criticarem nossas propostas, comentando os pontos fortes e fracos de cada uma, além do que poderíamos adicionar ou fazer diferente. Bom, 7 pessoas participaram ao todo, e o final dessa história você já sabe né: MAIS DADOS. Eu particularmente amo essa dinâmica de tão enriquecedora, sério.

Feito isso, capturamos todas essas informações e convergimos e iteramos já em um novo protótipo de média que teria interações e navegação necessárias para o teste de usabilidade. Aqui já partimos para o hypado Figma. 😏

Teste de usabilidade e métricas

E sem mais delongas, com o protótipo em mãos, elaboramos um roteiro para testar alguns cenários que desejámos testar. E com isso começamos os testes de usabilidade. Na ocasião recrutamos 12 pessoas (6 de cada perfil do desafio) na qual 9 conseguiram participar.

Ao final de cada teste a gente coleta uma nota de NPS (nesse artigo aqui eu já comentei como fazemos isso) que usamos para aferir o sucesso do que projeto logo em primeira instância. Nesse caso tivemos 0 detratores, 4 neutros e 5 promotores, resultando em um NPS de 55,56%, o que é considerado Muito bom (entre 50% e 74%).

gráfico representando o resultado de NPS do projeto

Análise e priorização de ajustes

E aí para finalizar essa etapa… lembra dos testes de usabilidade que falei à pouco? Então, a gente transcreve cada seção, e ao final, destacamos as principais falas dos usuários para analisar e discutir em cima do protótipo de média o que será iterado no de alta. Sim gente, é muito DADO e precisamos usar isso ao nosso favor.

cenas do filme O Sexto Sentido — desculpa de novo pelo clichê

Só nessa dinâmica de testes a gente pôde coletar diversos insights, sejam para refirnar os rótulos e textos que criamos, sejam para necessidades de elementos na interface; como é o caso de uma área de “páginas mais acessadas”, que algumas pessoas relataram no decorrer do teste. E aí vêm a importância de escutar ativamente e questionar pontos fora do roteiro… Mas isso é assunto pra outro artigo… 😶‍🌫️

E pra finalizar essa etapa do projeto, além desses pontos que iteramos, documentamos outras 7 oportunidades que poderão levar a um novo ciclo do Espiral Design em prol da melhoria contínua do produto Portal Animalia DS, que como qualquer outro, é orgânico e necessita de atenção para se manter vivo, ou evoluir.

Conclusão

Você conseguiu perceber que a cada passo que dávamos haviam dados para nortear a tomada de decisão? Inclusive a própria origem do projeto, não foi algo que o Product Owner levantou subtamente de sua cadeira e disse: “precisamos melhorar o portal do nosso design system”.

Esse mindset orientado à dados é fundamental para que possamos gerar verdadeiro valor para as pessoas que utilizam nossos produtos!

Veja à seguir o resultado final do projeto:

Antes:

Depois:

Vale observar que esta entrega está sendo desenvolvida no período de publicação deste artigo, portanto dependendo do momento em que estiver lendo encontrará algo parecido com alguma das versões acima.

Espero que tenha conseguido captar a mensagem central desse artigo, ou ao menos absorvido algo de útil para o seu processo de design.

E se quiser compartilhar algo comigo, ficarei feliz em receber sua notificação lá na rede vizinha.

Um grande abraço e até a próxima 🫡