Do MVP ao PWA, melhorando o engajamento com cliente na CVC
0 gostou209 visualizações
O documento discute a evolução do projeto da CVC para um site mais responsivo e engajador, destacando a transição para um Progressive Web App (PWA) visando melhorar a experiência do usuário. Apresenta os princípios de confiabilidade, rapidez e engajamento, além das vantagens e desvantagens do PWA em comparação com aplicativos nativos. O texto também aborda desafios técnicos e a necessidade de adaptação da infraestrutura do e-commerce existente para melhor performance.
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
- 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.
- 16. Nossa décima versão, versão atualNossa 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.
- 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
- 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