Alinhando o design às metricas e conversões
•Transferir como KEY, PDF•
12 gostaram•773 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Alinhando o design às metricas e conversões
- 1. Alinhando o design às métricas e conversões. Rafael Lima - @rafaelp
- 2. Rafael Lima @rafaelp Qual o objetivo de um website?
- 4. Rafael Lima @rafaelp Ecommerce ?
- 5. Rafael Lima @rafaelp Ecommerce Vender
- 6. Rafael Lima @rafaelp Site de Evento ?
- 7. Rafael Lima @rafaelp Site de Evento Captar Inscrições
- 8. Rafael Lima @rafaelp Empresa de Engenharia ?
- 9. Rafael Lima @rafaelp Empresa de Engenharia Receber uma Ligação
- 10. Rafael Lima @rafaelp Aplicativo Web ?
- 11. Rafael Lima @rafaelp Aplicativo Web Sign-up no Sistema
- 12. Rafael Lima @rafaelp Site de Restaurante ?
- 13. Rafael Lima @rafaelp Site de Restaurante Pedido de Delivery
- 14. Rafael Lima @rafaelp Blog ?
- 15. Rafael Lima @rafaelp Blog Ler outro post
- 16. Rafael Lima @rafaelp Serviço de Design ?
- 17. Rafael Lima @rafaelp Serviço de Design Solicitar cotação
- 18. Rafael Lima @rafaelp Todo site deve ter um objetivo bem definido
- 19. Rafael Lima @rafaelp Como devo montar o site?
- 20. Rafael Lima @rafaelp NO Big Design Up-Front
- 21. Rafael Lima @rafaelp Landing Page
- 22. Rafael Lima @rafaelp Landing Page • Chamada Principal • Pitch • Call to Action • Imagem/Foto do Resultado • Benefícios • Form Newsletter
- 26. Rafael Lima @rafaelp Só tem um probleminha...
- 27. Rafael Lima @rafaelp Você não vai acertar de primeira :/
- 29. Rafael Lima @rafaelp Montar uma Landing Page não garante que o objetivo seja atingido
- 30. Rafael Lima @rafaelp O que devo saber para atingir o objetivo, então?
- 31. Rafael Lima @rafaelp Conceitos • Visitantes • Leads • Prospects • Clientes • Funil de Vendas • Taxa de Conversão
- 32. Rafael Lima @rafaelp Visitantes x Leads/Prospects x Clientes
- 33. Rafael Lima @rafaelp Funil de Vendas
- 34. Rafael Lima @rafaelp VISITANTES LEADS PROSPECTS CLIENTES
- 35. Rafael Lima @rafaelp Taxa de Conversão
- 36. Rafael Lima @rafaelp 10.000 VISITANTES 1.000 INSCRITOS } TC = 500/10.000 = 25 PAGANTES } TC = 25/500 = 2,5%
- 37. Rafael Lima @rafaelp O design aplicado no front-end deve ser feito para converter o máximo de visitantes
- 38. Rafael Lima @rafaelp Como mensurar esses números?
- 41. Rafael Lima @rafaelp Pageviews x Events
- 51. Rafael Lima @rafaelp <script type="text/javascript"> //<![CDATA[ var mpq = []; mpq.push(["init", "XXXXXXXXXXXXXXXXXXX"]); (function() { var mp = document.createElement("script"); mp.type = "text/javascript"; mp.async = true; mp.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + "// api.mixpanel.com/site_media/js/api/mixpanel.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mp, s); })(); //]]> </script>
- 52. Rafael Lima @rafaelp <script type="text/javascript"> //<![CDATA[ mpq.push(['set_config', {'test': false}]) mixpanel_distinct_id = get_visitor_guid(); mpq.push(['register_once', {'distinct_id': mixpanel_distinct_id}, 'all', "False", 31]) //]]> </script> <script type="text/javascript"> //<![CDATA[ mpq.push(['track', 'visited new account', {}]); //]]> </script>
- 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
- 60. Rafael Lima @rafaelp Somente medir não resolve. Até agora demos apenas o primeiro passo.
- 61. Rafael Lima @rafaelp Como melhorar as conversões?
- 62. Rafael Lima @rafaelp Testes A/B (A/B Testing / Split Testing)
- 63. Rafael Lima @rafaelp http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
- 64. Rafael Lima @rafaelp http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
- 65. Rafael Lima @rafaelp http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
- 66. Rafael Lima @rafaelp http://www.dustincurtis.com/you_should_follow_me_on_twitter.html
- 67. Rafael Lima @rafaelp http://www.dustincurtis.com/you_should_follow_me_on_twitter.html
- 68. Rafael Lima @rafaelp http://www.dustincurtis.com/you_should_follow_me_on_twitter.html
- 69. Rafael Lima @rafaelp http://www.dustincurtis.com/you_should_follow_me_on_twitter.html
- 70. Rafael Lima @rafaelp http://www.dustincurtis.com/you_should_follow_me_on_twitter.html
- 71. Rafael Lima @rafaelp http://www.dustincurtis.com/you_should_follow_me_on_twitter.html
- 72. Rafael Lima @rafaelp http://dmix.ca/2010/05/how-we-increased-our-conversion-rate-by-72/
- 81. Rafael Lima @rafaelp Esta fase não acaba nunca. Você pode ficar eternamente fazendo testes A/B.
- 82. Rafael Lima @rafaelp Dicas Práticas
- 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
- 91. Rafael Lima @rafaelp Qual o percentual médio de abandono de carrinho de compras?
- 92. Rafael Lima @rafaelp A. 27% B. 59% C. 36% D. 15%
- 93. Rafael Lima @rafaelp A. 27% B. 59% C. 36% D. 15% MarketingSherpa Ecommerce Study, 2006
- 94. Rafael Lima @rafaelp Para finalizar...
- 95. Rafael Lima @rafaelp Recapitulando... 1. Definir Objetivo 2. Determinar Conversões 3. Mensurar o Funil 4. Realizar Testes A/B 5. Adaptar o Site ...
- 96. Rafael Lima @rafaelp Se coloque no lugar do usuário e use o seu site
- 98. Rafael Lima @rafaelp Sucesso!
- 99. Rafael Lima @rafaelp Obrigado!
- 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
- \n
- \n
- \n
- \n