Your SlideShare is downloading. ×
Alinhando o design às metricas e conversões
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Alinhando o design às metricas e conversões

2,392
views

Published on

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 …

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.

Published in: Design

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,392
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
63
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \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 é uma página na web única que aparece como resposta ao clique em um anúncio.\nSe o seu objetivo é \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • A nõa ser que você seja mágico ou tenha uma bola de cristal.\nAssumir que você irá errar é 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 é papo pra outro evento né!\nIsso aqui é 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ários\nRodou em um blog para 5.000 visitantes únicos\nChegou a testar outras variantes além destas\nChegou a testar usando “por favor”, mas não rolou\n
  • Queria testar comandos para os usuários\nRodou em um blog para 5.000 visitantes únicos\nChegou a testar outras variantes além destas\nChegou a testar usando “por favor”, mas não rolou\n
  • Queria testar comandos para os usuários\nRodou em um blog para 5.000 visitantes únicos\nChegou a testar outras variantes além destas\nChegou a testar usando “por favor”, mas não rolou\n
  • Queria testar comandos para os usuários\nRodou em um blog para 5.000 visitantes únicos\nChegou a testar outras variantes além destas\nChegou a testar usando “por favor”, mas não rolou\n
  • \n
  • 600 participantes\nConseguiram 34% de aumento nas conversões\nClaro que se isso fosse no site do Bradesco não traria resultado, pois a interface toda é vermelha!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Dicas para que vocês nã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ê tiver fazendo um projeto para um cliente.\nEle vai ficar com essa cara aí..\n“Caramba... como é que ele consegue fazer isso!?”\n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Alinhando o design àsmétricas e conversões. Rafael Lima - @rafaelp
    • 2. Rafael Lima @rafaelpQual o objetivo de um website?
    • 3. Rafael Lima @rafaelp
    • 4. Rafael Lima @rafaelpEcommerce ?
    • 5. Rafael Lima @rafaelpEcommerce Vender
    • 6. Rafael Lima @rafaelpSite de Evento ?
    • 7. Rafael Lima @rafaelp Site de EventoCaptar Inscrições
    • 8. Rafael Lima @rafaelpEmpresa de Engenharia ?
    • 9. Rafael Lima @rafaelpEmpresa de EngenhariaReceber uma Ligação
    • 10. Rafael Lima @rafaelpAplicativo Web ?
    • 11. Rafael Lima @rafaelp Aplicativo WebSign-up no Sistema
    • 12. Rafael Lima @rafaelpSite de Restaurante ?
    • 13. Rafael Lima @rafaelpSite de RestaurantePedido de Delivery
    • 14. Rafael Lima @rafaelpBlog ?
    • 15. Rafael Lima @rafaelp BlogLer outro post
    • 16. Rafael Lima @rafaelpServiço de Design ?
    • 17. Rafael Lima @rafaelpServiço de DesignSolicitar cotação
    • 18. Rafael Lima @rafaelpTodo site deve terum objetivo bem definido
    • 19. Rafael Lima @rafaelpComo devo montar o site?
    • 20. Rafael Lima @rafaelp NOBig Design Up-Front
    • 21. Rafael Lima @rafaelpLanding Page
    • 22. Rafael Lima @rafaelp Landing Page• Chamada Principal• Pitch• Call to Action• Imagem/Foto do Resultado• Benefícios• Form Newsletter
    • 23. Rafael Lima @rafaelp
    • 24. Rafael Lima @rafaelp
    • 25. Rafael Lima @rafaelp
    • 26. Rafael Lima @rafaelp Só tem umprobleminha...
    • 27. Rafael Lima @rafaelp Você não vaiacertar de primeira :/
    • 28. Rafael Lima @rafaelp
    • 29. Rafael Lima @rafaelp Montar umaLanding Page não garante que o objetivo seja atingido
    • 30. Rafael Lima @rafaelpO 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 xLeads/Prospects x Clientes
    • 33. Rafael Lima @rafaelpFunil de Vendas
    • 34. Rafael Lima @rafaelpVISITANTES LEADS PROSPECTS CLIENTES
    • 35. Rafael Lima @rafaelpTaxa de Conversão
    • 36. Rafael Lima @rafaelp10.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 paraconverter o máximo de visitantes
    • 38. Rafael Lima @rafaelpComo mensuraresses números?
    • 39. Rafael Lima @rafaelp
    • 40. Rafael Lima @rafaelp
    • 41. Rafael Lima @rafaelpPageviews x Events
    • 42. Rafael Lima @rafaelp
    • 43. Rafael Lima @rafaelp
    • 44. Rafael Lima @rafaelp
    • 45. Rafael Lima @rafaelp
    • 46. Rafael Lima @rafaelp
    • 47. Rafael Lima @rafaelp
    • 48. Rafael Lima @rafaelp
    • 49. Rafael Lima @rafaelp
    • 50. Rafael Lima @rafaelp
    • 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>
    • 53. Rafael Lima @rafaelp
    • 54. Rafael Lima @rafaelp
    • 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ó paraJavascript. Pode serusado no back-end.
    • 57. Rafael Lima @rafaelp# account_observer.rbclass 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}) endend
    • 58. Rafael Lima @rafaelp# Gemfilesource "http://rubygems.org"gem rails, "3.0.3"gem mixpanel, 0.7.0# mixpanel_job.rbclass MixpanelJob < Struct.new(:event, :properties) def perform mixpanel = Mixpanel.new(ENV[MIXPANEL_TOKEN], {}) mixpanel.track_event(event, properties) endend
    • 59. Rafael Lima @rafaelp
    • 60. Rafael Lima @rafaelpSomente medir não resolve. Até agora demos apenas o primeiro passo.
    • 61. Rafael Lima @rafaelpComo melhorar as conversões?
    • 62. Rafael Lima @rafaelpTestes A/B(A/B Testing / Split Testing)
    • 63. Rafael Lima @rafaelphttp://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
    • 64. Rafael Lima @rafaelphttp://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
    • 65. Rafael Lima @rafaelphttp://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
    • 66. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
    • 67. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
    • 68. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
    • 69. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
    • 70. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
    • 71. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
    • 72. Rafael Lima @rafaelphttp://dmix.ca/2010/05/how-we-increased-our-conversion-rate-by-72/
    • 73. Rafael Lima @rafaelp
    • 74. Rafael Lima @rafaelp
    • 75. Rafael Lima @rafaelp
    • 76. Rafael Lima @rafaelp
    • 77. Rafael Lima @rafaelp
    • 78. Rafael Lima @rafaelp
    • 79. Rafael Lima @rafaelp
    • 80. Rafael Lima @rafaelp
    • 81. Rafael Lima @rafaelpEsta fase não acaba nunca. Você pode ficar eternamentefazendo testes A/B.
    • 82. Rafael Lima @rafaelpDicas 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
    • 84. Rafael Lima @rafaelp
    • 85. Rafael Lima @rafaelp
    • 86. Rafael Lima @rafaelp
    • 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
    • 88. Rafael Lima @rafaelp
    • 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
    • 90. Rafael Lima @rafaelp
    • 91. Rafael Lima @rafaelp Qual o percentualmédio de abandono de carrinho de compras?
    • 92. Rafael Lima @rafaelpA. 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 @rafaelpPara finalizar...
    • 95. Rafael Lima @rafaelp Recapitulando...1. Definir Objetivo2. Determinar Conversões3. Mensurar o Funil4. Realizar Testes A/B5. Adaptar o Site ...
    • 96. Rafael Lima @rafaelpSe coloque no lugar do usuário e use o seu site
    • 97. Rafael Lima @rafaelp
    • 98. Rafael Lima @rafaelpSucesso!
    • 99. Rafael Lima @rafaelpObrigado!
    • 100. Rafael Lima @rafaelp Obrigado!Pessoalhttp://twitter.com/rafaelphttp://rafael.adm.brBielSystemshttp://bielsystems.com.brWorkshop de EmpreendedorismoBootstrappershttp://bootstrappers.com.br/workshopStartup DEV
    • 101. Rafael Lima @rafaelp Referênciashttp://www.slideshare.net/EcommmerceSummit/42-ecommercesummithttp://www.marketingsherpa.com/content/?q=node/2973http://www.slideshare.net/rpanini/a-importncia-do-design-no-ecommercehttp://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