Product Case: Padronizando e-mails corporativos de forma elegante

Você pode até definir um Styleguide, mas como designer não basta entregar um documento com boas práticas, é preciso ir além! Assim, todos vão contribuir pela consistência.

Ta com pressa? Acessa o repositório open source deste projeto no Github, aplique onde você trabalha e conta pra gente o resultado. ❤️

Gerador de e-mail desenvolvido para este case, utilizado na Equals.

Quando entrei na Equals, dentre todos os desafios, enxerguei a possibilidade de fortalecer alguns processos de Design que já estavam sendo trabalhados, todos em boas mãos, mas que não atingiam organicamente todas as equipes.

Após alguns meses de contextualização, iniciei o estudo de um dos diversos projetos que tive o prazer de participar aqui, e quero compartilhar com vocês os aprendizados de um deles em particular.

É extremamente comum que dentro de uma mesma empresa existam várias formas de se comunicar visualmente. Como designer, muito provável que você, com um olhar crítico, note com maior facilidade a incosistência em apresentações de power point / keynote, documentos, manuais e, principalmente, e-mails enviados para clientes e colaboradores.

Nesse projeto, decidi focar no último dos itens. Confira o processo de desenvolvimento da solução que encontrei.


Entendendo a origem do problema

Assim que notei a quantidade de layouts e estilos utilizados nos e-mails do dia-a-dia, organizei minha agenda para conversar com as pessoas que mais usavam esse meio de comunicação.

Percebi que a maior fonte vinha de pontos focais em equipes que precisam dar um follow up para o resto da companhia sobre algum acontecimento importante, como: release notes, avisos, convocações, além dos contatos diretos com clientes.

Sendo assim, duas variáveis já conhecidas neste fluxo se mostraram ainda mais fortes para começar a trabalhar em um padrão:

  • Equipe autora do e-mail;
  • Assunto de rotina que era tratado em frequências similares;

Pensando em soluções

Coletei os nomes destas equipes, juntamente com os motivos citados acima e documentei as relações para, em breve, criar cabeçalhos personalizados e imagens de auxílio que seguiam o guideline da marca. Veja abaixo:

Exemplo de cabeçalho criado para a equipe de pessoas
Exemplo de Imagem criada para que equipes distintas possam utilizar combinando com o cabeçalho

Uma vez que os primeiros modelos foram criados, os armazenei em nosso repositório S3 da Amazon para que pudessem ser exibidos e utilizados de qualquer lugar, centralizando a origem dos assets e acabando com o problema de versionamento e obsolescência, atualizando até mesmo os e-mails que já haviam sido disparados.

Também hospedei o nosso rodapé e alguns outros assets que eram utilizados no corpo do e-mail.

Feito isso, disponibilizei uma wiki com todos os arquivos e links necessários para uso.

Uma parte dos assets utilizados, suas origens e motivos, além da url global hospedada na S3.

Agora que os assets estavam prontos, faltava criar um template HTML compatível com todos os navegadores e clientes de e-mail — Outlook é um pesadelo essa hora. Então, após alguns testes e validações em equipe, chegamos a uma versão que agradou bastante a todos.

Exemplo de E-mail utilizado no Raio-X, produto Equals & Stone Co

E agora, como usar?

Desenvolver todo esse material não foi o suficiente, pois é inviável achar que todos vão alterar o HTML padrão e buscar as imagens necessárias na wiki toda vez que surgir a necessidade de enviar um e-mail.

Obviamente, não funcionou! A complexidade de uso impede a aderência.

Dessa forma, mapeei o fluxo de ações para essas modificações, validei com quem estava ao meu redor e aproveitei a experiência como desenvolvedor front-end produzir uma solução sem onerar o tempo de desenvolvedores.

Reitero, saber desenvolver me ajuda em 100% das soluções que participo, seja no raciocínio lógico ou na autonomia de conseguir validar hipóteses de forma funcional sem precisar alocar o time de engenharia.

Assim, procurei diversas ferramentas que me ajudariam a otimizar o tempo e desenvolvi um gerador de e-mails que facilitava todo o processo de customização e escrita, enquanto se baseava no template HTML. E o melhor, preservando o styleguide!


Hora de testar!

Uma vez que a aplicação estava pronta, integrei o analytics e mapeei todos os eventos que eu pretendia validar, como: interações na interface em alteração de título, troca de imagem, habilitação de botão e afins.

Ao finalizar toda integração com o analytics, colocamos o app em produção e compartilhamos com as equipes!

A partir daí, passei a monitorar o dashboard do analytics para entender o comportamento dos usuários e os resultados, ao longo do tempo foram fantásticos:

Os dados abaixo foram coletados entre Junho de 2018 — Abril de 2019
Totalizadores diversos referentes aos acessos
Eventos que mapeei
Fluxo de eventos

Acompanhando todos estes dados, pude evoluir a plataforma e chegar a um número muito positivo: A quantidade média de eventos por sessão era a quantidade de eventos disponíveis.

Ou seja, a ferramenta, após muitas melhorias, se tornou extremamente eficiente ao ponto de não ter features desnecessárias e resolver o problema de quase todos os usuários com a mesma jornada, de forma rápida e prática.

Média de eventos por sessão

O processo deste produto foi tão positivo que até hoje gera bons frutos e inspira boas ações por aqui. Veja alguns dos comentários que coletei:

“Não vivo mais sem! ❤️”.
“Oiii, tudo bem? Ameiiii o gerador de e-mail”.
“Adorei! muito melhor ter coisinhas padronizadas”.
“Nossa experiencia com ele é boa. Ele é bem simples e fácil de usar!”.

Utilize você também :)

Pensando nisso, adaptei a ferramenta para um cenário genérico e disponibilizei o código aberto no Github. Se tiver o interesse de entender como ela funciona, ou até mesmo usar com sua equipe, fique a vontade!

Gif exemplificando o uso da ferramenta

Espero ter ajudado de alguma forma e, caso utilize o gerador de e-mail, conte pra nós como foi 😉

Abraços e até a próxima!
Stéfano Girardelli.