Do MVP ao PWA, melhorando o engajamento com cliente na CVC

Esta palestra apresenta a abordagem técnica que transformou um produto mínimo viável que tinha por objetivo experimentar uma alternativa de busca de pacotes turísticos por mapa em um aplicativo web progressivo que permitiu o vislumbre de grande potencial para o aumento das conversões online, bem como a aceitação e o investimento dos stakeholders.

Palestra apresentada no QCON São Paulo 2018 na trilha JavaScript e Web.
Assista em https://youtu.be/VWa0QoAXuyM

Transcript

1. Melhorando o engajamento com cliente na CVC Do MVP ao PWA
2. Quem somos? Sou Fabricio Lopes, Software Development Manager na CVC Corp. /in/fabricio-lopes-vital
3. Quem somos? Sou Janderson Silva, Software Architect na Rivendel. /in/janderson-silva
4. Em 2016 iniciou-se um projeto de um site responsivo e performático para alavancar as vendas, mas no modelo de gestão e processos de sempre.
5. Corrida para entregar o “projeto” o mais rápido possível e no prazo acordado.
6. Em 2017, acontece nossa entrega
7. Queda na conversão e no engajamento nos produtos
9. E agora? Como fazer melhor e diferente?
10. Pesquisas com os usuários
11. Gravação do comportamento do usuário
12. Fizemos muitos testes AB
13. “Experiência de usuário abrange todos os aspectos da interação entre o usuário final e a empresa, seus serviços e seus produtos.” Nielsen Norman Group
14. Nossa melhor hipótese para o MVP foi buscar Pacotes CVC numa abordagem por mapa.
15. Nossa primeira versão
16. Nossa décima versão, versão atual Nossa décima versão
17. Por que adotamos a abordagem PWA em nosso MVP? Baseado em 3 princípios: • Confiabilidade • Rapidez • Engajamento do usuário
18. O que esses princípios podem proporcionar? Carregar as páginas mais rapidamente
19. O que esses princípios podem proporcionar? Visualização em tela cheia sem a barra de endereços
20. O que esses princípios podem proporcionar? Engajamento com os usuários com Push Notifications
21. O que esses princípios podem proporcionar? Permitir animações e navegações suaves
22. Permitir ícone na tela inicial no dispositivo
23. Permitir o uso do app mesmo em conexões lentas ou inexistentes
24. O que esses princípios podem proporcionar? Aumento da taxa de conversão
25. Vantagens • Nenhuma instalação física do aplicativo é necessária. • Não há necessidade de visitar a loja de aplicativos. • Pode ser atualizado automaticamente. • É adequado para o sites de comércio eletrônico.
26. https://whatwebcando.today
27. Desvantagens • Embora possua muitos recursos, ainda não há suporte a todos os recursos, como um app nativo • Em casos que requerem mais complexidade, como jogos, o PWA não substitui totalmente um app nativo.
29. Como construir um Progressive Web App • Mobile First ◦ Leveza e rapidez ◦ Layout responsivo ◦ Experiência de app nativo
30. Progressivo • Funcionar em qualquer navegador • Em qualquer sistema operacional • Para qualquer nível de usuário
31. Progressive Web App Checklist https://developers.google.com/web/progressive-web-apps/checklist Básico ou completo conforme as necessidades de negócio
32. Site servido com HTTPS Quanto custa? Nada, é gratis: https://letsencrypt.org/
33. Páginas responsivas Não basta apenas ajustar o conteúdo na tela do dispositivo! App-like: O usuário deve se sentir em um app nativo Como saber? https://search.google.com/test/mobile-friendly
36. Experiência de navegação Offline Service Worker
37. Service Worker
38. Service Worker Escrever na mão ou gerar automaticamente? • Workbox: https://developers.google.com/web/tools/workbox/ • Plugins para frameworks ◦ React: https://www.reactpwa.com ◦ Vue: https://github.com/vuejs-templates/pwa ◦ Ember: http://ember-service-worker.com
39. Service Worker • Registro
40. Service Worker • Precache • Cache first • Update cache
41. App Shell • HTML, CSS, JavaScript e imagens mínimos para desenhar a tela
43. Possibilidade de adicionar atalho na Home Screen Manifesto
44. Possibilidade de adicionar atalho na Home Screen
46. Funcionamento nos principais navegadores
47. Carregamento rápido em conexão 3G • PageSpeed: https://developers.google.com/speed/pagespeed/insights/ • Otimização de imagens ◦ Kraken: https://kraken.io/ ◦ Imaginary: https://github.com/h2non/imaginary ◦ Thumbor: https://github.com/thumbor/thumbor • Políticas de cache • Tratando os scripts que bloqueiam a renderização • Reduzindo o tempo de resposta do servidor
48. Transição entre páginas não deve demonstrar bloqueio de rede • Efeitos de transição são facilmente implementáveis apenas com CSS • Tela de esqueleto: http://hannahatkin.com/skeleton-screens/
49. As páginas devem ter URLs exclusivas e amigáveis • Permite melhorar a indexação • Permite o compartilhamento amigável das páginas
50. Experiência imersiva e engajamento do usuário • Parece um app nativo • Se comporta como app nativo • Tem recursos de app nativo • Mas não é um app nativo!
52. Experiência imersiva e engajamento do usuário Parece um app nativo, se comporta como app nativo, tem recursos de app nativo, mas não é um app nativo! • Layout de app • Push Notifications
53. Experiência imersiva e engajamento do usuário
54. Experiência imersiva e engajamento do usuário
55. Experiência imersiva e engajamento do usuário
56. Experiência imersiva e engajamento do usuário
57. Desafios de implementação e arquiteturais na CVC • Feature nova, tecnologias e arquitetura diferentes do legado ◦ React + Redux ◦ Apollo ◦ Saga ◦ GraphQL ◦ NodeJS
58. Desafios de implementação e arquiteturais na CVC E agora? O que fazer com o site/e-commerce legado? • Dividir para conquistar • Problemas com Service Worker e Service Worker Precache • Limitações por regras de negócio ◦ Partes do e-commerce não podem ser offline • Mudança na arquitetura do software • Melhorias na infraestrutura • Implementação de processador de imagens para melhorar web performance
59. Obrigado! Perguntas? + linkedin.com/in/janderson-silva linkedin.com/in/fabricio-lopes-vital @ciobrifa www.cvc.com.br/searchmap