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.
