O desafio de reestruturar um Design System — a pesquisa

Fernanda Serodio
Passei Direto Product and Engineering
8 min readJun 18, 2022

Já comecei a contar como foi o planejamento da reestruturação do Design System da Passei Direto, vocês lembram? Nesse post dei um contexto completo do cenário, como foi a organização das informações e quais foram os próximos passos mapeados para continuar essa missão.

O primeiro deles consistia em fazer uma pesquisa interna para identificar o uso do DS atual e possíveis melhorias nele. Para entender quais eram os maiores pontos críticos do problema, era preciso ouvir quem usava (ou pelo menos conhecia) o nosso Design System.

Imagem de Chris Montgomery disponível em Unsplash

Em relação aos Product Designers, entendi que nossa relação era muito próxima e o time era bem mais enxuto, então a troca com eles sobre suas percepções sobre o DS poderia ser (e foi!) mais casual e no dia a dia.

Já em relação ao time de Tecnologia, o cenário era diferente: uma equipe muito maior e pulverizada entre os squads. Eram pessoas que eu não tinha contato direto, várias delas eu nem conhecia por estarem em silos de trabalho diferente dos que eu atuava.

Confie em quem sabe fazer

A primeira ideia que passou pela minha cabeça foi bem simples: “Vou bater um papo rápido com pessoas desenvolvedoras que tenho mais contato e perguntar o que eles acham do nosso DS atual”. Mas logo em seguida botei a mão na consciência e pensei: “Na verdade, vou bater um papo com a galera de UX Research para entender como eles fariam se fosse uma pesquisa do escopo deles”. E essa foi a melhor decisão da vida!

Aproveitei que semanalmente o time de UX Research (ou, como chamamos carinhosamente, “UXR”) tem um bate papo aberto para todos do chapter de UX — o que inclui Product Designers, Content Designers e nossos líderes— onde são discutidas estratégias de pesquisa. Fui bem cara de pau perguntar aos meus colegas se poderia levar uma pauta para eles me ajudarem e fui super bem recebida!

Cheguei lá com apenas uma anotação: Quais perguntas/qual abordagem posso ter com as pessoas desenvolvedoras para entender como é o uso e quais possíveis melhorias no DS?

Para minha surpresa, não obtive respostas. Mas várias outras perguntas:

Balões de texto sobrepostos em uma grande bagunça, onde é possível ler as perguntas: “Quantas pessoas devs temos na PD? Como elas estão distribuídas nos squads? Existe algum chapter? Como estão estruturadas? Quais mexem diretamente com DS? Como é o processo de handoff com UX designers? Usam componentes prontos? Quais são mais fáceis de usar? E os mais difíceis? Vale cfalar com devs não-PD? Como é o processo de devs usando o DS?”
Fiz uma pergunta só e fui soterrada de mais perguntas pela equipe de UX Research. Ainda bem!

Todas essas questões faziam muito sentido: eu precisava entender e delimitar qual seria a segmentação do público da minha pesquisa para tomar decisões estratégicas em relação a como eu poderia abordá-los para conseguir os dados que eu precisava.

Decidindo a estratégia

Depois de conversar bastante com o pessoal de UXR (e aqui gostaria de abrir um parênteses para exaltar esse time! Tive bastante apoio deles para tomar as decisões ao mesmo tempo que eles me deram total autonomia para tocar esse projeto. Coisa mais linda ❤), fechamos a estratégia mais adequada para o nosso contexto:

Para um bom mergulho no problema, optamos por 3 abordagens combinadas de pesquisas quanti e quali com públicos diferentes

Pensamos em três frentes complementares que tinham potencial de dar as respostas que queríamos: uma pesquisa quanti e duas quali seriam suficientes para entender o os pontos críticos do Design System de várias perspectivas diferentes. Yay!

O pulo do gato (ou: “A maior lição”)

Logo depois dessa definição, veio o grande aprendizado dessa etapa ao me deparar com a tarefa de produzir os roteiros para cada uma dessas pesquisas: tenha um objetivo específico. Se você só puder ter uma resposta, qual seria a mais valiosa?

O pulo do gato aqui para formular as perguntas dos roteiros foi pensar no que eu iria fazer com a resposta de cada uma das perguntas. Todas as perguntas dos roteiros precisavam de um motivo para existir e um possível acionável dependendo da resposta.

Print de um documento aberto no Google Docs, onde se lê”: Roteiro Pesquisa Quantitativa Devs PD, Janeiro 2022. “ Logo abaixo, há uma breve descrição da pesquisa e as perguntas, cada uma delas marcadas com comentários ao lado explicando o motivo de cada uma existir.
No próprio roteiro eu comentava qual o motivo e possíveis acionáveis de cada pergunta

Outra decisão importante aqui foi decidir o tamanho dos roteiros. Eles precisavam ser completos o suficiente para gerar dados que guiariam o resto do planejamento da reestruturação do DS ao mesmo tempo que precisavam ser breves para serem possíveis de serem realizados e não gerar uma quantidade exorbitante de dados.

Em seguida, validei esses roteiros com o time de UXR, com minha liderança e com o PM e o EM do meu squad. Beleza, mas como tirar essa pesquisa cuidadosamente planejada do papel?

E agora? 😬

Nesse ponto do texto é importante eu confessar que essa foi a primeira pesquisa que fiz na minha carreira. E foi bem aqui que fiquei meio perdida: agora que já está tudo decidido, como eu faço essa pesquisa acontecer?

A primeira pesquisa deveria ser a quantitativa com todas as pessoas desenvolvedoras da empresa. Como eu chegaria até elas? Como fazer com que elas respondessem? Existiria alguma lista de e-mail com todas elas?

Quatro prints mostrando telas do Typeform da pesquisa
O Typeform estava prontinho, mas como fazer ele encontrar as pessoas que deveriam respondê-lo?

Muitas dúvidas surgiam a cada minuto na minha cabeça, até que mais uma vez acionei meu lado cara de pau e enviei uma mensagem no Slack diretamente para o VP de Tecnologia explicando minha missão e pedindo ajuda. E foi assim que ganhei 15 minutos na reunião semanal de liderança de Tecnologia para falar sobre a pesquisa e pedir para os líderes passarem o link para as suas equipes (além de engajá-los a responderem).

A estratégia deu super certo e 88% das pessoas desenvolvedoras responderam a pesquisa. Garantimos a participação de 100% dos squads da empresa!

E agora? (de novo) 😬

Resolvido tudo que envolvia a pesquisa quantitativa, vinha agora a mesma dúvida para a pesquisa qualitativa. Como fazer para tirar tudo do papel e transformar em realidade?

Dessa vez, a decisão estratégica foi escolher uma pessoa desenvolvedora de cada squad e entrar em contato com cada uma delas explicando a iniciativa e convidando para um papo. Tentei escolher um número equilibrado entre homens e mulheres, profissionais júniores e sêniores, pessoas com mais tempo de casa e pessoas recém-chegadas. No final, tudo deu certo mais uma vez e todos toparam participar. 🥳

Print de uma mensagem no Slack contextualizando sobre o projeto de pesquisa e pedindo a participação das pessoas selecionadas
ALOKA do Slack atacando novamente

Mas não era só isso, o time de UXR me orientou a fazer essas entrevistas em par. Assim, enquanto uma pessoa conduzia o papo, outra ficava anotando os pontos principais em um arquivo de tabulação.

Como vocês podem imaginar, mais uma vez precisei usar minha cara de pau — eu vou começar a chamar de habilidades de comunicação para soar mais bonito hahaha — e pedir ajuda aos meus colegas de equipe. Chamei Product Designers, Content Designers, Product Managers e perguntei quem gostaria de se voluntariar para embarcar comigo nessa bateria de entrevistas. Várias pessoas se disponibilizaram (sério, que time incrível ❤) e aí não ficou pesado para ninguém!

O mais difícil foi achar brechas onde as agendas se encontrassem para fazer essas conversas acontecerem 😂 (tô rindo, mas é verdade).

Print da tela com duas janelas abertas: em uma, existem anotações com perguntas da entrevista. Na outra, três pessoas estão em uma vídeo-chamada: eu conduzindo o papo, a pessoa entrevistada (borrada na imagem) e uma pessoa que anotava os principais pontos (também borrada na imagem).
Conduzi as entrevistas com a cola das perguntas para não me perder enquanto algum colega-anjo fazia as anotações no arquivo de tabulação

Cansativo e recompensador

Fazer essas entrevistas exigiu um grande investimento de tempo (de muita gente!), muito planejamento e muita organização para transformar tópicos de conversas em dados de inteligência. Mas também foi uma experiência transformadora.

Print de uma tabela do Google Sheets com muitas informações sobre as entrevistas, separadas em linhas e colunas de acordo com as perguntas que foram realizadas
O arquivo de tabulação foi essencial para organizar as respostas e facilitou muito no momento de análise

Aprendi muito não só com todo o processo, mas com cada um que tive oportunidade de trocar. Cada pessoa com seu ponto de vista único conseguiu agregar muito para possíveis soluções, tanto em relação ao Design System quanto a relação entre Design e Tecnologia, dentro e fora da Passei Direto.

Mas o trabalho ainda não tinha chegado ao fim.

As descobertas

A etapa de análise de todos os dados coletados foi um desafio enorme. No final das entrevistas, tínhamos toneladas de informações. Por um lado, elas poderiam gerar insights incríveis. Por outro, analisar tudo, extrair o que era mais precioso e compilar os principais pontos foi um trabalhão!

Mas o que nos interessa aqui é justamente a parte boa, então vamos a ela!

Um dos principais pontos encontrados nas pesquisas foi que o entendimento sobre o que é um Design System estava parcialmente alinhado entre o time, mas era preciso que tivéssemos uma definição oficial. Todos os respondentes usaram palavras-chaves do mesmo universo, mas o conceito ainda não era unanimidade dentro da PD.

4 prints da apresentação de compilados de insights da pesquisa, mostrando que os principais pontos levantados foram em relação a comunicação e organização
Compilado dos principais insights das pesquisas

Outro ponto super importante: os principais objetivos do projeto estavam bem alinhados com os benefícios que os profissionais enxergam no uso de um DS — agilidade, padronização e documentação centralizada são alguns deles.

Mas o destaque mesmo ficou com insight de que as maiores dores giravam em torno de dois pontos centrais: comunicação e organização. Profissionais de Tecnologia e Design — dentro e fora da PD — bateram nessas mesmas teclas, então ficou evidente que esses deveriam ser nosso foco na reestruturação do nosso Design System.

Transformando dados em ações

Para finalizar esse trabalho de pesquisa, alguns acionáveis foram identificados para fazer um bom trabalho na nova versão do DS.

Três ícones representando os acionáveis da pesquisa. Abaixo de cada um deles está escrito, respectivamente: definição de DS unificada, fonte da verdade e comunicação contínua

Primeiro: era fundamental estruturar e divulgar uma definição oficial sobre o que é Design System dentro da Passei Direto. Somente dessa forma deixamos todos e todas na mesma página em relação ao que estamos falando quando tocamos no assunto DS.

Depois, seria preciso estruturar com bastante organização, desenvolver e divulgar nossa fonte da verdade sobre o DS, contemplando conceitos, documentação, tokens e componentes disponíveis, além de atualizações.

Finalmente, também era extremamente necessário desenvolver e implementar uma estratégia de comunicação contínua: como acessar nossa fonte da verdade, divulgar novidades e atualizações do DS além de fomentar a comunidade interna sobre o assunto.

Vale ressaltar que enquanto o trabalho de pesquisa estava sendo feito e também durante a tarefa de análise dos dados, contei com muita participação de todo o time de UX: Product Designers, Content Designers, Researchers e lideranças. Cheguei a rodar com eles uma pesquisa mais informal sobre como estava o entendimento do conceito de Design System novamente, além de perguntar sobre expectativas do impacto no trabalho e suas preocupações em relação a nova versão.

Print de uma tabela com as informações coletadas com o time de UX em colunas que separam as perguntas feitas das respostas obtidas
Também tabulei as respostas para deixar organizado e gerar insights sobre a comunicação do novo DS

Essa etapa foi fundamental para definir o conceito de DS dentro da Passei Direto (ou seja, o primeiro acionável da pesquisa):

“Design System (DS) é marca, é código, é biblioteca de componentes, é vocabulário visual e é guia de como documentamos tudo isso.”

Essa foi a maneira que o Alessandro Lima, nosso Product Design Lead, conseguiu sintetizar o que é um Design System e passou a ser a definição oficial dentro da empresa.

Já os outros dois acionáveis (fonte da verdade e comunicação contínua) precisavam de mais tempo para serem desenvolvidos, ficando para um próximo momento na nossa jornada.

Ufa!

Foi assim que o que era para ser uma simples pergunta a colegas desenvolvedores(as) virou um projetão super robusto, envolvendo pessoas de várias áreas da empresa, nos mostrou com muita nitidez para qual direção seguir nos próximos passos.

E sabe o que é mais engraçado? Toda essa parte de pesquisa era só o começo. Ainda tenho muito mais para contar sobre essa jornada de reestruturação do Design System da PD… mas isso é assunto para o próximo artigo. Até lá! :)

--

--

Fernanda Serodio
Passei Direto Product and Engineering

Apaixonada por design, yoga, pole dance, 3 gatos e pelo Vinicius ❤️