Criando o dashboard de métricas do Annecy, Design System do Banco Carrefour

Como construímos na visão dos times de UX e Martech

O objetivo deste artigo é compartilhar como foi a estruturação da primeira versão do nosso painel de métricas de uso dos elementos do Annecy, nosso Design System, deixando visível algumas informações relevantes sobre a adoção efetiva dos componentes já desenvolvidos no código.

Planejamento inicial e ideias em mente

Começamos a planejar o nosso dashboard antes mesmo da biblioteca do Annecy Design System estar disponível para todas as pessoas desenvolvedoras consumirem, pois era uma iniciativa estratégica mapeada dentro do nosso roadmap (planejamento do ano), por conta das métricas de uso e adoção.

Após realizarmos alguns benchmarkings e também contando com a experiência de algumas pessoas do time de Design Ops (time no qual o produto Design System está dentro), começamos a colocar as ideias e dúvidas em um painel da ferramenta Miro, destacando os 3 tópicos principais:

1. Adoção da biblioteca de código: Quais equipes estão utilizando? Quais são as porcentagens de uso? Quais marcas (atualmente temos Carrefour e Atacadão) estão utilizando mais componentes?
2. Utilização dos componentes: Quais os componentes mais e menos utilizados pelos times, marcas e fluxos? Quais componentes são mais visualizados pelos clientes? Quais páginas estão utilizando os componentes?
3. Performance dos componentes: Qual é a performance dos componentes aplicado nas páginas, há alguma melhora no carregamento? É possível comparar de forma automática o antes e depois com os componentes?

Visual dos componentes em ambas as marcas (Carrefour e Atacadão).

Além dos 3 tópicos já citados, criamos também uma coluna “É possível?” para adicionar ideias que seriam legais de termos, mas que poderiam ficar para uma futura evolução, como exemplo:

• Comparativo entre o número total de elementos da tela (com e sem Annecy) para gerar a porcentagem de cobertura de uso por tela ou até mesmo por fluxo.
• Possibilidade de metrificar tópicos de acessibilidade.
• Mensurar o uso do grid e design tokens (variáveis de estilos).
• Mensurar o uso de ícones e ilustrações da biblioteca do Annecy.
• Alertas destacando as tribos e squads que menos estariam usando os componentes das bibliotecas de desenvolvimento, para traçarmos um plano de ação de engajamento.

Bloco de notas com ideias iniciais no quadro da ferramenta Miro.

Lembrando sempre que o objetivo de todas estas informações é ter uma visão simples, objetiva e rápida do status atual do uso do nosso Design System, para que possamos fazer um plano de ação e também atuar naquilo que é mais prioritário de acordo com nossos objetivos.

Tagueamento e captura das informações

Após termos algo mais sólido e claro do que de fato gostaríamos em nosso painel de métricas, começamos a ter papos semanais com o time de Martech, que tem como uma de suas responsabilidades fazer a magia de capturar e disponibilizar estas informações de forma simples e fácil para o nosso dashboard.

Martech: Marketing com Tecnologia. É a área estratégica responsável pela governança dos dados comportamentais, com atuação entre as necessidades de negócio e ferramental tecnológico disponível.

Leia mais sobre Martech:

Martech é pop! Quatro reflexões fundamentais para encarar o mundo da tecnologia para o marketing

Com o avançar dos papos, entendemos melhor como o time realizava o tagueamento de todas as páginas e componentes dos produtos digitais do Banco Carrefour. Através do endereço da página, conseguimos visualizar quantos e quais componentes estão sendo utilizados por página, inclusive em cada marca (Carrefour e Atacadão).

Mapa de coleta para tagueamento.

No avançar do entendimento, mostramos como escrevíamos os nomes de nossos componentes. Isso também auxiliou e facilitou nesta rastreabilidade e consequentemente na captura da informação, pois todos possuem um prefixo, como exemplo: annecy-form-field e annecy-button.

Trecho de código do componente de formulário.

Wireframe do dashboard

A próxima etapa foi de cocriar e materializar melhor como seria a arquitetura de informação de tudo o que foi solicitado, para que o time de Martech pudesse iniciar os estudos em uma visão inicial, porém, já próxima do que estávamos esperando.

Proposta de wireframe do dashboard de métricas.

O que entregamos na primeira versão 🎉

Depois de 2 meses da primeira conversa, tivemos a nossa primeira versão do dashboard com as seguintes informações:

Dashboard de métricas do Annecy Design System (Visão da marca Atacadão).

• Navegação por marca (Carrefour e Atacadão).
• Navegação por página, componente e período.
• Total de componentes utilizados por marca (em todos os fluxos).
• Componentes mais e menos utilizados por marca.
• Visão do uso dos componentes por página (quantidade).
• Visão dos componentes mais exibidos para os clientes (exemplo: Um componente pode ser o mais utilizado entre todas as páginas do fluxo, porém, podem ter telas que os clientes não acessam com frequência, como as telas de erro, o que pode fazer um outro componente ser o mais visualizado por estar em páginas mais acessadas, como exemplo a página inicial do aplicativo ou site).
• Evolução do uso dos componentes ao longo do tempo.

Visão do time de Martech

Por Raphael Silva Amaral Botelho

Foi um desafio interessante. Desde o início tivemos que entender como seguir criando do zero uma lógica de coleta com alguns desafios, dentre eles a necessidade de não sobrecarregar o Google Analytics, e ainda assim trazendo todos os dados necessários para ter uma noção real do uso dos elementos no banco. Fizemos uma coleta por amostragem, a qual um cliente é aleatoriamente selecionado para ser “monitorado”, e ao longo do fluxo avaliamos a existência de elementos Annecy dentro das páginas visitadas, o que vimos que era o necessário para este mapeamento.

Com isso conseguimos visualizar a evolução ao longo do tempo, entender as páginas que mais possuem elementos (e as que menos possuem), quais elementos mais estão presentes nas nossas páginas e quais mais se repetem, os que mais acabam sendo exibidos para os clientes por estarem em páginas com mais acessos e uma diversidade de outros dados que nos ajudam a entender se estamos caminhando da melhor maneira ou não.

Agora o time de Design Ops consegue entender quais são os times que eles precisam entrar em contato para solicitar uma maior aderência à utilização dos componentes!

Próximos passos e agradecimentos 💙

Neste exato momento, fevereiro de 2022, temos 5 meses de dados analisados desde quando implementamos o nosso dashboard. Isso tem nos ajudado nesta visão de evolução do uso do nosso Design System, e já estamos conversando sobre a segunda versão e evolução do nosso painel de métricas.

É legal destacar que não levamos em consideração somente este dashboard de métricas para atuar ou fazer alguma mudança. A pesquisa de satisfação que temos feito desde o segundo trimestre de 2021 também nos apoia com informações relevantes e complementares. Com isso, cruzamos os dados de ambas para ter uma clareza melhor dos pontos de melhoria e entender determinados comportamentos.

A segunda versão do painel e a Pesquisa de Satisfação do Annecy Design System também serão temas de artigos no decorrer deste ano, aguardem! ✨

O nosso painel de métricas foi construído e cocriado por muitas pessoas, que fizeram parte do nosso time em 2021: Paula Völker, Marianna Piacesi, Levi Alves, Bruno de Oliveira, Joyce Marques, Raphael Silva, Pedro Paiva e time de Martech. Obrigado pessoal! 💙

Obrigado por chegar até aqui, este foi um pouquinho da nossa trajetória na construção do nosso lindo dashboard de métricas!

Agora uma opinião: o que achou do artigo? Ficou com alguma dúvida ou quer saber mais sobre alguma etapa do processo?

Deixe um comentário e vamos conversar! ✌️

Leia nossos outros artigos de Design Ops:

Construindo a Claire: a guia de redação do Banco Carrefour

Manual de Comunicação Inclusiva do Banco Carrefour: motivações, processo e desafios