O documento discute como o trabalho do time de front-end pode impactar os resultados financeiros de uma empresa através da melhoria da performance, produtividade e testes A/B. Algumas otimizações como redução do tempo de carregamento das páginas e melhorias na experiência do usuário podem levar a aumentos significativos no tráfego e conversões. É importante medir os KPIs relevantes para orientar as melhorias com base em dados.

1. ROI no front-end
vamos pensar em lucro?

3. Guilherme Serrano
Bacharel em Desenho Industrial (ULBRA)
Pós graduado em Gestão Empreendedora (SENAC)
Empreendedor
Programador

5. EXPERIÊNCIAS

14. ROI no front-end

15. LUCRO E ROI

17. ROI
também é responsabilidade
do time de desenvolvimento?

19. UX
a experiência do usuário

20. Nós não temos um time de UX. Se o
problema com o seu serviço é que os
servidores estão lentos e o time de UX
não consegue atuar nisso, então eles
não estão no controle da experiência do
usuário e não deveriam ser chamados de
time de UX.
"
What’s the design process at Government Digital Service?

21. E o front-end?

22. 1. PERFORMANCE

23. Cada 100ms de latência custa
para a Amazon 1% em vendas.
"
Greg Linden - Make Data Useful

24. Para o Google, 500ms a mais
para exibir o resultado de busca
significa uma queda de 20% de
tráfego.
"
Greg Linden - Make Data Useful

25. 100 bilhões de buscas / mês (2014)
20% menos de trafego
20% menos de ads exibidas

26. - tempo de resposta
=
+ ROI

27. Users really respond to speed. "
Marissa Mayer - Google VP

28. Latência importa!

29. Onde otimizar?

30. Entre 80% e 90% do tempo de
resposta é gasto no front-end
"
The performance gold rule, Steve Souders

31. The performance gold rule, Steve Souders

32. Mas "front-end"
não é apenas código

33. Google
Renderizar 10 resultados: 0,4s
Renderizar 30 resultados: 0,9s
Marissa Mayer - Google VP

34. Google
Renderizar 10 resultados: 0,4s
Renderizar 30 resultados: 0,9s
Alterar o número de respostas não é uma
otimização "de código"

35. Qual o time entende
de repaint / reflow?

36. Quem sabe mensurar
o tempo de renderização?

37. EFEITO
COLATERAL
redução do consumo de tráfego

38. UOL
42,4 milhões usuários/mês
991,4 bilhão pageviews/mês
Mídia KIT UOL

39. OTIMIZAÇÃO DE ~20Kb
848Gb de transferência economizados

40. REFLOW / REPAINT

41. FERRAMENTAS
para performance

42. - PageSpeed
- Browser Diet
- JS Perf
- GruntJS
- Minimizar redraw e reflow
- Otimização de imagens*
- Smush it
- ImageOptim
- Cache do navegador*
- Proponha e teste melhorias*
*Nem sempre no controle do front-end

44. AA rraaiizz ddee ttooddoo oo mmaall!!

45. 2. PRODUTIVIDADE

46. + produtividade
=
+ tempo para estudar, café, ócio
criativo…
=
+ produtividade

47. 50% do tempo de um programador
é gasto com refação
"
The ROI of User Experience, Susan Weinschenk

49. O custo de arrumar um erro antes do
desenvolvimento é 100 vezes menor
do que arrumar depois de
desenvolvido
"
The ROI of User Experience, Susan Weinschenk

51. ESPECIFICAÇÕES
de forma clara

52. COMUNICAÇÃO
com todo o time

53. REUSO
qualidade do código
modularização

54. FERRAMENTAS
E
FRAMEWORKS

55. Faça da melhor
maneira possível

56. METODOLOGIAS
GTD, inbox zero, scrum,
mandinga, meditação, pomodoro...
Teste o que funciona com você e seu time

57. Pense no framework como os foguetes de
lançamento de um ônibus espacial, quando o
objetivo for alcançado, não passarão de
sucata, um belo peso extra.
"
Scrum: seu time já deveria estar em outra, @jcemer

59. 3. TESTE A/B

61. Porque as coisas são
como as coisas são?

62. Data-driven
design / development

63. O USUÁRIO DECIDE

64. HiPPO
High paid person opinion

65. ACHISMO
e as vezes o ego
Tomam a decisão

66. 1 - A HIPÓTESE
o que será testado?

67. Foto por @torresfelipe

68. 2 - FLIP COIN
original vs variante

70. 3 - ANÁLISE DE DADOS
qual foi o resultado?

72. A opção que performa melhor se
torna a original

73. PIECE OF CAKE!
Foto por @torresfelipe

74. VOLTE PARA O PASSO 1
Crie uma nova variante

75. Tudo deve ser testado
nunca há regressão de performance

76. correlação
e
causalidade

78. KPIs

79. O que não é mensurado
não pode ser otimizado

80. AUMENTO DE PAGEVIEWS

81. CAPTURA DE DADOS

82. INTERAÇÃO SOCIAL

83. CADASTRO DE USUÁRIO

84. VENDAS

85. AFUNILAMENTO DE FUNIL

86. REDUÇÃO DE CHAMADOS
NO SUPORTE

87. REDUÇÃO DE TEMPO
PARA EXECUTAR TAREFAS

88. RETENÇÃO DE USUÁRIO

89. CASES

90. CAREER POINT COLLEGE

92. Career Point College
Hipótese
Remover o primeiro nível de navegação e colocar o formulário "acima da
dobra" vai aumentar as submissões
O que foi testado
Submissões do formulário
Resultado
336% do aumento da conversão

93. Shirtnator
Informações
Site com versão mobile e versão desktop
A versão mobile não era otimizada para tablets - todos os usuários de
tablet eram direcionados para versão mobile
O que foi testado
Conversão e faturamento do site desktop no tablet
Conversão e faturamento do site mobile no tablet
Resultado
32% a mais de vendas na versão desktop
71,81% a mais de faturamento na versão desktop

94. NeilPatel #1
Informações
Na landing page tinha um formulário para captação de dados de
leadings, com 4 campos: nome, e-mail, site e faturamento.
O que foi testado
Troca do campo "faturamento" por um campo aberto "como podemos
ajudar?"
Resultado
Inconclusivo

96. NeilPatel #2
Informações
Na landing page tinha um formulário para captação de dados de
leadings, com 4 campos: nome, e-mail, site e faturamento.
O que foi testado
Remoção do campo faturamento, deixando o form com apenas 3
campos.
Resultado
Aumento de 26% no cadastro

97. Viver de Blog
Informações
Landingpage com captação de e-mail para acesso a conteúdo.
O que foi testado
Captura de e-mails na original e na variante.
Na variante foi adicionado uma imagem de uma seta vermelha.

99. Viver de Blog
Informações
Landingpage com captação de e-mail para acesso a conteúdo.
O que foi testado
Captura de e-mails na original e na variante.
Na variante foi adicionado uma imagem de uma seta vermelha.
Resultado
10% a mais de conversão na variante

100. NETFLIX
Optimizely Blog

102. + retenção
+ engajamento

104. Teste de hover

105. + 15% de cliques
=
+ entradas no funil de conversão

110. $(".list-products").addClass("hover-red");

113. window['optimizely'].
push(["bucketVisitor", experimentId,
variationIndex]);

114. OBRIGADO!
eucompraria.com.br
Guilherme Serrano
@gserrano