Design e criação em email marketing passo-a-passo
Esta matéria apresenta um caso prático de desenvolvimento de peças de email marketing, como realizado pelo e-commerce Gimba.com em 2007 e 2008.
O desafio neste caso é diferente de muitos trabalhos de design, pois não se trata de uma peça meramente estética. O email marketing é uma peça singular, que carrega em si conceitos e funções. A comunicação acontece em tempo real e o cliente em potencial está a um clique da empresa ou, mais que isso, do próprio produto.
É uma responsabilidade criar peças de email marketing de maneira inteligente, pois podem representar boa parte do faturamento de uma grande loja virtual, de maneira direta ou indireta, quando apresenta o site, seus produtos e serviços ao cliente.
Campanha em 2007
Foi necessário determinar a hierarquia do email e apresentá-la cognitivamente ao usuário. Fazer inúmeras versões de organização prejudicaria a navegação intuitiva.
Uma dica essencial para designers metidos a auto-suficientes: saber ouvir. Obviamente as decisões não foram tomadas somente por mim, pois sempre tivemos excelentes profissionais no e-commerce do Gimba.com. A parceria com aqueles que vieram antes de mim e detinham o conhecimento de como a empresa e um site deste porte funcionam só acrescentou qualidades ao meu trabalho.
Sendo assim, juntos definimos a hierarquia dessa primeira versão e coube a mim tornar o projeto real.
Existem duas hierarquias a serem definidas.
- 1. A do próprio email marketing;
- 2. A do box do produto.
E assim foi desenvolvido:
Hierarquia do email marketing
Convencionamos que todas as peças teriam o seguinte formato.
1. TOPO
Dividido em três partes por discretas linhas verticais para dar a exata sensação desta hierarquia. Suprimir as linhas, por mais discretas que sejam, deixaria as informações embaralhadas, forçando um desgaste mental, mesmo que mínimo por parte do usuário e tudo que será desenvolvido partirá desta premissa.
1.1 Esquerda
Logo da Loja Virtual.
1.2 Centro
Busca no site, onde o usuário pode encontrar qualquer produto do site Gimba.com a partir do email.
1.3 Direita
Gimplus – Programa de fidelidade do Gimba.com
Telefone do atendimento ao cliente
..2. DEPARTAMENTOS
Todos os departamentos do site, como se o cliente nele estivesse.
.
.3. SAUDAÇÃO
Texto de saudação, resumindo de maneira objetiva o conteúdo do email.
Foi inserido ao redor dele um discreto contorno cinza, para dar a sensação de organização. Diferente do modelo 2006, no qual o texto ficava jogado, sem acabamento.
.
.
4. BANNER PRINCIPAL
Arte relacionada ao produto ou conceito em destaque e com cor que transmita uma ambientação com o conceito.
.
.
5. PRODUTOS
2 linhas com 3 produtos em cada uma delas.
.
.
6. ESPECIFICAÇÕES TÉCNICAS
Dados relevantes como a duração da promoção do email, condições, exceções etc. Também com a borda cinza que dá a noção de acabamento e organização visual.
.
.
.
HIERARQUIA DO BOX DO PRODUTO
BOX
Separar o produto em discretas caixas não se trata apenas de acabamento. Essa prática cria uma organização visual instantânea e intuitiva para que o cliente compreenda melhor o conteúdo de cada produto, sem misturar ou se confundir com tantas informações. Parece um conceito simples e de fato é, mas, note a diferença:
.
.
Repare outros modelos de disposição de produtos em Email Marketing sem a utilização de algo que dê senso de organização aos itens e pode causar desconforto ou confusão ao cliente:
.
e
.
.
Segue a organização do box:
1 TÍTULO
Esta é uma diferença que parece insignificante, mas é de fundamental importância para o cliente identificar imediatamente o que é o produto, visto que as fotos nem sempre são suficientes. Colocar primeiramente a foto e depois o que é o produto praticamente misturado com suas especificações prejudica a identificação instantânea do que é cada produto.
.
.
Repare a diferença de identificação imediata do que se trata o produto, sem o texto, o tempo que o cliente demora para identificar as imagens de alguns produtos.
.
.
2. IMAGEM
É recomendável que as imagens sejam mais que atraentes e mostrem detalhes que possam ser decisivos no impulso da compra. É também verdade que nem sempre é possível conseguir as imagens assim, visto que estas são enviadas de cada fornecedor e, na habitual correria do dia-a-dia, é praticamente impossível monitorar todas uma a uma.
.
3. INFORMAÇÕES TÉCNICAS
Agora que o cliente já assimilou instantaneamente o que o produto é, chegamos ao momento adequado para informá-lo dos seus respectivos atributos. São eles marca, versão, qualidade, quantidade e toda e qualquer informação que o defina e o diferencie de seus similares.
.
4. DESCRIÇÃO
Este é um espaço que qualifica e agrega valor ao produto. Uma descrição com retórica explicativa, atrativa e vendedora é uma maneira de tornar a experiência do cliente mais estreita e aproximá-lo da compra.
.
5. PREÇO
A disposição dos preços é uma célula à parte em toda a composição do email, visto que a organização, além de ser feita internamente neste box, também é realizada com os boxes vizinhos, tornando o layout limpo e organizado.
Aparentemente, esta prática pode parecer preciosismo de designer, mas não é. A função do designer é transformar conteúdo em produto de consumo e uma peça totalmente organizada e limpa visualmente faz com que o inconsciente do usuário trabalhe menos e a sua concentração resuma-se a aproveitar o conteúdo de maneira simples e objetiva.
Assim, a ordem dos valores seria sempre:
. De
. Por
. Economize
. (respiro)
. Parcelamento
A fonte escolhida para “de” e “economize” são pequenas, visto que são informações hierarquicamente inferiores à por e ao parcelamento que também têm tamanho idêntico entre si. As cores do valor de “por” e do valor de “parcelamento” também são iguais, criando no inconsciente do cliente uma sensação de equivalência. O respiro entre o “De/Por/Economize” e o“parcelamento” é para distinguir e individualizar que informação está conexa.“De/Por/Economize” é um bloco de informações que se completam e o“parcelamento” é outro bloco de informação.
Cabe também salientar que quando uma das informações é suprimida, ou seja, não existe “De/Por/Economize” ou o “parcelamento” a informação é excluída, mas nada entra em seu lugar, deixando seu espaço vago. Em princípio pode parecer desperdício de espaço ou que o vazio pode incomodar o usuário, mas ao colocar as informações lado a lado, compreende-se imediatamente a sensação de integração e organização cognitiva que essa ação transmite.
.
.
6. BARRA GIMPLUS
Como mencionado anteriormente, o Gimba.com possui um programa de fidelidade e a barra Gimplus informa o número de pontos que o cliente ganha na aquisição de cada produto.
7. OUTROS ELEMENTOS
7.1 Cor
As cores do Título, Informações Técnicas, valor/Por, valor/Parcelamento e Barra Gimplus são sempre as mesmas do banner principal.
É importante que o usuário identifique cada email como único. Para isso, usamos o mesmo padrão de organização, mas com cores diferentes. Como os emails são enviados com freqüência, é interessante que um email não se confunda com outro, pois as promoções anunciadas duram 7 dias, e fica mais fácil para o cliente encontrar um produto que viu dias antes, perdendo o mínimo de tempo.
A cor da fonte dos textos longos passou de preto para cinza escuro. Branco e preto é o maior contraste possível e minimizando esse alto contraste na leitura, minimizamos também a possibilidade de desconforto na leitura.
.
.
7.2 Linhas Horizontais
As linhas horizontais separam os micro-blocos de informação dentro do box do produto, sempre com a intenção de tornar a organização clara para o usuário.
7.3 Selo FRETE GRÁTIS
Anteriormente, quando um produto apresentava Frete Grátis, era meramente adicionado um texto tímido com essa inscrição. Como este é um predicado muito atrativo para pessoas que compram online, imaginei que essa informação merecia mais destaque. Contudo, não poderíamos nos contentar em colocar essa informação maior e posicionada, em cada envio, de maneira diferente. Foi criado então um selo padronizado, sempre colocado no mesmo lugar: canto superior direito do box. Caso apareça o selo no canto superior direito, o usuário habitual já entende que se trata de Frete Grátis e quando não está posicionado ali, entende automaticamente que não.
Não sendo mais necessário ler o termo frete grátis.
7.4 PROMOÇÕES EVENTUAIS
Uma linha com a arte de alguma promoção eventual do site.
.
.
EMAILS ESPECIAIS
1 TERÇA É NA GIMBA.COM
Todas as terças-feiras havia no site um produto com preço muito bom e essa informação era enviada à nossa base de clientes cadastrados. Porém, ainda era de pouco impacto. A terça-feira era especial e o email, apesar de respeitar os conceitos mencionados acima, deveria passar este conceito de se tratar de uma promoção única, ímpar, diferente.
Como todos os banners de TERÇA É NA GIMBA.COM eram amarelos:
Optamos por deixar o email todo amarelo. No início, parecem cores muito fortes, mas este era justamente o conceito. O inconsciente do cliente ligaria o surgimento de um email todo amarelo, com a barra vermelha e os dizeres Terça Feira é na Gimba.com e www.gimba.com, a uma promoção realmente especial.
.
.
2. TEMÁTICOS
Tinham como objetivo destacar um departamento, conceito ou promoção do site.
.
.
.
.EMAIL MKT – GIMBA.COM – versão 2008
Os emails foram um sucesso, trazendo inegável retorno financeiro e de branding para a empresa. Contudo, com a virada do ano, vem a necessidade de mudança. A internet não permite erros, tampouco inércia, dada sua dinâmica.
Todavia, a mudança pela mudança não era suficiente. Toda a equipe sempre quer mais e, mais uma vez, os profissionais envolvidos no processo chegaram às soluções relevantes que mantivessem para cima a curva de qualidade das nossas peças de email marketing.
.
.
As soluções levantadas foram as seguintes:
– Sintetizar ao máximo o tamanho vertical do email, para que os usuários tomassem contato com os produtos com o mínimo de rolagem possível.
– Cores mais vivas, para que, além da questão estética, os fatores identificação e ambientação do email fossem ainda mais relevantes.
– Ainda mais inteligência na exposição dos preços.
– Apresentação randômica de serviços do site.
O email foi desenvolvido da seguinte forma:
.
COR
A cor principal do email toma toda a área que corresponda ao destaque e produtos.
A função é a já mencionada identificação imediata com o email do Gimba.com e entre todos da mesma empresa o cliente identifique um entre os demais.
.
.
A HIERARQUIA das informações se apresentou ideal da seguinte forma:
TOPO
O topo diminui sua altura de 315px para 55px e nele contém apenas o logo Gimba.com e um link direto para o serviço de FaleConosco do site.
.
DESTAQUE
Imediatamente abaixo do topo já figura o destaque. A distância que era de 310px na peça de 2007 para o cliente ter contato com o produto principal ou promoção do email, agora é de 60px.
.
.
PRODUTOS
Os produtos são igualmente dispostos em 2 linhas de 3 produtos cada. As diferenças são:
01. O box branco o resguarda do background colorido, que não havia na peça de 2007.
02. 2 barras vermelhas, identidade visual da empresa identificam o título e os pontos de Gimplus.
03. Depois de título, imagem do produto e identificações técnicas e campo preço e pontuação de Gimplus. As descrições foram suprimidas da parte visual justamente para tornar o email verticalmente menor.
04. Logo em seguida, vem o bloco de valores“de/por/economize/parcelamento” com a mesma lógica de organização e alinhamento do email marketing de 2007, apenas dando maior destaque ao ítem “por”.
USO DA TAG “ALT”
Quando o Outlook ou qualquer outro aplicativo de gerenciamento de email ou até o próprio navegador não abrir a imagem por qualquer razão, aparece escrito o que está na Tag ALT.
É de extrema utilidade para a navegação de deficientes visuais, por navegadores que interpretam o texto através de mecanismos específicos.
Ou meramente pra auxiliar quando o mouse está em cima da imagem.
.
.
BARRA DE SERVIÇOS
O site Gimba.com não oferece apenas produtos. Também existem diversos serviços e conceitos diferenciados como programa de fidelidade, mostrar a segurança do site, mudança de telefone, ferramentas diferenciadas como negociação online, etc. Foi criada então uma barra de serviços onde esses serviços e conceitos são expostos.
.
.
PARTE FINAL
A barra de departamentos passou do topo para o fim do email. Não foi suprimida porque a partir dela existem muitos cliques, e mesmo que não houvessem, é uma forma de interação com o cliente, comunicando de maneira resumida o que há no site.
Em seguida, os textos de rodapés com datas, prazos, esclarecimentos e especificações e uma barra vermelha, como a do topo, para dar unidade ao email, dando a idéia de começo (topo), meio (conteúdo) e fim (rodapé e barra).
.
.
__________________
No mais, as soluções aplicadas são as já apresentadas na versão 2007. A versão 2008 é composta por mais estudos, mas é fruto da versão 2007, com todas as experiências que tivemos na prática.
Espero que aproveitem essa matéria, que apesar de longa, foi feita com detalhamento para que de fato possa ajudar. Um grande abraço a todos.
Por Luiz Dias
www.gerentedeecommerce.com.br
Agradecimentos especiais à Equipe Gimba.com 2007 e 2008.
0 Comentário