Growth-Driven Design: Web design enxuto, focado em resultados

Seu site é a peça central de suas atividades de marketing e seu "vendedor 24h". No entanto, a maneira com que lidamos tradicionalmente com web design gera riscos desnecessários e desperdiça oportunidades de melhoria.

Growth-Driven Design é um movimento de reação ao modo como fazemos sites hoje em dia e uma metodologia completa para alcançar resultados máximos com seu site.

Transcript

1. Growth-Driven Design: Web design enxuto, focado em resultados
2. Vitor Paladini Desenvolvedor WordPress Colaborador HUG Rio e WP RIO Aluno de Artes Visuais na UERJ
4. “ “Technology, consumers, and companies are changing at an accelerating rate. This is why we're seeing that the world's best designers are constantly experimenting with users, iterating on their designs, and learning about their audience.” Austin Knight - Senior UX Designer, Speaker, and Author at HubSpot
5. COMO SITES SÃO FEITOS HOJE EM DIA? SPOILER: Dá um trabalhão e nem sempre acaba bem.
6. TERMO DE ACEITE E DEFINIÇÃO DE ESCOPO
7. CONTEÚDO E ARQUITETURA
8. LAYOUT DAS TELAS
9. DESENVOLVIMENTO
10. PUBLICAÇÃO
11. DESENVOLVIMENTO TRADICIONAL É COMO UMA CACHOEIRA Linear, arriscado e segue sempre o mesmo fluxo.
12. INVESTE-SE MUITO TEMPO E DINHEIRO DE UMA SÓ VEZ...
13. NUM SITE QUE PODE FICAR ANOS PARADO SEM NENHUMA ATUALIZAÇÃO!
14. Desenvolvimento Tradicional 2 Anos 3 Meses de Redesign SITE SITE 2 Anos 3 Meses de Redesign Impacto Tempo SITE
15. O QUÃO IMPORTANTE É O SITE DA SUA EMPRESA?
16. O SEU SITE É O SEU VENDEDOR 24H
17. 2 Anos SITE 3 Meses de Redesign Desenvolvimento Tradicional
18. QUAL A PRIMEIRA EMOÇÃO QUE VEM NA SUA CABEÇA QUANDO O ASSUNTO É REDESIGN DE WEBSITES?
19. Dados baseados em pesquisa conduzida pela HubSpot em 2016
20. Dados baseados em pesquisa conduzida pela HubSpot em 2016
21. Dados baseados em pesquisa conduzida pela HubSpot em 2016
22. O DESENVOLVIMENTO TRADICIONAL DE SITES ESTÁ QUEBRADO
23. “MAS O QUE EU DEVERIA FAZER ENTÃO?”
24. UMA MANEIRA MAIS INTELIGENTE DE FAZER SITES QUE: • REDUZ RETRABALHO E DORES DE CABEÇA • MAXIMA RESULTADOS • COMPARTILHA APRENDIZADO
25. VAMOS VER COMO FUNCIONA
26. Desenvolver uma compreensão empatética dos usuários e como o site se relaciona com a vida deles. OBJETIVO: Brainstormar uma wish list de elementos que adicionam valor ao site e resolvem problemas de usuários. O ideal aqui é entre 75-200 itens. ESTRATÉGIA METAS | PERSONAS | SUPOSIÇÕES FUNDAMENTAIS | MAPEAMENTO DE JORNADA ESTRATÉGIA GLOBAL | WISH LIST
27. EXEMPLO DE WISH LIST ELEMENTOS Usar tema pronto 6 Hospedagem gerenciada 7 Mega menu customizado 4 Compativel com IE8 3 ... PÁGINAS/SEÇÕES Parceiros 5 Fórum de suporte 8 Página Quem Somos 4 Página Carreiras 10 Landing Consultoria 9 Blog 8 Tabela comparativa 7 … FUNCIONALIDADES Mobile click-to-call 3 Calculadora de preço 9 Home personalizada 8 Mobile Text Updates 4 Chat de vendas 7 “Seguir” outros usuários 2 Lembretes de re-order 8 … OUTROS Integração com CRM 9 Password Sync 4 Equipe precisa editar tudo com facilidade 8 ... Impacto #
28. Construir um site com apenas os elementos absolutamente necessários e relevantes. E que seja melhor que o site atual. OBJETIVO: Lançar rapidamente para que possamos coletar informações dos usuários e tomar decisões melhor embasadas. LAUNCH PAD WEBSITE PRIORIZAR WISH LIST REFINAR APROXIMAÇÃO INVESTIR EM EFICIÊNCIA INTERNA
29. FASE 1: FUNDAÇÃO LAUNCH PAD WEBSITE ESTRATÉGIA LAUNCH PAD WEBSITE
30. LAUNCH PAD FOI PRO AR!
31. MAS COMO SABER QUE DIREÇÃO TOMAR?
32. ESTRATÉGIA LAUNCH PAD WEBSITE MELHORIA CONTINUADA FEEDBACK REAL DE USUÁRIOS | ITENS DE ALTO IMPACTO | ITERAÇÃO CONSTANTE DO LAUNCH PAD
33. HIERARQUIA DE WEBSITES Um guia de como construir um site de performance máxima: 1. Dar foco ao projeto 2. Alinhar expectativas 3. Medir metas e progressos atraves de uma metrica foco MELHORIA CONTINUADA
34. OBJETIVO: Fluxo constante, previsivel e sustentavel de novos visitantes. Metrica foco: Visitantes unicos/mes. Audiência MELHORIA CONTINUADA
35. https://www.netflix.com/br/
36. Valor Audiência MELHORIA CONTINUADA OBJETIVO: Resolver dores (problemas) dos usuarios. Metrica foco: Quao util? 1/10.
37. http://www.climatempo.com.br/previsao-do-tempo/cidade/321/riodejaneiro-rj/
38. Usabilidade Valor Audiência MELHORIA CONTINUADA OBJETIVO: Intuitividade e facilidade no uso. Metrica foco: Acompanhamento de determinada tarefa.
39. https://www.uber.com/?exp=hp-c
40. Otimização de Conversão Usabilidade Valor Audiência MELHORIA CONTINUADA OBJETIVO: Reduzir fricçao do funil. Metrica foco: % de topo -> fundo
41. https://www.uber.com/a/join/
42. Aderência Otimização de Conversão Usabilidade Valor Audiência MELHORIA CONTINUADA OBJETIVO: Usuarios retornam ao site. Metrica foco: Razão visitantes únicos/recorrentes/pageview
43. https://www.buzzfeed.com/maceyjforonda/literalmente-apenas-20-animais-de-estimaeao-usando
44. https://www.buzzfeed.com/maceyjforonda/literalmente-apenas-20-animais-de-estimaeao-usando
45. https://www.buzzfeed.com/maceyjforonda/literalmente-apenas-20-animais-de-estimaeao-usando
46. https://www.buzzfeed.com/maceyjforonda/literalmente-apenas-20-animais-de-estimaeao-usando
47. Personalização Aderência Otimização de Conversão Usabilidade Valor Audiência MELHORIA CONTINUADA OBJETIVO: Customizar para usuarios especificos. Metrica foco: (revisitar outras mf).
48. https://www.amazon.com.br/ (Anônimo)
49. https://www.amazon.com.br/ (Olá, Vitor)
50. Recursos Extras Personalização Aderência Otimização de Conversão Usabilidade Valor Audiência MELHORIA CONTINUADA OBJETIVO: Desenvolver recursos tao valiosos que os usuarios do site pagariam para usar Metrica foco: geracao leads qualificados.
51. https://website.grader.com/
52. http://www.hubspot.com/email-signature-generator/
53. Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Usabilidade Valor Audiência MELHORIA CONTINUADA OBJETIVO: Visitantes trazerem visitantes. Métrica foco: recorrência e visitantes únicos.
54. Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Usabilidade Valor Audiência MELHORIA CONTINUADA HIERARQUIA DE WEBSITES Um guia de como construir um site de performance máxima: 1. Dar foco ao projeto 2. Alinhar expectativas 3. Medir metas e progressos atraves de uma metrica foco
55. O CICLO DE MELHORIA CONTINUADA
56. PLANEJAR 1. Determine em que passo da hierarquia de websites você está (baseado na sua performance). MÉTRICA FOCO: Uma única métrica que funciona como indicador direto de quão perto estamos da nossa meta. Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Usabilidade Valor Audiência MELHORIA CONTINUADA PLANEJAR
57. ALTO IMPACTO Itens de Ação 01, 05, 09 BAIXO IMPACTO Itens de Ação 04, 06, 08, 10, 12, 13, 14 ... MÉDIO IMPACTO Itens de Ação 02, 03, 07, 11, 15
58. Hipótese “Para a [Maria do Marketing] visitando a página [Contato], acreditamos que mudar [banner do topo] para [uma opção com botão de chat online] irá [aumentar os pedidos de orçamento em 5%]” “Acreditamos que isso seja verdade com base em [determinado experimento realizado]” ALTO IMPACTO ITEM DE AÇÃO 01
59. CONSTRUIR 2. Todos no time irão se dedicar e trabalhar juntos para: 2.1 Implementar os itens de ação de alto impacto. 2.2 Aplicar experimentos para testar impacto Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Valor Audiência MELHORIA CONTINUADA Usabilidade PLANEJAR CONSTRUIR
60. APRENDER 3. Depois de rodar os experimentos o seu time vai dar um passo para trás e olhar a figura como um todo: 3.1 Rever resultados 3.2 O que aprendemos? 3.3 Publicar Descobertas Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Valor Audiência MELHORIA CONTINUADA Usabilidade PLANEJAR CONSTRUIR APRENDER
61. TRANSFERIR 4. Coloborar com outros departamentos da empresa/cliente. 4.1 Compartilhar aprendizados 4.2 Criar recomendações 4.3 Fazer perguntas Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Valor Audiência MELHORIA CONTINUADA Usabilidade PLAN. CONST. APREN. TRANSF.
62. REPETIR O CICLO Otimize cada etapa da hierarquia de sites GDD. Repita o ciclo Continue a desenvolver itens de ação Alcance o teto da sua métrica foco Avance para o póximo passo da hierarquia Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Valor Audiência MELHORIA CONTINUADA Usabilidade PLAN. CONST. APREN. TRANSF.
63. ESTRATÉGIA
64. ESTRATÉGIA LAUNCH PAD WEBSITE
65. ESTRATÉGIA LAUNCH PAD WEBSITE Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Valor Audiência MELHORIA CONTINUADA Usabilidade
66. ESTRATÉGIA LAUNCH PAD WEBSITE Influenciadores Recursos Extras Personalização Aderência Otimização de Conversão Valor Audiência MELHORIA CONTINUADA Usabilidade PLAN. CONST. APREN. TRANSF.
67. Desenvolvimento Tradicional 2 Anos 3 Meses de Redesign SITE SITE 2 Anos 3 Meses de Redesign Impacto Tempo SITE
68. Desenvolvimento Tradicional vs. 2 Anos 3 Meses de Redesign SITE SITE 2 Anos 3 Meses de Redesign Impacto Tempo SITE
69. Desenvolvimento Tradicional vs. 2 Anos 3 Meses de Redesign SITE SITE 2 Anos 3 Meses de Redesign Impacto Tempo SITE
70. Desenvolvimento Tradicional vs. M ARKETING & VENDAS 2 Anos 3 Meses de Redesign SITE SITE 2 Anos 3 Meses de Redesign Impacto Tempo SITE
71. Alto custo inicial Muitos recursos e tempo Baseado em suposições (fora de escopo, fora de orçamento, entrega atrasada) Parado por 2 anos ou mais WEB DESIGN TRADICIONAL GROWTH-DRIVEN DESIGN Investimento distribuido Lançar rápido e otimizar Baseado em dados (ágil, on time & on budget) Melhoria continuada
72. “ "The web is not static; it is dynamic, alive, and ever-changing. This is precisely why experimentation and iteration are so important in modern design." Austin Knight - Senior UX Designer, Speaker, and Author at HubSpot
73. Visite: http://growthdrivendesign.com/ - Curso de aprofundamento em GDD. - Curso de certificação em GDD para agências. - Recursos, documentos e ferramentas. - Tudo grátis e em inglês. Blog em português de GDD: - https://paladini.in/ FAÇA PARTE DO MOVIMENTO GDD
74. OBRIGADO! Vitor Paladini - vitor@paladini.in
75. 1. Conteúdo adaptado e traduzido de “What is GDD” por Luke Summerfield. 2. Austin Knight pelas quotes e feedback. 3. Marina presentation template por Slides Carnival. 4. Imagens (por ordem de exibição): 4.1. Roger Steinbacher @ https://unsplash.com/photos/CB6rBauoCg4 4.2. Rohit Tandon @ https://unsplash.com/photos/9wg5jCEPBsw 4.3. Tim Gouw @ https://unsplash.com/photos/_8gWAP_GRzk 4.4. Jan Erik Waider @ https://unsplash.com/photos/Kc3meWFta9w 4.5. Jeff Sheldon @ https://unsplash.com/photos/sD--EGHBvqw 4.6. Jesse Bowser @ https://unsplash.com/photos/kDj82KFbRvU 4.7. Cierra Woodard @ https://unsplash.com/photos/-CVg4toX4dc 4.8. Cosmic Timetraveler @ https://unsplash.com/photos/jQvOExlroYA 4.9. Josefa Holland-Merten @ https://unsplash.com/photos/xBYD4tt8ANo 4.10. Danka & Peter @ https://unsplash.com/photos/iBFBdFHVxeY 4.11. Luke Pamer @ https://unsplash.com/photos/KBpnPk44tOA 4.12. Andrej Chudy @ https://unsplash.com/photos/Zs8UQzAF8Ko 4.13. NASA @ https://unsplash.com/photos/Yj1M5riCKk4 4.14. Igor Ovsyannykov @ https://unsplash.com/photos/_HZxAiydBa8 CRÉDITOS E AGRADECIMENTOS