Palestra realizada no FrontInRio 2001. Neste trabalho sugiro um processo bem definido para realizar o design de front-end de um website com objetivo de aumentar as conversões. Este processo envolve alguns passos como criação de uma Landing Page, Definição de Métricas, Tracking e Testes A/B.
55. Rafael Lima
@rafaelp
<script type="text/javascript">
//<![CDATA[
mpq.push(["track", "homepage"]);
$("#video-preview").click(function() {
mpq.push(["track", "video"]);
});
//]]>
</script>
56. Rafael Lima
@rafaelp
Não é só para
Javascript. Pode ser
usado no back-end.
57. Rafael Lima
@rafaelp
# account_observer.rb
class AccountObserver < ActiveRecord::Observer
def after_create(account)
Delayed::Job.enqueue MixpanelJob.new('account created',
{:distinct_id => account.mixpanel_distinct_id}) end
def after_destroy(account)
Delayed::Job.enqueue MixpanelJob.new('account cancelled',
{:distinct_id => account.mixpanel_distinct_id})
end
end
58. Rafael Lima
@rafaelp
# Gemfile
source "http://rubygems.org"
gem 'rails', "3.0.3"
gem 'mixpanel', '0.7.0'
# mixpanel_job.rb
class MixpanelJob < Struct.new(:event, :properties)
def perform
mixpanel = Mixpanel.new(ENV['MIXPANEL_TOKEN'], {})
mixpanel.track_event(event, properties)
end
end
83. Rafael Lima
@rafaelp
Fotos de Produtos
• Foco no Produto
• Fotos de mais de um ângulo
• Mostre alguém usando
• Fotos do maior tamanho possível
• Mostre as diferentes opções
• Mostre pessoas apreciando o
87. Rafael Lima
@rafaelp
Botões
• Use botões grandes
• Inclua ícone nos botões
• Adicione profundidade
• Adicione efeito ao passar o mouse
• Use uma cor diferente da paleta
• Descreva o próximo passo
89. Rafael Lima
@rafaelp
E-commerce
• Descreva o produto com os detalhes
• Não peça cadastro
• Apresente as formas de pagamento
• Não apresente menu nem links
• Utilize selos de servidor seguro
• Apresente os dados da empresa
100. Rafael Lima
@rafaelp
Obrigado!
Pessoal
http://twitter.com/rafaelp
http://rafael.adm.br
BielSystems
http://bielsystems.com.br
Workshop de Empreendedorismo
Bootstrappers
http://bootstrappers.com.br/workshop
Startup DEV
101. Rafael Lima
@rafaelp
Referências
http://www.slideshare.net/EcommmerceSummit/42-ecommercesummit
http://www.marketingsherpa.com/content/?q=node/2973
http://www.slideshare.net/rpanini/a-importncia-do-design-no-ecommerce
http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/
http://www.flickr.com/photos/kdlc/877547288/
http://www.flickr.com/photos/jeff_snodgrass/1473675982/
102. Rafael Lima
@rafaelp
Copyleft
• Use essa apresentação como quiser
• Distribua para quem quiser
• Altere o quanto quiser
• Não precisa nem se preocupar em
citar o autor
• Sinta-se livre para fazer
absolutamente o que quiser com
Notas do Editor
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Em marketing, landing page &#xE9; uma p&#xE1;gina na web &#xFA;nica que aparece como resposta ao clique em um an&#xFA;ncio.\nSe o seu objetivo &#xE9; \n
\n
\n
\n
\n
\n
A n&#xF5;a ser que voc&#xEA; seja m&#xE1;gico ou tenha uma bola de cristal.\nAssumir que voc&#xEA; ir&#xE1; errar &#xE9; o primeiro passo para se preparar para acertar posteriormente.\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Mas isso &#xE9; papo pra outro evento n&#xE9;!\nIsso aqui &#xE9; Front in Rio...\n
\n
\n
\n
\n
\n
Utilizaram o Google Web Optimizer\nRodaram com 4000 pageviews\nEles fizeram outros testes que converteram 27% 15% e 7%\n
Utilizaram o Google Web Optimizer\nRodaram com 4000 pageviews\nEles fizeram outros testes que converteram 27% 15% e 7%\n
Queria testar comandos para os usu&#xE1;rios\nRodou em um blog para 5.000 visitantes &#xFA;nicos\nChegou a testar outras variantes al&#xE9;m destas\nChegou a testar usando &#x201C;por favor&#x201D;, mas n&#xE3;o rolou\n
Queria testar comandos para os usu&#xE1;rios\nRodou em um blog para 5.000 visitantes &#xFA;nicos\nChegou a testar outras variantes al&#xE9;m destas\nChegou a testar usando &#x201C;por favor&#x201D;, mas n&#xE3;o rolou\n
Queria testar comandos para os usu&#xE1;rios\nRodou em um blog para 5.000 visitantes &#xFA;nicos\nChegou a testar outras variantes al&#xE9;m destas\nChegou a testar usando &#x201C;por favor&#x201D;, mas n&#xE3;o rolou\n
Queria testar comandos para os usu&#xE1;rios\nRodou em um blog para 5.000 visitantes &#xFA;nicos\nChegou a testar outras variantes al&#xE9;m destas\nChegou a testar usando &#x201C;por favor&#x201D;, mas n&#xE3;o rolou\n
\n
600 participantes\nConseguiram 34% de aumento nas convers&#xF5;es\nClaro que se isso fosse no site do Bradesco n&#xE3;o traria resultado, pois a interface toda &#xE9; vermelha!\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Dicas para que voc&#xEA;s n&#xE3;o precisem fazer tantos Testes A/B\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
E se voc&#xEA; tiver fazendo um projeto para um cliente.\nEle vai ficar com essa cara a&#xED;..\n&#x201C;Caramba... como &#xE9; que ele consegue fazer isso!?&#x201D;\n