Palestra apresentada no WordCamp Belo Horizonte 2016 e no WordCamp Fortaleza 2016.

1. Design
de temas para
WooCommerce
Anyssa Ferreira
WORDCAMPFORTALEZA2016

2. Anyssa Ferreira
Designer gráfica e desenvolvedora web, há 10 anos. Fundadora
do estúdio Haste. Professora e palestrante. Membra da
comunidade WordPress de São Paulo, Organizadora do
WordCamp SP e Meetups.
Primeira ganhadora da Kim Parsell Scholarship da Fundação
WordPress em 2015 pela contribuição com a causa da inclusão
de mulheres na comunidade WordPress.
@anyssaferreira hastedesign.com.br

3. Fazer design para e-commerce é
projetar para converter.
Como assim?

4. Quem?1.

5. Designer gráfico
Designer que projeta
comunicação visual em geral.
Inclui, mas não se limita aos
materiais impressos.
Subfunção do designer gráfico,
especializado em layout para a
internet, incluindo sites, banners,
interfaces, etc.
Designer web&

6. UI Designer
Designer de interfaces.
Responsável por criar os
elementos gráficos do site, os
inputs e outputs.
Designer de experiência do
usuário. Responsável por criar
uma interação agradável e
funcional.
UX Designer&

7. Como?2.

8. Temos muita tecnologia, pouca
metodologia e nada de filosofia.
Rodolfo Fuentes

9. Trabalhe para
encontrar e aprimorar
a sua metodologia
Descubra quais métodos te ajudam a
conseguir bons resultados. Teste, avalie e
melhore.
Wireframe
Layout
Mapa do site

10. Crie elemento
modulares
Reaproveite elementos visuais. A
repetição causa identificação e ajuda o
usuário a se sentir confortável.

11. Defina uma
hierarquia clara
Mostre quem manda na página. É um
título? Um botão? Como os diferencio?

12. Aceite críticas e
esteja atento aos
feedbacks
Você cria para o outro. Ouça o que ele
tem a dizer, nem sempre de forma direta.
Avalie criteriosamente e transforme isso
em melhorias.
Teste de UX são ótimos!

13. O que?3.

14. Conversão
É quando um usuário executa uma ação desejada, como comprar
um produto ou efetuar um cadastro. A conversão é o objetivo.

15. Taxa de
Conversão
É porcentagem de conversões entre os visitantes do seu site.
No Brasil a média é de 1,65%.

16. O processo que leva o usuário até
a conversão é o funil de vendas.
Só tem um problema…

17. Porém, nem tudo que entra no
funil converte.
O funil sempre tem furos. Na verdade, a melhor analogia
seria um balde furado que você usa para pegar água.

18. O papel do designer é de não
deixar vazar, promovendo uma
experiência fluida, rumo a
conversão.
Elimine a desinformação, dúvidas, hesitação e obstáculos.

19. Etapas do Funil
1. Consciência
2. Interesse
3. Desejo
4. Ação
1.
2.
3.
4.

20. Consciência4.
1.
2.
3.
4.

21. A consciência é a etapa onde o
usuário toma conhecimento da loja
e dos produtos.
● Otimização SEO (permalinks,
conteúdo, estrutura HTML,
sitemap, etc.);
● Anúncios e redes sociais.
● Pesquisa e filtros;
● Seções e categorias;
● Curadoria de produtos;
● Navegação e acessibilidade.
❌ Não encontrar a loja;
❌ Não encontrar o produto, e achar
que a loja não oferece;
❌ Ver um produto e não conseguir
achá-lo novamente;
❌ Não visualizar as opções;
❌ Receber sugestões erradas.

22. ● Facilite o acesso as
categorias, busca, e
outras formas de
encontrar produtos.
● Exiba listas de
produtos mais
vendidos, mais bem
avaliados, etc.
Alpha Store

23. ● Coloque os filtros
sempre visíveis na loja
e nos resultados da
busca.
● Filtre por categorias,
atributos, preço,
variações, tags, etc.
Storefront

24. ● Navegação universal -
não crie becos sem
saída.
● Mostre logo de cara na
homepage o que sua
loja tem de melhor, e
caminhos possíveis
para o usuário seguir.
eStore

25. ● Navegação universal -
não crie becos sem
saída.
● Mostre logo de cara na
homepage o que sua
loja tem de melhor, e
caminhos possíveis
para o usuário seguir.
MaxStore

26. Exemplo de “vitrines”.
● Crie seções de
produtos que possam
ser gerenciadas.
● Ative as ferramentas
de sugestões de
produtos relacionados
e ofereça em
momentos chave.

27. Informe, mostre e oriente o
usuário.
Ajude-o a chegar até você e seus produtos.

28. Interesse5.
1.
2.
3.
4.

29. O interesse é a etapa onde a atenção
do usuário é capturada e ele passa a
analisar o produto.
● Landing pages;
● Promoções e cupons;
● Envio de email marketing;
● Páginas dos produtos - informação
geral.
● Call to action visível e bem
desenhado.
❌ Decepcionar, confundir ou enganar
o usuário;
❌ Itens fora de estoque geram
desapontamento.

30. ● Uma descrição sucinta
é essencial.
● Deixe tudo as claras:
preço, quantidade,
condições, etc.
Abelman

31. ● Imagens valem mais
que mil palavras e
facilitam a
compreensão.
● Em vez de só dizer,
mostre o que é o seu
produto.
Storefront

32. Prove que o seu produto é aquilo
que o usuário procura e precisa
Tire as dúvidas oferecendo informações,
imagens.

33. Desejo6.
1.
2.
3.
4.

34. O desejo é a etapa onde o usuário já
se conectou ao produto, mas precisa
do estímulo racional.
● Mais fotos em outros ângulos.
● Depoimentos e reviews.
● Informações sobre suporte,
entrega, devoluções, etc.
● Segurança do site.
● Informações de contato e
atendimento ao cliente.
● Compra por impulso.
❌ Falta de informação gera
desconfiança.
❌ Erros, bugs, e falhas.
❌ Apelar demais para o emocional.
❌ Pressionar demais o usuário.

35. ● O plugin WPB
WooCommerce
Custom Tab Manager
adiciona mais tabs à
página de produtos,
permitindo a inserção
de mais detalhes.

36. ● Imagens grandes, bem
produzidas e em
destaque despertam
desejo.
● Apelar para os
sentidos (paladar,
por exemplo), ou
sensações (fome)
ajudam o usuário a
decidir.
Azera Shop

37. Mostre que o usuário foi
correspondido e elimine a
hesitação
Passe segurança e credibilidade, para
transformar o vínculo em conversão.

38. Ação7.
1.
2.
3.
4.

39. A ação é a etapa onde o usuário
executa o objetivo a conversão, no
caso, a compra.
● Desenhe um carrinho fácil de
entender e manejar.
● Enfatize os botões de comprar,
finalizar pedido e pagamento.
● Otimize os formulários, uma opção
é o checkout guiado.
● Compra com 1 clique.
● Urgência
❌ Falta de acesso aos setores de
finalização de compra.
❌ Falta de funcionalidades de
manejamento e carrinho.
❌ Formulários de checkout gigantes
e confusos.

40. ● O Mini carrinho deve
ser visível e guiar para
o checkout.
MaxStore

41. ● O carrinho deve ser
claro e sem distrações.
● Evite sidebars,
banners, etc.
● O botão de checkout
deve ter o maior “peso”
visual da página.
MaxStore

42. ● O plugin YITH
WooCommerce
Multistep Checkout
cria uma timeline para
a exbição de um
checkout em multiplos
passos.

43. Facilite as ações removendo
qualquer obstáculo.
Facilite o entendimento dos procedimentos e guie
seu usuário para que ele não se perca nos
metros finais.

44. É goool!
Siga estas dicas e sua taxa de conversão será um verdadeiro 7 x 1.

45. Resumindo
Projete temas para WooCommerce que
foquem em conversão através de 4
passos: sejam acessíveis, confiáveis,
sedutores e usáveis, para que o usuário
flua rumo ao objetivo - a conversão.

46. Obrigada!
Siga nas redes sociais
www.hastedesign.com.br
@anyssaferreira
Imagens: domínio público.