Eduardo Shiota, Booking.com, fala sobre Desenvolvendo um front-end para 224 países e mais de 40 línguas no Fórum E-Commerce Brasil 2016. Saiba mais em https://www.ecommercebrasil.com.br/forum2016

1. Desenvolvendo um Front-end para
224 países e mais de 40 línguas
Eduardo Shiota

2. Eduardo Shiota Eduardo Shiota
contato@eshiota.com
@shiota

3. Eduardo Shiota

4. Eduardo Shiota

5. Eduardo Shiota

6. Eduardo Shiota
(we’re hiring)

7. Eduardo Shiota
Como desenvolvemos um
front-end para 224 países e
mais de 40 línguas

8. Eduardo Shiota
Qual é o papel do front-end
developer em um e-commerce?

9. Eduardo Shiota

10. Eduardo Shiota

11. Eduardo Shiota

12. Eduardo Shiota
Essa história é apenas uma entre
milhares de outras similares.

13. Eduardo Shiota
Todos têm sua parcela de culpa.

14. Eduardo Shiota

15. Eduardo Shiota

16. Eduardo Shiota
Localização
Experimentação
Monitoramento
Performance
Empoderamento
Continuous Improvement

17. Eduardo Shiota
Localização e
Internacionalização

18. Eduardo Shiota
40+ linguas
50 moedas
2000+ combinações

19. Eduardo Shiota
Pequenos detalhes podem fazer a
diferença para diferentes países.

20. Eduardo Shiota

21. Eduardo Shiota
A implementação do HTML e CSS
precisa funcionar em todos os
casos.

22. Eduardo Shiota

23. Eduardo Shiota

24. Eduardo Shiota
Alguns termos podem quebrar o
layout em diferentes línguas.

25. Eduardo Shiota

26. Eduardo Shiota

27. Eduardo Shiota
Dependendo da economia de um
país, você pode ter problemas no
layout.

28. Eduardo Shiota
€ 90,00
R$ 325,50
¥ 10,470.04
$ 98.96

29. Eduardo Shiota
1.299.923,02rp

30. Eduardo Shiota
Precisamos entender e incorporar a
cultura do usuário.

31. Eduardo Shiota

32. Eduardo Shiota

33. Eduardo Shiota

34. Eduardo Shiota
“If you talk to a man in a language
he understands, that goes to his
head. If you talk to him in his
language, that goes to his heart.”
— Nelson Mandela

35. Eduardo Shiota
Experimentação

36. Eduardo Shiota

37. Eduardo Shiota
Comprar
Comprar
vs

38. Eduardo Shiota
Comprar
Comprar
if track(my_experiment)
50%
50%

39. Eduardo Shiota
Comprar
Comprar
Usuário logado ou não
Língua/moeda
País de origem
Browser/OS/Device
…
Produtos visitados
Flow de navegação
Opções de busca
Erros de validação
…
Estado/cidade da compra
Tipo de pagamento
Chamadas ao SAC
Cancelamentos
…
Tempo de carregamento
Wallclock/CPU
Número de queries
Erros server/client-side
…

40. Eduardo Shiota
Comprar Comprar
Duração: 14 dias
Visitantes: 45.140 (22.570 por
variante)
Número de compras
Ticket médio
339 (1.5%) 407 (1.8%)
+20%
R$ 42,00 R$ 42,84
+2%

41. Eduardo Shiota
Na Booking, fazemos tudo —
inclusive decisões técnicas —
através de
testes A/B.

42. Eduardo Shiota
“Mas meu design é obviamente
lindo e intuitivo, muito melhor do
que o que temos! Por que eu
deveria fazer dele um teste A/B?”
— a grande maioria dos designers

43. Eduardo Shiota
Quiz!

44. Eduardo Shiota
Qual teve melhor performance?
A: levante a mão esquerda B: levante a mão direita
Inconclusivo: não levante a mão

45. Eduardo Shiota
Qual teve melhor performance?
Reduziu o bounce rate em 1.7%

46. Eduardo Shiota
Qual teve melhor performance?
A: levante a mão esquerda B: levante a mão direita
Inconclusivo: não levante a mão

47. Eduardo Shiota
Qual teve melhor performance?
Aumentou o CTR em 203%

48. Eduardo Shiota
Qual teve melhor performance?
A: levante a mão esquerda B: levante a mão direita
Inconclusivo: não levante a mão

49. Eduardo Shiota
Qual teve melhor performance?
Aumento de 43.4% nas vendas

50. Eduardo Shiota
Qual teve melhor performance?
A: levante a mão esquerda B: levante a mão direita
Inconclusivo: não levante a mão

51. Eduardo Shiota
Qual teve melhor performance?
Estatisticamente similares

52. Eduardo Shiota
Comprar
Comprar
vs

53. Eduardo Shiota
vs
jQuery 1.11.3
jQuery 3.0

54. Eduardo Shiota
vs
Virtual DOM
morphdom

55. Eduardo Shiota

56. Eduardo Shiota
”In god we trust, all others must
bring data.”

57. Eduardo Shiota
Nosso objetivo não é aumentar a
conversão, e sim proporcionar a
melhor experiência pro usuário.

58. Eduardo Shiota
Monitoramento

59. Eduardo Shiota
Nós temos gráficos que mostram
tudo o que acontece em todas as
partes da aplicação.

60. Eduardo Shiota

61. Eduardo Shiota
Tudo gera um evento.

62. Eduardo Shiota
action => ’hotel’,
referrer => ’http://booking.com’,
country => ’us’,
ip => ’222.222.2.22’,
git_tag => ’20160625-120178’,
node => ’xx555-33’,
browser => ’chrome’,
version => ’49’,
js_error => {
file => ’hotel.js’,
error => ’undefined B is not a function’,
stack => ’...’,
line_number => 337
},
js_data => {
first_load => 4343,
first_paint => 1200
}
is_robot => 0,
...
Evento

63. Eduardo Shiota
Se alguma coisa acontece,
podemos agir e corrigir
rapidamente.

64. Eduardo Shiota

65. Eduardo Shiota
Performance

66. Eduardo Shiota
O usuário deve conseguir realizar
uma reserva, independente de estar
por trás do firewall na China ou
numa fibra óptica na Alemanha.

67. Eduardo Shiota
1st jQuery Ready
1st onLoad
Avg. jQuery Ready
Avg. onLoad
Body size in bytes
Wallclock
CPU
Memory usage

68. Eduardo Shiota
Service Workers
Gerenciamento de cache e
estratégia offline first.

69. Eduardo Shiota
Critical rendering path
Priorização de recursos acima do
fold.

70. Eduardo Shiota
Assets e templates assíncronos
Carregamento de recursos on-
demand.

71. Eduardo Shiota
Pre-fetching de assets
Pré-carregamento de recursos dos
próximos passos do funil.

72. Eduardo Shiota
WebP? HTTP/2?

73. Eduardo Shiota
Todas as nossas mudanças de
performance são feitas através de
testes A/B.

74. Eduardo Shiota
Empoderamento

75. Eduardo Shiota
Todos desenvolvedores e designers
têm o poder de executar e tomar
decisões em todas as etapas do
processo.

76. Eduardo Shiota
Geração de
ideias
Gerenciamento
do backlog
Detalhamento da
implementação
Execução do
código
Teste de
qualidade
Deploy em
produção
Configuração do
Teste A/B
Análise dos
dados e decisão
Conclusão e
próximos passos

77. Eduardo Shiota
Todos são igualmente responsáveis
pelo sucesso do produto e pelas
decisões; não há ”HiPPOs”.

78. Eduardo Shiota
Continuous Improvement

79. Eduardo Shiota
Nosso produto não pára de
evoluir e crescer.

80. Eduardo Shiota
Não fazemos grandes redesigns ou
refatorações.

81. Eduardo Shiota
O mercado muda rapidamente, e
precisamos agir de acordo.

82. Eduardo Shiota
benéfico para os
usuários
benéfico para o
negócio
benéfico para os
desenvolvedores

83. Eduardo Shiota
Como desenvolvemos um
front-end para 224 países e
mais de 40 línguas?

84. Eduardo Shiota
Nós fazemos localização e
internacionalização. Temos a
certeza de que o conteúdo vai
atingir o coração de todos os
usuários.

85. Eduardo Shiota
Nós fazemos experimentação.
Tomamos decisões baseadas em
dados, e sabemos que estamos
construindo a melhor experiência
para o usuário.

86. Eduardo Shiota
Nós monitoramos tudo o que
acontece. Temos a certeza de que,
caso o algo afete o usuário,
poderemos agir o mais rápido
possível.

87. Eduardo Shiota
Nós damos poder aos
desenvolvedores. Todos devem
direcionar e evoluir o produto.

88. Eduardo Shiota
Nós estamos constantemente
melhorando e nos adaptando ao
que o consumidor precisa e às
tecnologias que surgirão.

89. Eduardo Shiota
Sejam parte da mudança e
da inovação.

90. Eduardo Shiota
Colaborem para que todos tenham
parte da culpa e do sucesso.

91. Eduardo Shiota

92. Eduardo Shiota
Não amem as ferramentas, amem o
produto.

93. Eduardo Shiota
”Keep the customer at the centre of
everything you do.”

94. Eduardo Shiota

95. Eduardo Shiota
Dank jullie wel!
contato@eshiota.com
@shiota