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.