Post on 08-Aug-2020
Design e criação em e-mail marketing
17 de junho de 2008, 07:34
E-commerce obteve sucesso em uma campanha de e-mail marketing, que repetiu este ano em
versão aperfeiçoada. Conheça as decisões de design e hierarquia das peças.
Por Luiz Dias
Esta matéria apresenta um caso prático de desenvolvimento de peças de e-mail 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 e-mail 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 e-mail 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 e-mail 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 e-mail marketing;
2. A do box do produto.
E assim foi desenvolvido:
Hierarquia do e-mail 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 e-mail.
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 e-mail.
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 e-mail, 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 E-mail 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 e-mail, 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 e-mail como único. Para isso, usamos o mesmo padrão de
organização, mas com cores diferentes. Como os e-mails são enviados com freqüência, é interessante que um
e-mail 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 e-mail, 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 e-mail todo amarelo. No início, parecem cores muito fortes, mas este era justamente o
conceito. O inconsciente do cliente ligaria o surgimento de um e-mail 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 e-mails 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 e-mail marketing.
..As soluções levantadas foram as seguintes:
- Sintetizar ao máximo o tamanho vertical do e-mail, 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 e-mail
fossem ainda mais relevantes.
- Ainda mais inteligência na exposição dos preços.
- Apresentação randômica de serviços do site.
O e-mail foi desenvolvido da seguinte forma:
.
.
COR
A cor principal do e-mail toma toda a área que corresponda ao destaque e produtos.
A função é a já mencionada identificação imediata com o e-mail 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 e-mail, 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 e-mail 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 e-mail marketing de 2007, apenas dando maior destaque ao ítem “por”.
.
.USO DA TAG “ALT”
- Quando o Outlook ou qualquer outro aplicativo de gerenciamento de e-mail 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 e-mail. 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.
Luiz Dias em www.luizdias.net. Agradecimentos especiais à Equipe Gimba.com 2007 e 2008.