Fórum 2016 - Desenvolvendo um front-end para 224 países e mais de 40 línguas
-
Upload
e-commerce-brasil -
Category
Business
-
view
47 -
download
1
Transcript of Fórum 2016 - Desenvolvendo um front-end para 224 países e mais de 40 línguas
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 [email protected]@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 [email protected]@shiota
99