O desafio de reestruturar um Design System — a comunicação

Depois de contar o contexto e os primeiros passos de reestruturação do DS da Passei Direto, explicar em detalhes a etapa de pesquisa e mostrar todo o processo de diagnóstico do Design System atual, chegou a hora de falar um pouco sobre como tem funcionado toda a parte de comunicação com o time.

Imagem de Possessed Photography disponível em Unsplash

Láááá na etapa de pesquisa, depois de conversar com dezenas de pessoas sobre Design System, ficou muito nítido que a comunicação era um dos maiores pontos de dor de quem tinha passado por um processo de implementação de um DS.

Esse, inclusive, foi um dos maiores insights do estudo e estimulou ações para que a reestruturação do DS da PD fosse bem comunicada — não só pelo alinhamento das informações mas também para facilitar o buy in da equipe em relação ao assunto.

O spoiler de milhões que dei lá no post sobre a pesquisa

E uma coincidência (ou não! rs): em todos os cursos, artigos, discursos de experts em DS, enfim, em todos os materiais sobre o assunto que eu estava estudando, muito se falava sobre a parte técnica de construir um Design System do zero, mas em quase nenhum desses conteúdos eu encontrava informações que poderiam me ajudar a comunicar e engajar o time no processo.

E agora, por onde começar?

(Não é a toa que um subtítulo do gênero está em todos os artigos que tenho escrito sobre essa jornada, porque essa é a pergunta que mais me faço o tempo inteiro! rs)

Identificar questões a serem resolvidas pode exigir metodologias específicas, levar tempo de análise e chegar a conclusões incríveis, mas é a segunda parte que sempre nos interessa mais: o que fazer com a informação encontrada?

No caso aqui da Passei Direto, a comunicação acabou sendo um ponto de atenção desde o início.

Acredito que isso se deve muito pelo meu background trabalhando no Marketing e vivendo Branding dentro da PD ao longo de 3 anos: foi lá que entendi o poder de comunicar e o quanto é importante deixar sempre todo mundo alinhado nos projetos. Então, para mim, esse sempre foi um fator chave previsto nessa jornada de reestruturação do DS.

A seguir, vou falar sobre cada comunicação feita, em que momento foi disparada, quais seus objetivos e para qual público. Acredito que dessa forma consigo contribuir para a comunidade de Prod/Tech/Design com um material em português bastante recheado de exemplos de comunicação e que ele possa ajudar outras pessoas com o mesmo desafio.

1. Apresentação do projeto para o time inteiro

Bastante incentivada pela minha liderança (Rodrigo Garcia, que carinhosamente chamamos de Rux, um verdadeiro anjo 👼), logo após a pesquisa, comunicamos para todo o time da PD que o projeto de reestruturação aconteceria nos próximos meses.

Utilizamos a reunião mensal para esse comunicado: esse é o momento do mês dedicado para olharmos para nossos OKRs, indicadores principais, atualizações sobre projetos importantes e boas vindas aos novos integrantes da empresa.

Nessa ocasião, preparei exatos 7 slides e falei por 5 minutos para mais de 150 pessoas. A maioria estava acompanhando a reunião de forma remota, mas fiquei super nervosa de falar com tanta gente ao mesmo tempo! Não tenho muitas dicas para esse tipo de situação, a gente basicamente precisa seguir em frente com nervosismo (no meu caso, tremendo como uma gelatina) mesmo.

Era importante explicar de forma simples a lógica de um Design System e seus conceitos principais, então comecei a usar a metáfora do Lego: o DS é como a caixa com as peças e o manual de instrução, os tokens são as menores pecinhas enquanto os componentes são agrupamentos de tokens. O que estou chamando de Solução Completa nesse slide diz respeito a um site, uma página de um produto ou uma funcionalidade.

Os objetivos dessa comunicação eram:

• explicar os conceitos de Design System, token e componente;
• apresentar os benefícios de usar um DS;
• falar que o projeto havia sido iniciado e que, conforme ele fosse progredindo, todo mundo receberia notícias sobre ele.

Para quem essa comunicação era endereçada:

• todas as pessoas da Passei Direto.

2. Resultados da etapa de pesquisa

Depois que todo o time estava informado sobre o projeto, foi o momento de passar detalhes específicos para alguns times que teriam contato direto e fariam uso do DS no dia a dia.

Compartilhar os resultados da pesquisa com essas pessoas estratégicas foi importante para alinhar quais pontos eram mais urgentes e deveriam ser o foco dos nossos esforços na reestruturação do DS.

A comunicação via Slack deu conta dessa etapa

Os objetivos dessa comunicação eram:

• informar sobre os resultados da pesquisa;
• informar sobre o plano de ação a partir dos resultados;
• envolver e engajar as pessoas que tinham e teriam contato direto com o DS.

Para quem essa comunicação era endereçada:

• Chapter de UX (composto de Product Designers, Content Designers, UX Researchers e lideranças);
• Squad Front Builders, responsável pelo desenvolvimento e manutenção da nova versão do DS a ser construída (composto de Product Manager, Engineering Manager, Devs, QA e DevOps, além de mim, Product Designer).

3. Naming do projeto

Em colaboração com os times de Marca e Comunicação, UX e Tecnologia fizemos uma dinâmica para batizar o DS e assim criamos uma identidade verbal para nos referir ao nosso Design System.

Logo após a decisão do nome do projeto, o Slack foi utilizado para comunicar de forma assíncrona. Verifiquei com o Marketing qual o formato visual de comunicado poderia ser usado e solicitei para o time responsável que a mensagem fosse enviada no canal oficial de comunicações da PD.

Como o nome do nosso DS é apenas para uso interno, precisei proteger essa informação no print ;)

Os objetivos dessa comunicação eram:

• informar sobre o resultado da dinâmica de naming;
• informar os motivos do nome escolhido;
• comunicar que o nome foi uma construção colaborativa;
• relembrar às pessoas que o projeto do DS estava acontecendo.

Para quem essa comunicação era endereçada:

• todas as pessoas da Passei Direto.

4. Auditoria Visual

Quando a etapa de mapeamento de todas as telas do nosso produto foi concluída, entendemos que o arquivo gerado poderia ser valioso para várias pessoas do time, até para projetos diferentes.

Mais uma vez o Slack foi escolhido para passar as informações necessárias, permitindo o consumo delas de maneira assíncrona.

Todo dia uma Fê no Slack falando sobre Design System, todo mundo que trabalha comigo sabe que é assim mesmo hahaha

Os objetivos dessa comunicação eram:

• informar que o mapeamento das telas estava disponível para todos;
• informar que o arquivo era parte do processo paras construirmos a nova versão do DS;
• abrir o arquivo para construção colaborativa;
• relembrar às pessoas que o projeto do DS estava acontecendo.

Para quem essa comunicação era endereçada:

• todas as pessoas dos times de Produto e Tecnologia.

5. Refresh sobre etapa de pesquisa

Como na Passei Direto temos o Refresh — um dia do mês dedicado ao aprendizado (saiba mais aqui nesse post da nossa maravilhosa Head de Dados, Bianca Nassif) — essa era uma ótima oportunidade de compartilhar como foi o processo de pesquisa do novo DS com todo o time.

Estruturei uma apresentação no formato de palestra com um storytelling inspirado no programa Globo Repórter, com várias perguntas que fui respondendo ao longo dos 40min que falei sobre o assunto.

Essa estratégia foi utilizada para engajar o público a receber informações sobre o DS de maneira leve, facilitando a memorização dessas informações com a ideia desse programa de TV icônico que já é parte do dia a dia e da cultura das pessoas que foram assistir a apresentação.

Slide com as perguntas que fui respondendo ao longo da apresentação

Os objetivos dessa comunicação eram:

• apresentar e incentivar o processo de pesquisa com mais autonomia para todo o time;
• apresentar os resultados da pesquisa;
• informar sobre o plano de ação a partir dos resultados;
• relembrar às pessoas que o projeto do DS estava acontecendo.

Para quem essa comunicação era endereçada:

• todas as pessoas da PD foram convidadas, mas a palestra não era obrigatória.

6. Material de Onboarding para Designers e Devs

Com a nova versão do Design System começando a ganhar notoriedade dentro da empresa, chegou o momento de estruturar um material para Product Designers e Pessoas Desenvolvedoras recém-chegadas explicando as partes mais importantes e que impactariam seu trabalho no dia a dia.

Como estávamos em um momento de transição, usando ainda os elementos antigos mas reestruturando o novo DS, o conteúdo foi cuidadosamente pensado para passar essas informações de modo a sanar dúvidas e deixar todas pessoas — tanto as veteranas do PD quanto as calouras — na mesma página.

Alguns slides do material de Onboarding para Product Designers

Os objetivos dessa comunicação eram:

• informar sobre os principais conceitos relacionados a Design System, nivelando o conhecimento sobre o assunto;
• apresentar nossas ferramentas e boas práticas;
• informar sobre papéis e responsabilidades de Product Designers e Devs no handoff de arquivos;
• informar às pessoas que o projeto do DS estava acontecendo.

Para quem essa comunicação era endereçada:

• pessoas recém-chegadas que ocupariam cargos de Product Designer ou Pessoa Desenvolvedora.

7. Página sobre a nova versão do DS no Notion

Até esse momento, eu estava utilizando uma grande documentação em formato de apresentação (o famoso PPT do Google rs), com registros minuciosos de todos os passos dados na reestruturação do DS até aqui.

Então o Rux (meu líder anjo 👼), me deu o feedback de que a documentação estava muito extensa e difícil de acompanhar, principalmente para quem só precisava acessar informações-chave do projeto. Ele estava certíssimo, mesmo com um sumário no início do PPT, essa documentação já estava com mais de 100 slides!

Assim foi o pontapé inicial para criar uma página do Notion — ferramenta já amplamente utilizada na PD para documentação de projetos — com as principais informações: um resumo de fácil acesso, organizado e vivo.

Depois de feita, essa página do Notion dedicada ao Design System foi comunicada para o Chapter de UX no nosso canal do Slack e informalmente em algumas reuniões.

A página do Notion reune documentos, links importantes, arquivos e até um mapa de todas as etapas do projeto de reestruturação do DS. Sua construção foi feita e evoluída com feedbacks dos times envolvidos 🧡

Os objetivos dessa comunicação eram:

• informar sobre a centralização das principais informações e documentos relacionados à reestruturação do Design System;
• informar que a página seria um documento vivo, sendo constantemente atualizada conforme o projeto fosse evoluindo;
• relembrar às pessoas que o projeto do DS estava acontecendo.

Para quem essa comunicação era endereçada:

• Chapter de UX (composto de Product Designers, Content Designers, UX Researchers e lideranças).

8. Atualização sobre o projeto para times específicos

Como já haviam se passado alguns meses desde a última comunicação para o time de Produto e Tecnologia, a reunião mensal dessas áreas foi o momento ideal para dar uma atualização sobre o andamento do projeto.

Para essa ocasião, preparei apenas 3 slides:

1. apresentação de contexto de forma bem direta sobre o que é DS e seus conceitos principais,
2. apresentação das etapas que foram concluídas e quais seriam as próximas,
3. apresentação da página do Notion e dos materiais de onboarding.

Usando 5 minutos dessa reunião, o time ficou informado sobre esses pontos — e eu continuei ficando nervosa para apresentar, mas já entendi que vai ser assim sempre e fiz as pazes com essa ideia.

Essa apresentação foi fundamental para dar visibilidade para os times de Produto e Tecnologia sobre as etapas de reestruturação do nosso DS

Os objetivos dessa comunicação eram:

• reforçar conceitos relacionados a Design System para constante alinhamento/nivelamento de entendimento do time;
• informar sobre as etapas que o projeto já havia percorrido e quais ainda faltavam;
• informar sobre a página do Notion sobre o projeto e sobre a existência dos materiais de onboarding para Designers e Devs;
• relembrar às pessoas que o projeto do DS estava acontecendo.

Para quem essa comunicação era endereçada:

• todas as pessoas dos times de Produto e Tecnologia.

9. Refresh sobre etapa de diagnóstico

Como o Refresh sobre a etapa de pesquisa foi muito bem recebido pelo time (chegaram várias mensagens na DM elogiando, fiquei toda boba), a ideia aqui foi repetir a mesma estratégia, mas trazendo novas informações.

Depois de dois meses do primeiro Refresh, o foco agora foi na etapa de diagnóstico, mostrando toda a fase de Auditoria Visual usando o mesmo storytelling com inspiração no Globo Repórter.

Usando storytelling e bom humor como grandes aliados, trouxe memes para comunicar com leveza, facilitar a memorização das informações e sensibilizar o time sobre o projeto do DS

Os objetivos dessa comunicação eram:

• lembrar às pessoas que já tivemos outro Refresh sobre o assunto;
• informar quais etapas a reestruturação do DS passaram
• detalhar cada uma dessas etapas, mostrando o investimento de tempo e esforço envolvido, para sensibilizar o time;
• apresentar a página do Notion e os materiais de onboarding para quem ainda não tinha visto e reforçar para quem já sabia da existência deles;
• relembrar às pessoas que o projeto do DS estava acontecendo.

Para quem essa comunicação era endereçada:

• todas as pessoas da PD foram convidadas, mas a palestra não era obrigatória.

10. Pesquisa sobre comunicações do DS

Quando comentei com uma parte do time de UX que iria escrever esse artigo, pedi para que as pessoas me dissessem o que acharam das comunicações para que esse material ficasse mais rico com as percepções delas.

Foi aí que a Nicole Bach, Product Designer de outra squad, deu a ideia de rodar um formulário com as pessoas do Chapter de UX para ter percepções mais estruturadas. A hipótese dela era que fazendo dessa forma havia uma garantia maior que as pessoas responderiam — se só deixássemos as pessoas falarem informalmente, elas poderiam não engajar ou simplesmente esquecer. Ela estava certíssima! ✨

Inclusive, ela estava tão certa e essa abordagem funcionou tanto que resolvi fazer um outro formulário, dessa vez voltado para as pessoas desenvolvedoras da PD inteira.

Mais uma vez o Slack foi o mensageiro ideal: eu mesma disparei uma mensagem no canal de UX pedindo para as pessoas preencherem o formulário (a estratégia foi fazer um form bem curto e dizer que as pessoas demorariam exatos 76 segundos para responder). Também pedi para membros do meu squad espalharem a mesma mesma mensagem no canal de engenharia e eles me ajudaram. 😃

O formulário tinha 4 perguntas de sim/não, 1 de escala, 1 de múltipla escolha e 1 aberta

Os objetivos dessa comunicação eram:

• verificar se o time estava consumindo as informações sobre o DS;
• verificar se as comunicações estavam sendo efetivas;
• receber feedbacks e insights sobre melhorias nas comunicações;
• relembrar às pessoas que o projeto do DS estava acontecendo.

Para quem essa comunicação era endereçada:

• Chapter de UX (composto de Product Designers, Content Designers, UX Researchers e lideranças);
• Pessoas desenvolvedoras da Passei Direto.

Bônus: resultado dessa pesquisa!

Imagina se eu só ia dizer que fiz essa pesquisa e não contar o que rolou de resultado dela, né? 😅

Vamos aos insights!

As pessoas agora sabem o que é DS, mas ainda ficam confusas sobre o que são tokens. Vendo esse resultado, posso planejar comunicações específicas ou aplicar melhorias em materiais que falam desse conceito.

Esse print é do formulário respondido pelo Chapter de UX, mas o formulário respondido por Devs teve exatamente a mesma distribuição de respostas

Mais pessoas desenvolvedoras têm a percepção que têm mais conhecimento sobre o Design System da PD do que as pessoas do Chapter de UX, que se sentem neutras em relação ao assunto.

Isso me diz que preciso entender o motivo dessa diferença para conseguir decidir se apenas com comunicações eu consigo equilibrar essa balança ou se preciso pensar em outras formas de trazer o Chapter de UX para mais perto do DS no dia a dia.

Diferença de percepção entre Devs e pessoas de UX sobre ter conhecimento sobre o DS

Outro insight bacana foi sobre o formato das comunicações: apresentações (seja nas reuniões mensais ou em Refresh) foram a forma mais lembrada que as pessoas disseram receber informações sobre o DS. A página do Notion e os materiais de onboarding foram os formatos menos lembrados, o que me faz pensar que o incentivo ao consumo de materiais assincronamente tem espaço para melhorias.

Por fim, quando perguntei "Você tem sugestão(ões) em relação a comunicações sobre o DS na PD?", tivemos uma resposta campeã de menções: as pessoas pediram muito um canal no Slack específico para novidades do DS! Estou estudando agora qual vai ser o melhor momento de implementar essa novidade (e como vou comunicá-la!), mas acredito que quando estivermos entregando os primeiros tokens novos esse método vai ser ótimo para deixar todo mundo a par das atualizações.

Socorro! Isso tudo???

Pois é! Planejar, executar e ouvir feedbacks sobre essas comunicações já é bastante coisa — e esse trabalho ainda foi realizado de forma paralela às questões técnicas de planejamento, pesquisa e diagnóstico. Isso sem contar todas as conversas informais que eu acabava aproveitando para falar sobre o assunto e manter o DS na cabeça da galera (tipo mensagem subliminar da Jequiti 🤣).

Mas, sem dúvidas, a estratégia de comunicação foi parte absolutamente essencial para a reestruturação do nosso Design System.

Para as próximas etapas, depois que os primeiros tokens e componentes novos forem sendo desenvolvidos e liberados para uso, estamos planejando outros tipos de comunicação: newsletter, vídeos pré-gravados com informações sobre processos, canal de novidades sobre o DS no Slack e mais outras ações que ainda estão sendo pensadas, estudadas, planejadas...

O importante é continuar reforçando com o time a importância do DS para que todos o utilizem e sejam multiplicadores desse conhecimento dentro da PD.

O fim? Ou seria o começo?

Esse quarto post marca o fim dessa série de publicações sobre toda a etapa inicial de planejamento da nova versão do Design System da Passei Direto.

Foi bem bacana pensar em como compartilhar tanto aprendizado que rolou nesses meses de organização e ler/ouvir o feedback de todo mundo que consumiu esse conteúdo e deu a maior força para que eu continuasse a escrever (obrigada, vocês são uns amores 💖).

Agora entramos na etapa de desenho da nova versão do DS e, em seguida, teremos os desafios de implementação. Sem dúvidas, com muito mais aprendizado e colaboração pelo caminho! Tanto que talvez rendam mais publicações no futuro. Será? 😉