O desafio dos e-mails não lidos: como criamos uma solução para melhorar a comunicação com consultores
Published: 2021-11-17 12:37:19

Você tem muitos e-mails não lidos na sua caixa de entrada? E quanto às mensagens SMS, você abre aquelas que recebe? Melhor nem mencionar os grupos de WhatsApp cheios de "bom dia" então!

Vamos ser sinceros, sem medo de julgamento... Diariamente cada um de nós recebe tanta comunicação que fica difícil acompanhar tudo. Em meio às promoções de eletrodomésticos, lembretes para eventos online e boletos a serem pagos, alguma coisa sempre acaba se perdendo por ali. Acontece, não é mesmo?

E foi diante desse "caos da comunicação" que, aqui na SumUp, nos vimos com um desafio bastante complexo de resolver: **como fazer os consultores de vendas lerem as nossas comunicações** e ficarem a par das novas regras, campanhas e novidades?

Unimos esforços dos times de Comunicação em Vendas e Engenharia & Produto para criar do zero uma solução interna, customizada para atender às necessidades do programa e 100% dedicada a esse público.

##**O programa de consultores da SumUp**
Embora hoje a SumUp seja uma empresa que oferece diversos produtos financeiros, entre eles a conta digital, o cartão de crédito e o link de pagamentos, no passado nosso único produto era a maquininha de cartão sem aluguel.

Além de vender maquininhas por meio do seu **[site oficial](https://sumup.com.br/)**, já havia também uma iniciativa de "referrals" — no qual os atuais clientes da SumUp podem recomendar o produto para amigos e receber um bônus por cada indicação convertida em compra.

Ainda assim, havia uma grande oportunidade para crescer a força de vendas de forma presencial por meio de representantes de vendas espalhados por todo o país. Foi assim que o **programa de consultores da SumUp teve início em 2017**.

Quase quatro anos depois, nosso programa hoje conta com mais de 16 mil consultores atuando na maior parte dos estados brasileiros, sendo responsável por trazer quase um terço dos novos clientes da SumUp. Conforme o programa ia crescendo e se consolidando ao longo dos anos, percebemos a importância de **construir e oferecer uma plataforma online** que concentrasse todos os relatórios e ferramentas úteis para o dia a dia desse consultor ou consultora.

##**O Portal dos Consultores é oficialmente lançado**
Com o objetivo de centralizar dados sobre as vendas mensais dos consultores em tempo real, além de oferecer uma lojinha interna para que todos pudessem repor seu estoque de maquininhas, o **[Portal dos Consultores] (https://parceiros.sumup.com.br/pt-br/create-account/)** foi ao ar no final de 2018.

Ele começou como uma aplicação dedicada somente aos representantes de venda do Brasil, mas hoje já pode ser utilizado também por parceiros localizados em países como França, Alemanha, Itália e Reino Unido.

De lá para cá, diversas outras ferramentas, relatórios e recursos foram adicionados ao Portal — desde o fluxo de signup (criação de conta) para novos consultores, relatórios de gerenciamento de estoque e de clientes, e até mesmo uma central de notificações.

E é sobre essa **ferramenta de comunicação** que eu quero abordar e compartilhar nossos esforços e aprendizados! Da ideação e design de interface ao desenvolvimento do código no front-end no back-end, cada decisão de produto foi pensada em conjunto por profissionais de comunicação, produto e engenharia de software para chegarmos à solução ideal para os nossos consultores.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtvw53gg4um60dafew7w.PNG)
*Essa é a carinha do Portal dos Consultores hoje, depois de diversas atualizações e melhorias*

##**Uma Central de Notificações para o Portal**
Em meados de abril do ano passado, o squad de Partners Engagement — do qual faço parte e é responsável por criar estratégias e ferramentas para ajudar os consultores a aumentarem sua produtividade em termos de vendas — e o time de Comunicação deram início a uma força-tarefa para, juntos, atingirem um objetivo em comum: **entender quais as dores dos consultores em termos de comunicação e desenvolver uma solução capaz de resolver esse problema.**

Nosso primeiro passo diante do desafio foi, de fato, mapear quais dores e incômodos seriam esses. Optamos por rodar uma sessão inspirada no **design sprint**, uma metodologia voltada à prototipagem de produtos e soluções. Em geral, a prática sugere que sejam percorridas as cinco etapas de (1) entendimento/definição, (2) divergência, (3) decisão, (4) prototipagem e (5) validação de uma solução.

Nosso time, no entanto, permitiu-se uma "licença poética". Inicialmente, iríamos focar a task force nas três primeiras etapas dela, sem necessariamente já rascunhar protótipos ou soluções.

O objetivo era, portanto, **definir muito bem o nosso problema**. Isso porque, a depender do desfecho da nossa conversa, poderíamos então pesquisar ferramentas já existentes no mercado e adicioná-las à lista de alternativas para atacar o desafio de comunicação com consultores, quem sabe até mesmo integrando uma delas ao Portal dos Consultores.

##**Definindo o problema a ser resolvido**
Uma vez que estávamos todos trabalhando remotamente na época, decidimos usar como ferramenta o **Miro** — um whiteboard online (literalmente, uma grande tela em branco, como uma lousa) onde times podem colaborar na construção de diagramas e até mesmo realizar brainstormings de ideias com post-its coloridos. Foi nesse segundo ponto em que focamos, aliás.

Em conjunto, levantamos uma série de dificuldades vividas pelo time de Comunicação ao tentar transmitir mensagens aos consultores de vendas. Vale lembrar que, até o lançamento da nossa Central de Notificações, ferramentas mais comuns já vinham sendo utilizadas para fornecer conteúdo a esse público: e-mails, newsletters, grupos de WhatsApp, mensagens de SMS, etc.

Basicamente, as comunicações se encontravam "esparramadas" em diversos canais diferentes e era complicado trackear quem visualizou ou não cada uma delas. Isso sem contar a dificuldade que o consultor tinha de recuperar um comunicado mais antigo — o e-mail se perdia, o SMS era apagado, o histórico do WhatsApp era muito extenso e complexo de se acessar.

De forma bastante resumida, listamos as seguintes dores:

- Como centralizar os muitos tipos de comunicação num único lugar? 
- Como medir a efetividade da comunicação?
- Como armazenar o histórico de comunicações enviadas?
- Como compartilhar e reunir materiais de trade marketing?
- Como segmentar/personalizar os comunicados para cada consultor conforme seu nível no programa?
- Como automatizar nossos envios e ter uma régua de comunicação?
- Como engajar o consultor a querer vender mais e subir de nível para receber um bônus maior?

Uma vez que o nosso design sprint tinha como objetivo convergir em um problema com escopo um pouco mais específico e fechado, filtramos entre as dores os seguintes focos: **centralizar comunicações, mensurar acessos e armazenar histórico.** O que já é bastante coisa para se resolver a partir de um único MVP — do inglês, um produto viável mínimo, ou seja, uma versão inicial, mas que já entrega valor ao usuário.

##**A solução que implementamos no Portal**
Quando tivemos de decidir que tipo de solução poderia ser implementada, começamos a pensar se valeria a pena ter uma ferramenta desenvolvida de ponta a ponta pelo nosso squad de Partners Engagement (do front-end ao back-end), se poderíamos encontrar uma solução pronta (dentro ou fora da SumUp) a ser integrada ao Portal dos Consultores, ou mesmo se queríamos contratar um serviço externo, já existente e consolidado no mercado.

Depois de analisar diversos prós e contras, nosso time optou por criar do zero uma Central de Notificações dentro do Portal, desde o design até o código front-end e back-end que seriam voltados para a solução.

Não optamos por utilizar uma ferramenta externa e pronta porque, uma vez que esse era um MVP ainda a ser testado com os consultores, poderíamos nos comprometer com a contratação de uma empresa terceirizada e investir dinheiro em uma ideia que não traria retorno. Este seria um risco que optamos por não correr naquela época, pois seria melhor ter certeza da adesão dos usuários e da eficácia da plataforma em termos de resolver o nosso problema. Além disso, significaria **mais uma** ferramenta que o consultor precisaria acessar em adição às demais — e-mail, SMS, WhatsApp e o próprio Portal dos Consultores.

Também descartamos a ideia de integrar o Portal a outra solução como, por exemplo, o Salesforce (sistema de gestão de relacionamento com o cliente) ou Contentful (sistema de gestão de conteúdo). Embora ambas já sejam utilizadas em outras situações pela SumUp, a integração com o portal levaria mais tempo do que o desejado por nós.

Então, quando chegou a hora de colocar a mão na massa para criar nossa própria Central de Notificações, o que usamos? 

No back-end, utilizamos a **[linguagem Go] (https://golang.org/)** para criar um microsserviço voltado à Central. Foram desenvolvidos quatro endpoints, dedicados às seguintes requisições:

- [GET] Devolver a lista completa de mensagens disponíveis ao consultor;
- [GET] Devolver uma mensagem específica para leitura — o que ajudaria em performance, já que cada comunicado é um grande arquivo HTML/CSS e seria pesado já trazer todos eles de uma única vez no carregamento inicial da página;
- [PUT] Atualizar o status de uma mensagem específica para **is_read: true** no banco de dados quando ela é clicada na listagem;
- [POST] Permitir o upload de novos arquivos HTML/CSS diretamente no banco de dados, assim o time de Comunicação passaria a ter autonomia para subir novas mensagens sempre que quisesse.

No front-end, o Portal já vinha sendo desenvolvido em **[JavaScript/TypeScript] (https://www.typescriptlang.org/)** e **[React] (https://pt-br.reactjs.org/)**, além de utilizar **[GraphQL] (https://graphql.org/)** e **[Apollo Client] (https://www.apollographql.com/docs/react/)** para conectar interface e APIs. Vale destacar algumas especificidades da Central durante o seu desenvolvimento:

- O conteúdo das mensagens mostradas na tela chegam sempre em formato HTML com base em um template de e-mail marketing já utilizado/reaproveitado pelo time de Comunicação — se fazendo necessário importar todo o estilo CSS padrão para garantirmos que nada quebrasse visualmente;
- Queríamos uma notificação vermelhinha que sempre aparecesse ao lado do item de menu "Notificações" quando uma mensagem nova chegasse até que ela fosse lida. Antes de finalmente decidir estilizar, colorindo-a de vermelho, arredondando com **border-radius: 50%** e definindo sua localização na tela com **position: absolute**, quase cogitamos usar um emoji de cereja! (🍒);
- Quando implementamos a diferenciação de estilos para mensagens lidas e não lidas, o estilo só mudava após um refresh na página — o que seria péssimo, pois queríamos a mudança acontecendo no exato milissegundo do clique. Descobrimos que, se o endpoint do [PUT] devolvesse na sua resposta também o id da mensagem, o **[Apollo Client atualizaria os dados em cache] (https://www.apollographql.com/docs/react/v2/data/mutations/#updating-a-single-existing-entity)** e o React se encarregaria de resolver o restante 🙏 (no caso, passando tudo para um tom mais acinzentado).

Vale mencionar que a Central de Notificações foi lançada em duas grandes ondas, como todo bom MVP que vai sendo iterado com o objetivo de permitir entregas de valor mais rápidas e melhorias constantes.

A primeira entrega liberada para os consultores ainda não contava com a possibilidade de chamar o endpoint de [PUT] para diferenciar visualmente mensagens lidas de não lidas, nem enviava eventos de cliques ao Google Analytics. Ela estava focada na visualização da lista de mensagens, na possibilidade de clicar em cada uma para ler o conteúdo HTML completo e na "cerejinha" visível no menu do Portal chamando a atenção do usuário sempre que houvesse uma ou mais mensagens não lidas.

Por fim, o endpoint de [POST] também foi liberado — porém disponível somente ao nosso time interno, por meio de uma VPN — para que a adição de novos conteúdos fosse algo simples, rápido e sem qualquer burocracia ou dependência.

Já na segunda entrega, conseguimos implementar estilos diferentes para que ficasse mais fácil de o usuário perceber o que já havia sido lido ou não. Também passamos a trackear acessos à página da Central e também os cliques por  mensagem, comparando o desempenho da nova ferramenta em relação a outras anteriormente usadas pelo time de Comunicação.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f72vct5086nvc9z3sg73.PNG)
*Esboço da Central de Notificações adicionada ao Portal dos Consultores*

Após um mês no ar, as mensagens publicadas já atingiam uma taxa de abertura de 51% para novos consultores — o maior open rate que uma ferramenta dedicada ao público já chegou aqui na SumUp, uma vez que o recorde era de cerca de 32% antes da Central de Notificações.

Além disso, no acumulado de junho de 2020 a setembro deste ano, os eventos de clique do Google Analytics relacionados à Central de Notificações figuram entre os 10 mais frequentes de todo o Portal. Também, convenhamos, ninguém resiste a uma "cerejinha" vermelha chamando a atenção no menu!

Por: Ceci Sousa
_______________________

Quer uma nova oportunidade de carreira com desafios globais? Confira nossas vagas em Engenharia e Produto e conheça mais sobre a SumUp: https://go.sumup.com.br/eb-dev-to-vagas