Alinhando o design às metricas e conversões

2,529
-1

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
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

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

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
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×