Senhoras e senhores. Respeitável público.

Esta matéria é um case prático de desenvolvimento das peças de e-mail marketing, realizado pelo e-commerce Gimba.com em suas versões 2007 e 2008.

O desafio neste caso é diferente de muitos trabalhos de design, por não se tratar de uma peça meramente estética: ou seja, pouco ou nada adiantaria propor avanços tecnológicos ou efeitos mirabolantes por preciosismo ou vaidade.

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.

Email Mkt - gimba.com - versão 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.

Aqui vai 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:

Hierarquida do e-mail marketing

Convencionamos que todos as peças os e-mails marketing 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

o Gimplus - Programa de fidelidade do Gimba.com

o 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:

1. De
2. Por
3. Economize
4. (respiro)
5. 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 o GIMBA.COM o 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:

1. O box branco o resguarda do background colorido, que não havia na peça de 2007.
2. 2 barras vermelhas, identidade visual da empresa identificam o título e os pontos de Gimplus.
3. 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.
4. 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.

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.

www.luizdias.net

Agradecimentos especiais à Equipe Gimba.com 2007 e 2008.