Como refizemos o App Smiles diminuindo o tempo de manutenção da plataforma e melhorando a experiência do usuário
Contexto
O projeto surgiu da necessidade de readequar o aplicativo da Smiles às novas diretrizes de design da empresa e migrar a tecnologia para o React Native. Utilizamos a abordagem "As Is App", mantendo as regras de negócio do produto, porém modificando o design e a tecnologia utilizada. Dessa forma, conseguimos garantir que as mudanças fossem aplicadas sem impactar na curva de aprendizado dos usuários.
Componentes antigos
Inconsistência visual
Acessibilidade prejudicada
Impacto na usabilidade
Linguagem defasada
Funcionalidades atendidas
Emissão de voos
Meus voos
Menu e Navegação
Cartões cadastrados
Uber
Compra de milhas
Clube Smiles
Checkout
Crédito Retroativo
Radar Smiles
Meus pedidos
Login & Touch Id
Missão Smiles
Notificações
Cobranded
Extrato
Minha categoria
Passageiro favorito
Cancelamento de conta
Reativação de milhas
Minha conta
Imersão
Fase 1
Nesta fase, as equipes de negócios e produto já haviam definido seus objetivos e estratégias. Já no time de design, realizamos uma imersão na funcionalidade, analisando o contexto já existente no aplicativo e avaliando as boas práticas adotadas no mercado em produtos semelhantes.
Mapeando os cenários
No primeiro momento, em conjunto com o Product Owner, realizamos um mapeamento de todos os cenários existentes na funcionalidade. Foi um trabalho desafiador, pois foi necessário testar com diferentes tipos de usuários, como clientes Ouro, Diamante, clientes do Clube Smiles e outros tipos de clientes da empresa. Cada um desses usuários poderia apresentar cenários e mensagens diferentes e todos deveriam ser contemplados no As-Is.
Análise dos concorrentes
Para entender melhor o contexto do produto, conduzimos uma análise de benchmarking. Durante essa análise, examinamos as melhores práticas, tendências do mercado e estratégias dos concorrentes. Essa abordagem nos permitiu identificar insights valiosos e implementar melhorias no produto.
Design
Fase 2
Nessa fase, desenvolvemos o protótipo de alta fidelidade e criamos novos componentes, dentro das diretrizes do Design System. Nesta etapa também ocorreu a organização do fluxo, demonstração das interações entre as telas e, em alguns casos, a criação de um protótipo navegável.
Highlights no desenho das telas
UX Writing
Durante o processo de design, tivemos na equipe uma pessoa dedicada a fazer a revisão de Writing nas telas. Com esse apoio, conseguimos mapear melhorias nos fluxos e manter uma linguagem amigável de acordo com o tom de voz da Smiles.
Mapeamento de melhorias
Apesar de estarmos limitados pelo As-Is, tivemos a oportunidade de sugerir melhorias de usabilidade nos fluxos. Essas sugestões passaram pela aprovação de design e análise com a squad para entender a viabilidade e foram incluídas quando possível.
Ilustrações
Utilizamos das ilustrações para reforçar o tom amigável que a marca quer estabelecer com o público. As mensagens de erro foram suavizadas e as telas de sucesso tem um impacto positivo maior com o uso das ilustrações.
Consistência
Um dos grandes desafios foi manter a consistência entre fluxos que foram trabalhados por designers diferentes. O Design System foi um aliado nesse aspecto, além da constante troca entre todos os designers do projeto.
Fase 3
Nessa fase, desenvolvemos o protótipo de alta fidelidade e criamos novos componentes, dentro das diretrizes do Design System. Nesta etapa também ocorreu a organização do fluxo, demonstração das interações entre as telas e, em alguns casos, a criação de um protótipo navegável.
Ritos de validação
Nesta etapa, eram realizadas duas reuniões: uma com a equipe de design da Smiles para avaliar a consistência com o Design System e propor alterações no fluxo, e outra com os stakeholders de produto para verificar a conformidade com a estratégia e as regras de negócio da Smiles
Fase 4
Nesse momento, houve o repasse de informações técnicas entre o time de produto e a equipe de desenvolvimento. Nesse momento, avaliamos juntos as possibilidades disponíveis em código e definimos estratégias para lidar com as limitações técnicas. Após esse momento, o projeto foi desenvolvido e ao final nos reunimos com a pessoa de QA para avaliar se o que foi construído pelo time de desenvolvimento estava conforme o protótipo entregue pelo time de design.
Nessa fase, desenvolvemos o protótipo de alta fidelidade e criamos novos componentes, dentro das diretrizes do Design System. Nesta etapa também ocorreu a organização do fluxo, demonstração das interações entre as telas e, em alguns casos, a criação de um protótipo navegável.
Design refletindo o serviço
Durante a validação com as pessoas de desenvolvimento, enfrentamos algumas limitações de informações que vinham do serviço (back-end) e não podiam ser modificadas. Elementos como ícones, espaçamentos que não estavam no serviço não poderiam ser modificados na camada de front end, dessa forma alguns ajustes foram necessários.
Fase 6
Avaliar as métricas para entendermos nosso sucesso
Monitorar e analisar as avaliações nas lojas de aplicativos
Acompanhar a quantidade de emissões de voos realizadas
Registrar e analisar o volume de solicitações de cartões Cobranded
Acompanhar o número de adesões ao Clube Smiles
Avaliar o tempo médio necessário para que os usuários concluam uma compra.
Acompanhar o crescimento do número de usuários que têm o aplicativo instalado
Aplicar melhorias e aprofundar pesquisas
Desenvolver melhorias não abordadas no roadmap inicial.
Analisar comportamento para criar uma persona mais completa.
Realizar testes com usuários para coletar feedbacks sobre usabilidade, navegabilidade e design.