FileNewTemplate

Desenvolvendo um Front-end para 224 pases e mais de 40 lnguasEduardo Shiota

Ttulo da Pelestra: Arial Bold (de 35 a 40 a pt)Nome do palestrante: Arial Bold (de 14 a 16 pt)Inserir marca da empresa1

Eduardo Shiota

Eduardo Shiotacontato@eshiota.com@shiota

2

Eduardo Shiota

3

Eduardo Shiota

4

Eduardo Shiota

5

Eduardo Shiota

(were hiring)

6

Eduardo Shiota

Como desenvolvemos um front-end para 224 pases e mais de 40 lnguas

7

Eduardo Shiota

Qual o papel do front-end developer em um e-commerce?

8

Eduardo Shiota

9

Eduardo Shiota

10

Eduardo Shiota

11

Eduardo Shiota

Essa histria apenas uma entre milhares de outras similares.

12

Eduardo Shiota

Todos tm sua parcela de culpa.

13

Eduardo Shiota

14

Eduardo Shiota

15

Eduardo Shiota

LocalizaoExperimentaoMonitoramentoPerformanceEmpoderamentoContinuous Improvement

16

Eduardo Shiota

Localizao eInternacionalizao

17

Eduardo Shiota

40+ linguas50 moedas2000+ combinaes

18

Eduardo Shiota

Pequenos detalhes podem fazer a diferena para diferentes pases.

19

Eduardo Shiota

20

Eduardo Shiota

A implementao do HTML e CSS precisa funcionar em todos os casos.

21

Eduardo Shiota

22

Eduardo Shiota

23

Eduardo Shiota

Alguns termos podem quebrar o layout em diferentes lnguas.

24

Eduardo Shiota

25

Eduardo Shiota

26

Eduardo Shiota

Todos os textos so traduzidos e acessados atravs de arquivos de dicionrio.

27

Eduardo Shiota

"I love the web"i_love_the_webCopywriterLanguageSpecialists

28

Eduardo Shiota

I love the web!

29

Eduardo Shiota

30

Eduardo Shiota

Dependendo da economia de um pas, voc pode ter problemas no layout.

31

Eduardo Shiota

90,00R$ 325,50 10,470.04$ 98.96

32

Eduardo Shiota

1.299.923,02rp

33

Eduardo Shiota

Precisamos entender e incorporar a cultura do usurio.

34

Eduardo Shiota

35

Eduardo Shiota

36

Eduardo Shiota

37

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

38

Eduardo Shiota

Experimentao

39

Eduardo Shiota

40

Eduardo Shiota

ComprarComprarvs

41

Eduardo Shiota

ComprarComprarif track(my_experiment)50%50%

42

Eduardo Shiota

ComprarComprarUsurio logado ou noLngua/moedaPas de origemBrowser/OS/Device

Produtos visitadosFlow de navegaoOpes de buscaErros de validao

Estado/cidade da compraTipo de pagamentoChamadas ao SACCancelamentos

Tempo de carregamentoWallclock/CPUNmero de queriesErros server/client-side

43

Eduardo Shiota

ComprarComprarDurao: 14 diasVisitantes: 45.140 (22.570 por variante)Nmero de comprasTicket mdio339 (1.5%)407 (1.8%)+20%R$ 42,00R$ 42,84+2%

44

Eduardo Shiota

Na Booking, fazemos tudo inclusive decises tcnicas atravs detestes A/B.

45

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

46

Eduardo Shiota

Quiz!

47

Eduardo Shiota

Qual teve melhor performance?

A: levante a mo esquerdaB: levante a mo direitaInconclusivo: no levante a mo

48

Eduardo Shiota

Qual teve melhor performance?

Reduziu o bounce rate em 1.7%

49

Eduardo Shiota

Qual teve melhor performance?A: levante a mo esquerdaB: levante a mo direitaInconclusivo: no levante a mo

50

Eduardo Shiota

Qual teve melhor performance?Aumentou o CTR em 203%

51

Eduardo Shiota

Qual teve melhor performance?A: levante a mo esquerdaB: levante a mo direitaInconclusivo: no levante a mo

52

Eduardo Shiota

Qual teve melhor performance?Aumento de 43.4% nas vendas

53

Eduardo Shiota

Qual teve melhor performance?A: levante a mo esquerdaB: levante a mo direitaInconclusivo: no levante a mo

54

Eduardo Shiota

Qual teve melhor performance?Estatisticamente similares

55

Eduardo Shiota

ComprarComprarvs

56

Eduardo Shiota

vsjQuery 1.11.3jQuery 3.0

57

Eduardo Shiota

vsVirtual DOMmorphdom

58

Eduardo Shiota

59

Eduardo Shiota

In god we trust, all others must bring data.

60

Eduardo Shiota

Nosso objetivo no aumentar a converso, e sim proporcionar a melhor experincia pro usurio.

61

Eduardo Shiota

Monitoramento

62

Eduardo Shiota

Ns temos grficos que mostram tudo o que acontece em todas as partes da aplicao.

63

Eduardo Shiota

64

Eduardo Shiota

Tudo gera um evento.

65

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

66

Eduardo Shiota

Se alguma coisa acontece, podemos agir e corrigir rapidamente.

67

Eduardo Shiota

68

Eduardo Shiota

Performance

69

Eduardo Shiota

O usurio deve conseguir realizar uma reserva, independente de estar por trs do firewall na China ou numa fibra ptica na Alemanha.

70

Eduardo Shiota

1st jQuery Ready1st onLoadAvg. jQuery ReadyAvg. onLoadBody size in bytesWallclockCPUMemory usage

71

Eduardo Shiota

Service WorkersGerenciamento de cache e estratgia offline first.

72

Eduardo Shiota

Critical rendering pathPriorizao de recursos acima do fold.

73

Eduardo Shiota

Assets e templates assncronosCarregamento de recursos on-demand.

74

Eduardo Shiota

Pre-fetching de assetsPr-carregamento de recursos dos prximos passos do funil.

75

Eduardo Shiota

WebP? HTTP/2?

76

Eduardo Shiota

Todas as nossas mudanas de performance so feitas atravs de testes A/B.

77

Eduardo Shiota

Empoderamento

78

Eduardo Shiota

Todos desenvolvedores e designers tm o poder de executar e tomar decises em todas as etapas do processo.

79

Eduardo Shiota

Gerao de ideiasGerenciamento do backlogDetalhamento da implementaoExecuo do cdigoTeste de qualidadeDeploy em produoConfigurao do Teste A/BAnlise dos dados e decisoConcluso e prximos passos

80

Eduardo Shiota

Todos so igualmente responsveis pelo sucesso do produto e pelas decises; no h HiPPOs.

81

Eduardo Shiota

Continuous Improvement

82

Eduardo Shiota

Nosso produto no pra de evoluir e crescer.

83

Eduardo Shiota

No fazemos grandes redesigns ou refatoraes.

84

Eduardo Shiota

O mercado muda rapidamente, e precisamos agir de acordo.

85

Eduardo Shiota

benfico para os usuriosbenfico para o negciobenfico para os desenvolvedores

86

Eduardo Shiota

Como desenvolvemos um front-end para 224 pases e mais de 40 lnguas?

87

Eduardo Shiota

Ns fazemos localizao e internacionalizao. Temos a certeza de que o contedo vai atingir o corao de todos os usurios.

88

Eduardo Shiota

Ns fazemos experimentao. Tomamos decises baseadas em dados, e sabemos que estamos construindo a melhor experincia para o usurio.

89

Eduardo Shiota

Ns monitoramos tudo o que acontece. Temos a certeza de que, caso o algo afete o usurio, poderemos agir o mais rpido possvel.

90

Eduardo Shiota

Ns damos poder aos desenvolvedores. Todos devem direcionar e evoluir o produto.

91

Eduardo Shiota

Ns estamos constantemente melhorando e nos adaptando ao que o consumidor precisa e s tecnologias que surgiro.

92

Eduardo Shiota

Sejam parte da mudana e da inovao.

93

Eduardo Shiota

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

94

Eduardo Shiota

95

Eduardo Shiota

No amem as ferramentas, amem o produto.

96

Eduardo Shiota

Keep the customer at the centre of everything you do.

97

Eduardo Shiota

98

Eduardo Shiota

Dank jullie wel!contato@eshiota.com@shiota

99