SlideShare uma empresa Scribd logo
1 de 46
Baixar para ler offline
Design
de temas para
WooCommerce
Anyssa Ferreira
WORDCAMPFORTALEZA2016
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
Fazer design para e-commerce é
projetar para converter.
Como assim?
Quem?1.
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&
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&
Como?2.
Temos muita tecnologia, pouca
metodologia e nada de filosofia.
Rodolfo Fuentes
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
Crie elemento
modulares
Reaproveite elementos visuais. A
repetição causa identificação e ajuda o
usuário a se sentir confortável.
Defina uma
hierarquia clara
Mostre quem manda na página. É um
título? Um botão? Como os diferencio?
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!
O que?3.
Conversão
É quando um usuário executa uma ação desejada, como comprar
um produto ou efetuar um cadastro. A conversão é o objetivo.
Taxa de
Conversão
É porcentagem de conversões entre os visitantes do seu site.
No Brasil a média é de 1,65%.
O processo que leva o usuário até
a conversão é o funil de vendas.
Só tem um problema…
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.
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.
Etapas do Funil
1. Consciência
2. Interesse
3. Desejo
4. Ação
1.
2.
3.
4.
Consciência4.
1.
2.
3.
4.
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.
● Facilite o acesso as
categorias, busca, e
outras formas de
encontrar produtos.
● Exiba listas de
produtos mais
vendidos, mais bem
avaliados, etc.
Alpha Store
● Coloque os filtros
sempre visíveis na loja
e nos resultados da
busca.
● Filtre por categorias,
atributos, preço,
variações, tags, etc.
Storefront
● 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
● 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
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.
Informe, mostre e oriente o
usuário.
Ajude-o a chegar até você e seus produtos.
Interesse5.
1.
2.
3.
4.
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.
● Uma descrição sucinta
é essencial.
● Deixe tudo as claras:
preço, quantidade,
condições, etc.
Abelman
● Imagens valem mais
que mil palavras e
facilitam a
compreensão.
● Em vez de só dizer,
mostre o que é o seu
produto.
Storefront
Prove que o seu produto é aquilo
que o usuário procura e precisa
Tire as dúvidas oferecendo informações,
imagens.
Desejo6.
1.
2.
3.
4.
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.
● O plugin WPB
WooCommerce
Custom Tab Manager
adiciona mais tabs à
página de produtos,
permitindo a inserção
de mais detalhes.
● 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
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.
Ação7.
1.
2.
3.
4.
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.
● O Mini carrinho deve
ser visível e guiar para
o checkout.
MaxStore
● 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
● O plugin YITH
WooCommerce
Multistep Checkout
cria uma timeline para
a exbição de um
checkout em multiplos
passos.
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.
É goool!
Siga estas dicas e sua taxa de conversão será um verdadeiro 7 x 1.
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.
Obrigada!
Siga nas redes sociais
www.hastedesign.com.br
@anyssaferreira
Imagens: domínio público.

Mais conteúdo relacionado

Mais procurados

5 DICAS PARA TRANSFOMAR SEU CHECKOUT EM UMA MÁQUINA DE VENDAS
5 DICAS PARA TRANSFOMAR SEU CHECKOUT EM UMA MÁQUINA DE VENDAS5 DICAS PARA TRANSFOMAR SEU CHECKOUT EM UMA MÁQUINA DE VENDAS
5 DICAS PARA TRANSFOMAR SEU CHECKOUT EM UMA MÁQUINA DE VENDASLeo Leite
 
Otimização de Conversão para empresas baseadas em assinaturas
Otimização de Conversão para empresas baseadas em assinaturasOtimização de Conversão para empresas baseadas em assinaturas
Otimização de Conversão para empresas baseadas em assinaturasRafael Damasceno
 
Palestra E- commerce School
Palestra E- commerce SchoolPalestra E- commerce School
Palestra E- commerce SchoolE-commerce Live
 
Testes A/B para aumentar as conversões em e-commerces
Testes A/B para aumentar as conversões em e-commercesTestes A/B para aumentar as conversões em e-commerces
Testes A/B para aumentar as conversões em e-commercesRafael Damasceno
 
10 motivos para teres blog
10 motivos para teres blog10 motivos para teres blog
10 motivos para teres blogManuel Manero
 
Artigo Sebrae - Uma imagem vale mais que mil palavras
Artigo Sebrae - Uma imagem vale mais que mil palavras Artigo Sebrae - Uma imagem vale mais que mil palavras
Artigo Sebrae - Uma imagem vale mais que mil palavras Simone Teixeira
 
Rafael Damasceno - RD Summit 2015 - Otimização de Conversão
Rafael Damasceno - RD Summit 2015 - Otimização de ConversãoRafael Damasceno - RD Summit 2015 - Otimização de Conversão
Rafael Damasceno - RD Summit 2015 - Otimização de ConversãoRafael Damasceno
 
Usabilidade para E-commerce
Usabilidade para E-commerceUsabilidade para E-commerce
Usabilidade para E-commercePinguim Digital
 
Como Prospectar Clientes e Vender Consultoria
Como Prospectar Clientes e Vender ConsultoriaComo Prospectar Clientes e Vender Consultoria
Como Prospectar Clientes e Vender ConsultoriaEdson Gonçalves
 
Blogs e sites corporativos com WordPress + SEO
Blogs e sites corporativos com WordPress + SEOBlogs e sites corporativos com WordPress + SEO
Blogs e sites corporativos com WordPress + SEOApiki WordPress
 
[Treinamento CDL] Blogs e sites corporativos com WordPress e SEO
[Treinamento CDL] Blogs e sites corporativos com WordPress e SEO[Treinamento CDL] Blogs e sites corporativos com WordPress e SEO
[Treinamento CDL] Blogs e sites corporativos com WordPress e SEOMayara Alanna Pereira Martins
 
5 dicas para turbinar seu Checkout.
5 dicas para turbinar seu Checkout.5 dicas para turbinar seu Checkout.
5 dicas para turbinar seu Checkout.Leo Leite
 
Marketing Para Supermercados
Marketing Para SupermercadosMarketing Para Supermercados
Marketing Para SupermercadosMarcos Amorim
 
Porque escolher Site NoSalao
Porque escolher Site  NoSalaoPorque escolher Site  NoSalao
Porque escolher Site NoSalaoNoSalão
 
Saveshop - Apresentação
Saveshop - Apresentação Saveshop - Apresentação
Saveshop - Apresentação Saveshop
 
Nosso Webnário dia 10/03
Nosso Webnário dia 10/03Nosso Webnário dia 10/03
Nosso Webnário dia 10/03André Hypolito
 
5 passos para você triplicar sua captação de clientes e ainda aumentar suas v...
5 passos para você triplicar sua captação de clientes e ainda aumentar suas v...5 passos para você triplicar sua captação de clientes e ainda aumentar suas v...
5 passos para você triplicar sua captação de clientes e ainda aumentar suas v...Fabiano Corretor
 
Copywriter profissional
Copywriter profissional Copywriter profissional
Copywriter profissional Victor Palandi
 

Mais procurados (20)

5 DICAS PARA TRANSFOMAR SEU CHECKOUT EM UMA MÁQUINA DE VENDAS
5 DICAS PARA TRANSFOMAR SEU CHECKOUT EM UMA MÁQUINA DE VENDAS5 DICAS PARA TRANSFOMAR SEU CHECKOUT EM UMA MÁQUINA DE VENDAS
5 DICAS PARA TRANSFOMAR SEU CHECKOUT EM UMA MÁQUINA DE VENDAS
 
Otimização de Conversão para empresas baseadas em assinaturas
Otimização de Conversão para empresas baseadas em assinaturasOtimização de Conversão para empresas baseadas em assinaturas
Otimização de Conversão para empresas baseadas em assinaturas
 
Palestra E- commerce School
Palestra E- commerce SchoolPalestra E- commerce School
Palestra E- commerce School
 
Testes A/B para aumentar as conversões em e-commerces
Testes A/B para aumentar as conversões em e-commercesTestes A/B para aumentar as conversões em e-commerces
Testes A/B para aumentar as conversões em e-commerces
 
10 motivos para teres blog
10 motivos para teres blog10 motivos para teres blog
10 motivos para teres blog
 
Artigo Sebrae - Uma imagem vale mais que mil palavras
Artigo Sebrae - Uma imagem vale mais que mil palavras Artigo Sebrae - Uma imagem vale mais que mil palavras
Artigo Sebrae - Uma imagem vale mais que mil palavras
 
Rafael Damasceno - RD Summit 2015 - Otimização de Conversão
Rafael Damasceno - RD Summit 2015 - Otimização de ConversãoRafael Damasceno - RD Summit 2015 - Otimização de Conversão
Rafael Damasceno - RD Summit 2015 - Otimização de Conversão
 
Usabilidade para E-commerce
Usabilidade para E-commerceUsabilidade para E-commerce
Usabilidade para E-commerce
 
Site vendedor
Site vendedorSite vendedor
Site vendedor
 
Como Prospectar Clientes e Vender Consultoria
Como Prospectar Clientes e Vender ConsultoriaComo Prospectar Clientes e Vender Consultoria
Como Prospectar Clientes e Vender Consultoria
 
Blogs e sites corporativos com WordPress + SEO
Blogs e sites corporativos com WordPress + SEOBlogs e sites corporativos com WordPress + SEO
Blogs e sites corporativos com WordPress + SEO
 
[Treinamento CDL] Blogs e sites corporativos com WordPress e SEO
[Treinamento CDL] Blogs e sites corporativos com WordPress e SEO[Treinamento CDL] Blogs e sites corporativos com WordPress e SEO
[Treinamento CDL] Blogs e sites corporativos com WordPress e SEO
 
5 dicas para turbinar seu Checkout.
5 dicas para turbinar seu Checkout.5 dicas para turbinar seu Checkout.
5 dicas para turbinar seu Checkout.
 
Marketing Para Supermercados
Marketing Para SupermercadosMarketing Para Supermercados
Marketing Para Supermercados
 
Porque escolher Site NoSalao
Porque escolher Site  NoSalaoPorque escolher Site  NoSalao
Porque escolher Site NoSalao
 
Saveshop - Apresentação
Saveshop - Apresentação Saveshop - Apresentação
Saveshop - Apresentação
 
Nosso Webnário dia 10/03
Nosso Webnário dia 10/03Nosso Webnário dia 10/03
Nosso Webnário dia 10/03
 
URL Externa
URL ExternaURL Externa
URL Externa
 
5 passos para você triplicar sua captação de clientes e ainda aumentar suas v...
5 passos para você triplicar sua captação de clientes e ainda aumentar suas v...5 passos para você triplicar sua captação de clientes e ainda aumentar suas v...
5 passos para você triplicar sua captação de clientes e ainda aumentar suas v...
 
Copywriter profissional
Copywriter profissional Copywriter profissional
Copywriter profissional
 

Semelhante a Projete temas WooCommerce para conversão

UX - Experiência do Usuário com foco em Alta Performance
UX - Experiência do Usuário com foco em Alta PerformanceUX - Experiência do Usuário com foco em Alta Performance
UX - Experiência do Usuário com foco em Alta PerformanceLisandra Maioli
 
21 passos para a página de produto perfeita
21 passos para a página de produto perfeita21 passos para a página de produto perfeita
21 passos para a página de produto perfeitaRaphael Lassance ⚡
 
10 dicas-antes-criar-loja-virtual
10 dicas-antes-criar-loja-virtual10 dicas-antes-criar-loja-virtual
10 dicas-antes-criar-loja-virtualEliane Soares
 
Workshop - Sua loja virtual de sucesso - Droopi Agência Digital
Workshop - Sua loja virtual de sucesso - Droopi Agência DigitalWorkshop - Sua loja virtual de sucesso - Droopi Agência Digital
Workshop - Sua loja virtual de sucesso - Droopi Agência DigitalLuiz Gabriel Cardozo
 
Os principais cuidados para ter uma loja virtual competitiva - Workshop VTEX ...
Os principais cuidados para ter uma loja virtual competitiva - Workshop VTEX ...Os principais cuidados para ter uma loja virtual competitiva - Workshop VTEX ...
Os principais cuidados para ter uma loja virtual competitiva - Workshop VTEX ...VTEX
 
[Workshops RoadShow - Edição Ribeirão Preto] Aumentando o faturamento da sua ...
[Workshops RoadShow - Edição Ribeirão Preto] Aumentando o faturamento da sua ...[Workshops RoadShow - Edição Ribeirão Preto] Aumentando o faturamento da sua ...
[Workshops RoadShow - Edição Ribeirão Preto] Aumentando o faturamento da sua ...E-Commerce Brasil
 
Palestra Fastcommerce - Como melhor a experiência de compra em sua loja virtual
Palestra Fastcommerce - Como melhor a experiência de compra em sua loja virtualPalestra Fastcommerce - Como melhor a experiência de compra em sua loja virtual
Palestra Fastcommerce - Como melhor a experiência de compra em sua loja virtualJoão Leão
 
[Big Solutions CX] Venda mais simplificando a vida do usuário: UX levado à sério
[Big Solutions CX] Venda mais simplificando a vida do usuário: UX levado à sério[Big Solutions CX] Venda mais simplificando a vida do usuário: UX levado à sério
[Big Solutions CX] Venda mais simplificando a vida do usuário: UX levado à sérioE-Commerce Brasil
 
Web Analytics - Como Implementar Uma Cultura de Web Analytics
Web Analytics - Como Implementar Uma Cultura de Web AnalyticsWeb Analytics - Como Implementar Uma Cultura de Web Analytics
Web Analytics - Como Implementar Uma Cultura de Web AnalyticsRafael Comin
 
Web marketing 6 Contrução Site
Web marketing 6 Contrução SiteWeb marketing 6 Contrução Site
Web marketing 6 Contrução SiteRonaldo Hofmeister
 
Construa o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquêConstrua o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquêCady Bocum
 
Rakuten EC Service - 2010 Ikeda - E-commerce e Conversão
Rakuten EC Service - 2010 Ikeda - E-commerce e ConversãoRakuten EC Service - 2010 Ikeda - E-commerce e Conversão
Rakuten EC Service - 2010 Ikeda - E-commerce e ConversãoRakuten Brasil
 
Meet Magento 2014 OSC brasil 6 pro 2
Meet Magento 2014 OSC brasil 6 pro 2Meet Magento 2014 OSC brasil 6 pro 2
Meet Magento 2014 OSC brasil 6 pro 2Deivison Serpa
 
[Conferência PR 2019] Usando o bounce-rate para alavancar suas vendas
[Conferência PR 2019] Usando o bounce-rate para alavancar suas vendas [Conferência PR 2019] Usando o bounce-rate para alavancar suas vendas
[Conferência PR 2019] Usando o bounce-rate para alavancar suas vendas E-Commerce Brasil
 
E book como criar uma incrível experiência do usuário em comércio eletrônico
E book como criar uma incrível experiência do usuário em comércio eletrônicoE book como criar uma incrível experiência do usuário em comércio eletrônico
E book como criar uma incrível experiência do usuário em comércio eletrônicoFabricio Schlag
 
[Workshops RoadShow ECBR - Edição Belo Horizonte 2019] Estratégias simples e ...
[Workshops RoadShow ECBR - Edição Belo Horizonte 2019] Estratégias simples e ...[Workshops RoadShow ECBR - Edição Belo Horizonte 2019] Estratégias simples e ...
[Workshops RoadShow ECBR - Edição Belo Horizonte 2019] Estratégias simples e ...E-Commerce Brasil
 
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010Renata Tibiriçá
 

Semelhante a Projete temas WooCommerce para conversão (20)

UX - Experiência do Usuário com foco em Alta Performance
UX - Experiência do Usuário com foco em Alta PerformanceUX - Experiência do Usuário com foco em Alta Performance
UX - Experiência do Usuário com foco em Alta Performance
 
21 passos para a página de produto perfeita
21 passos para a página de produto perfeita21 passos para a página de produto perfeita
21 passos para a página de produto perfeita
 
10 dicas-antes-criar-loja-virtual
10 dicas-antes-criar-loja-virtual10 dicas-antes-criar-loja-virtual
10 dicas-antes-criar-loja-virtual
 
Formatacao De Websites Comerciais
Formatacao De Websites ComerciaisFormatacao De Websites Comerciais
Formatacao De Websites Comerciais
 
Workshop - Sua loja virtual de sucesso - Droopi Agência Digital
Workshop - Sua loja virtual de sucesso - Droopi Agência DigitalWorkshop - Sua loja virtual de sucesso - Droopi Agência Digital
Workshop - Sua loja virtual de sucesso - Droopi Agência Digital
 
Os principais cuidados para ter uma loja virtual competitiva - Workshop VTEX ...
Os principais cuidados para ter uma loja virtual competitiva - Workshop VTEX ...Os principais cuidados para ter uma loja virtual competitiva - Workshop VTEX ...
Os principais cuidados para ter uma loja virtual competitiva - Workshop VTEX ...
 
[Workshops RoadShow - Edição Ribeirão Preto] Aumentando o faturamento da sua ...
[Workshops RoadShow - Edição Ribeirão Preto] Aumentando o faturamento da sua ...[Workshops RoadShow - Edição Ribeirão Preto] Aumentando o faturamento da sua ...
[Workshops RoadShow - Edição Ribeirão Preto] Aumentando o faturamento da sua ...
 
Guia Ecommerce para Empresas de Moda
Guia Ecommerce para Empresas de ModaGuia Ecommerce para Empresas de Moda
Guia Ecommerce para Empresas de Moda
 
Palestra Fastcommerce - Como melhor a experiência de compra em sua loja virtual
Palestra Fastcommerce - Como melhor a experiência de compra em sua loja virtualPalestra Fastcommerce - Como melhor a experiência de compra em sua loja virtual
Palestra Fastcommerce - Como melhor a experiência de compra em sua loja virtual
 
[Big Solutions CX] Venda mais simplificando a vida do usuário: UX levado à sério
[Big Solutions CX] Venda mais simplificando a vida do usuário: UX levado à sério[Big Solutions CX] Venda mais simplificando a vida do usuário: UX levado à sério
[Big Solutions CX] Venda mais simplificando a vida do usuário: UX levado à sério
 
Como criar conteudo para sites de ecommerce
Como criar conteudo para sites de ecommerceComo criar conteudo para sites de ecommerce
Como criar conteudo para sites de ecommerce
 
Web Analytics - Como Implementar Uma Cultura de Web Analytics
Web Analytics - Como Implementar Uma Cultura de Web AnalyticsWeb Analytics - Como Implementar Uma Cultura de Web Analytics
Web Analytics - Como Implementar Uma Cultura de Web Analytics
 
Web marketing 6 Contrução Site
Web marketing 6 Contrução SiteWeb marketing 6 Contrução Site
Web marketing 6 Contrução Site
 
Construa o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquêConstrua o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquê
 
Rakuten EC Service - 2010 Ikeda - E-commerce e Conversão
Rakuten EC Service - 2010 Ikeda - E-commerce e ConversãoRakuten EC Service - 2010 Ikeda - E-commerce e Conversão
Rakuten EC Service - 2010 Ikeda - E-commerce e Conversão
 
Meet Magento 2014 OSC brasil 6 pro 2
Meet Magento 2014 OSC brasil 6 pro 2Meet Magento 2014 OSC brasil 6 pro 2
Meet Magento 2014 OSC brasil 6 pro 2
 
[Conferência PR 2019] Usando o bounce-rate para alavancar suas vendas
[Conferência PR 2019] Usando o bounce-rate para alavancar suas vendas [Conferência PR 2019] Usando o bounce-rate para alavancar suas vendas
[Conferência PR 2019] Usando o bounce-rate para alavancar suas vendas
 
E book como criar uma incrível experiência do usuário em comércio eletrônico
E book como criar uma incrível experiência do usuário em comércio eletrônicoE book como criar uma incrível experiência do usuário em comércio eletrônico
E book como criar uma incrível experiência do usuário em comércio eletrônico
 
[Workshops RoadShow ECBR - Edição Belo Horizonte 2019] Estratégias simples e ...
[Workshops RoadShow ECBR - Edição Belo Horizonte 2019] Estratégias simples e ...[Workshops RoadShow ECBR - Edição Belo Horizonte 2019] Estratégias simples e ...
[Workshops RoadShow ECBR - Edição Belo Horizonte 2019] Estratégias simples e ...
 
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
 

Mais de Anyssa Ferreira

Como começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPressComo começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPressAnyssa Ferreira
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Anyssa Ferreira
 
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...Anyssa Ferreira
 
Estilizando temas de WordPress
Estilizando temas de WordPressEstilizando temas de WordPress
Estilizando temas de WordPressAnyssa Ferreira
 
Percepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPressPercepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPressAnyssa Ferreira
 
Elo perdido entre design e programação
Elo perdido entre design e programaçãoElo perdido entre design e programação
Elo perdido entre design e programaçãoAnyssa Ferreira
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015Anyssa Ferreira
 

Mais de Anyssa Ferreira (8)

Como começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPressComo começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPress
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
 
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
 
Estilizando temas de WordPress
Estilizando temas de WordPressEstilizando temas de WordPress
Estilizando temas de WordPress
 
Percepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPressPercepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPress
 
Elo perdido entre design e programação
Elo perdido entre design e programaçãoElo perdido entre design e programação
Elo perdido entre design e programação
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
 

Projete temas WooCommerce para conversão

  • 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?
  • 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&
  • 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!
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.