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. ❤️


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:

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.

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.

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

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.

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!


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.

Equals Lab

Experimentando e compartilhando conhecimento!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store