Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Alinhando o design às metricas e conversões

2,768 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 alguns passos como criação de uma Landing Page, Definição de Métricas, Tracking e Testes A/B.

Published in: Design
  • Be the first to comment

Alinhando o design às metricas e conversões

  1. 1. Alinhando o design àsmétricas e conversões. Rafael Lima - @rafaelp
  2. 2. Rafael Lima @rafaelpQual o objetivo de um website?
  3. 3. Rafael Lima @rafaelp
  4. 4. Rafael Lima @rafaelpEcommerce ?
  5. 5. Rafael Lima @rafaelpEcommerce Vender
  6. 6. Rafael Lima @rafaelpSite de Evento ?
  7. 7. Rafael Lima @rafaelp Site de EventoCaptar Inscrições
  8. 8. Rafael Lima @rafaelpEmpresa de Engenharia ?
  9. 9. Rafael Lima @rafaelpEmpresa de EngenhariaReceber uma Ligação
  10. 10. Rafael Lima @rafaelpAplicativo Web ?
  11. 11. Rafael Lima @rafaelp Aplicativo WebSign-up no Sistema
  12. 12. Rafael Lima @rafaelpSite de Restaurante ?
  13. 13. Rafael Lima @rafaelpSite de RestaurantePedido de Delivery
  14. 14. Rafael Lima @rafaelpBlog ?
  15. 15. Rafael Lima @rafaelp BlogLer outro post
  16. 16. Rafael Lima @rafaelpServiço de Design ?
  17. 17. Rafael Lima @rafaelpServiço de DesignSolicitar cotação
  18. 18. Rafael Lima @rafaelpTodo site deve terum objetivo bem definido
  19. 19. Rafael Lima @rafaelpComo devo montar o site?
  20. 20. Rafael Lima @rafaelp NOBig Design Up-Front
  21. 21. Rafael Lima @rafaelpLanding Page
  22. 22. Rafael Lima @rafaelp Landing Page• Chamada Principal• Pitch• Call to Action• Imagem/Foto do Resultado• Benefícios• Form Newsletter
  23. 23. Rafael Lima @rafaelp
  24. 24. Rafael Lima @rafaelp
  25. 25. Rafael Lima @rafaelp
  26. 26. Rafael Lima @rafaelp Só tem umprobleminha...
  27. 27. Rafael Lima @rafaelp Você não vaiacertar de primeira :/
  28. 28. Rafael Lima @rafaelp
  29. 29. Rafael Lima @rafaelp Montar umaLanding Page não garante que o objetivo seja atingido
  30. 30. Rafael Lima @rafaelpO que devo saber para atingir o objetivo, então?
  31. 31. Rafael Lima @rafaelp Conceitos• Visitantes• Leads• Prospects• Clientes• Funil de Vendas• Taxa de Conversão
  32. 32. Rafael Lima @rafaelp Visitantes xLeads/Prospects x Clientes
  33. 33. Rafael Lima @rafaelpFunil de Vendas
  34. 34. Rafael Lima @rafaelpVISITANTES LEADS PROSPECTS CLIENTES
  35. 35. Rafael Lima @rafaelpTaxa de Conversão
  36. 36. Rafael Lima @rafaelp10.000 VISITANTES 1.000 INSCRITOS } TC = 500/10.000 = 25 PAGANTES } TC = 25/500 = 2,5%
  37. 37. Rafael Lima @rafaelp O design aplicado no front-end deve ser feito paraconverter o máximo de visitantes
  38. 38. Rafael Lima @rafaelpComo mensuraresses números?
  39. 39. Rafael Lima @rafaelp
  40. 40. Rafael Lima @rafaelp
  41. 41. Rafael Lima @rafaelpPageviews x Events
  42. 42. Rafael Lima @rafaelp
  43. 43. Rafael Lima @rafaelp
  44. 44. Rafael Lima @rafaelp
  45. 45. Rafael Lima @rafaelp
  46. 46. Rafael Lima @rafaelp
  47. 47. Rafael Lima @rafaelp
  48. 48. Rafael Lima @rafaelp
  49. 49. Rafael Lima @rafaelp
  50. 50. Rafael Lima @rafaelp
  51. 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. 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. 53. Rafael Lima @rafaelp
  54. 54. Rafael Lima @rafaelp
  55. 55. Rafael Lima @rafaelp<script type="text/javascript">//<![CDATA[mpq.push(["track", "homepage"]);$("#video-preview").click(function() { mpq.push(["track", "video"]);});//]]></script>
  56. 56. Rafael Lima @rafaelp Não é só paraJavascript. Pode serusado no back-end.
  57. 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. 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. 59. Rafael Lima @rafaelp
  60. 60. Rafael Lima @rafaelpSomente medir não resolve. Até agora demos apenas o primeiro passo.
  61. 61. Rafael Lima @rafaelpComo melhorar as conversões?
  62. 62. Rafael Lima @rafaelpTestes A/B(A/B Testing / Split Testing)
  63. 63. Rafael Lima @rafaelphttp://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
  64. 64. Rafael Lima @rafaelphttp://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
  65. 65. Rafael Lima @rafaelphttp://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page
  66. 66. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
  67. 67. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
  68. 68. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
  69. 69. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
  70. 70. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
  71. 71. Rafael Lima @rafaelphttp://www.dustincurtis.com/you_should_follow_me_on_twitter.html
  72. 72. Rafael Lima @rafaelphttp://dmix.ca/2010/05/how-we-increased-our-conversion-rate-by-72/
  73. 73. Rafael Lima @rafaelp
  74. 74. Rafael Lima @rafaelp
  75. 75. Rafael Lima @rafaelp
  76. 76. Rafael Lima @rafaelp
  77. 77. Rafael Lima @rafaelp
  78. 78. Rafael Lima @rafaelp
  79. 79. Rafael Lima @rafaelp
  80. 80. Rafael Lima @rafaelp
  81. 81. Rafael Lima @rafaelpEsta fase não acaba nunca. Você pode ficar eternamentefazendo testes A/B.
  82. 82. Rafael Lima @rafaelpDicas Práticas
  83. 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. 84. Rafael Lima @rafaelp
  85. 85. Rafael Lima @rafaelp
  86. 86. Rafael Lima @rafaelp
  87. 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. 88. Rafael Lima @rafaelp
  89. 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. 90. Rafael Lima @rafaelp
  91. 91. Rafael Lima @rafaelp Qual o percentualmédio de abandono de carrinho de compras?
  92. 92. Rafael Lima @rafaelpA. 27%B. 59%C. 36%D. 15%
  93. 93. Rafael Lima @rafaelp A. 27% B. 59% C. 36% D. 15%MarketingSherpa Ecommerce Study, 2006
  94. 94. Rafael Lima @rafaelpPara finalizar...
  95. 95. Rafael Lima @rafaelp Recapitulando...1. Definir Objetivo2. Determinar Conversões3. Mensurar o Funil4. Realizar Testes A/B5. Adaptar o Site ...
  96. 96. Rafael Lima @rafaelpSe coloque no lugar do usuário e use o seu site
  97. 97. Rafael Lima @rafaelp
  98. 98. Rafael Lima @rafaelpSucesso!
  99. 99. Rafael Lima @rafaelpObrigado!
  100. 100. Rafael Lima @rafaelp Obrigado!Pessoalhttp://twitter.com/rafaelphttp://rafael.adm.brBielSystemshttp://bielsystems.com.brWorkshop de EmpreendedorismoBootstrappershttp://bootstrappers.com.br/workshopStartup DEV
  101. 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. 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

×