Cartões de crédito
Páginas de cada cartão GOL Smiles — Gold, Internacional, Platinum e Infinite — mostrando quantas milhas a pessoa acumula por dólar gasto e os benefícios de cada um, com o pedido do cartão a um toque.
Smiles App Redesign
Redesenhando o app da Smiles com um novo Design System. Reescrevemos o aplicativo em React Native e aplicamos o Design System da marca, mantendo as regras de negócio que as pessoas usuárias já conheciam.
Principais resultados
- +90%
No número de usuários ativos por mês no aplicativo.
- 4.2
É a nota do aplicativo na Google Store. A versão anterior tinha nota 3.6.
- 15x
Emissão de passagens pelo app subiu de 3% para 47%. Com um salto de 15x mais tickets.
- #1
O aplicativo se consolidou como principal canal de venda de passagens aéreas da Smiles.
Sobre
A Smiles é o programa de fidelidade da GOL Linhas Aéreas e conta com mais de 20 milhões de usuários. A plataforma permite acumular milhas por meio de voos, compras em parceiros e serviços diversos. Esse saldo pode ser trocado por passagens aéreas e rodoviárias, upgrades de classe, reservas de hotéis, aluguel de carros ou produtos no Shopping Smiles, oferecendo uma experiência completa de viagem e consumo.
Contexto
O app existia em duas versões separadas — uma para Android, outra para iOS. Isso significava manutenção, testes e bibliotecas em dobro. No design, o app não seguia um Design System: havia inconsistência visual entre funcionalidades, desalinhamento com o branding, falta de acessibilidade e uma experiência pouco intuitiva.
A oportunidade foi reescrever o app em React Native, com uma só base de código, e aplicar o Design System da Smiles. A estratégia escolhida foi o redesign As Is: manter as regras de negócio e as funcionalidades existentes, mudando tecnologia e design. Era a forma mais segura de evoluir o produto sem impactar a curva de aprendizado das pessoas usuárias.
25
funcionalidades redesenhadas — 80% do app
11
meses, com entregas a cada sprint
6
squads multidisciplinares
60+
pessoas atuando ao mesmo tempo
Meu papel
Atuei como Product Designer em diferentes squads ao longo do projeto, responsável por funcionalidades centrais do app:
Emissão de voos
Fluxo principal de compra de passagens, até a confirmação do bilhete emitido e as ofertas para completar a viagem.
Clube Smiles
Assinatura de planos mensais de milhas: comparação de planos, upgrade e formas de pagamento.
Cartões de crédito (Cobranded)
Páginas dos cartões GOL Smiles — Gold, Internacional, Platinum e Infinite — com acúmulo de milhas e benefícios de cada um.
Extrato
Consulta das milhas acumuladas e do histórico de movimentações.
Depois, passei a ser a pessoa de referência de design do time: validava as interfaces criadas por outros designers e orientava cada um, garantindo consistência com o Design System entre fluxos feitos por squads diferentes.
Clube Smiles
Na aba de planos, quem já assina vê o plano atual e pode fazer upgrade comparando planos em cards: milhas por mês, preço mensal, anual parcelado ou à vista.
Emissão de voos
O fim do fluxo de compra: a confirmação do bilhete emitido, com localizador e detalhes do voo, e as ofertas para completar a viagem logo em seguida.
Design System
O Design System da Smiles tinha sido criado pensando só no contexto web. Para o app, parte dos componentes precisou ser criada ou adaptada — e esses componentes passaram a complementar o próprio Design System, junto com novas ilustrações.
Cada entrega passava por um comitê formado pelo time de design da Smiles, que avaliava o uso do Design System e o fluxo como um todo, antes da validação com os stakeholders de produto.
Uma nova cara para o app
Readequar a interface à nova identidade visual da marca, sem mudar as regras de negócio que as pessoas usuárias já conheciam.
Funcionalidades atendidas
Algumas das funcionalidades recriadas dentro do novo Design System. Em destaque, as que eu desenhei.
Processo
Cada funcionalidade recriada passou por 8 etapas.
- 01
Repasse de negócios
Nesta fase, as equipes de negócios e produto definiram seus objetivos e estratégias.
- 02
Imersão
A pessoa designer se aprofundou no produto, analisou o contexto já existente e avaliou as boas práticas e as já adotadas no mercado em produtos semelhantes.
- 03
Definição
A pessoa product owner (PO) mapeou e escreveu as estórias de usuário conforme as regras de negócio, enquanto a pessoa product designer (PD) considerou a descoberta feita anteriormente e criou o fluxo do usuário.
- 04
Design
Desenvolvimento do protótipo de alta fidelidade, dentro das diretrizes do Design System, e criação de componentes novos com envolvimento da UX Writer. Também ocorreu a organização do fluxo, demonstração das interações entre as telas e a criação de um protótipo navegável.
- 05
Entrega
Duas reuniões: uma com o time de design para avaliar a consistência com o Design System e propor alterações no fluxo, e outra com stakeholders de produto para verificar a conformidade com a estratégia e as regras de negócio da Smiles.
- 06
Handoff
Repasse de informações técnicas entre time de design e equipe de desenvolvimento.
- 07
Desenvolvimento
Desenvolvedores trabalharam na construção das funcionalidades e repasses técnicos baseados nos protótipos da equipe de design.
- 08
Testes
Product designer e a pessoa de QA avaliaram se o que foi construído pelo time de desenvolvimento estava conforme o protótipo entregue pelo time de design.
Desafios
- O Design System da Smiles tinha sido criado só para web — vários componentes de app precisaram ser criados ou adaptados.
- Não havia documentação do app antigo, como histórias de usuário: era preciso usar o app para entender como cada funcionalidade operava.
- Funcionalidades com fluxos complexos e uma carga enorme de informação.
- Propor melhorias dentro do As Is, sem mudar regras de negócio nem aumentar a curva de aprendizado.
O que entregamos
- Um app com nova tecnologia e código unificado, funcionando em Android e iOS.
- Uso e complementação do Design System da Smiles, com componentes exclusivos para o app e novas ilustrações.
- Melhorias em funcionalidades existentes, mesmo dentro da estratégia As Is.
- Um backlog de melhorias mais profundas, que mudam regras de negócio, mapeado para o futuro.
Aprendizados
Um dos grandes desafios foi manter a consistência entre fluxos trabalhados por designers diferentes. O Design System foi o maior aliado — e o papel de referência de design, validando e orientando o time, foi o que fez essa consistência acontecer na prática.
Também ficou clara a importância de compartilhar conhecimento entre squads, acompanhar métricas para tomar decisões e usar o tempo de desenvolvimento de funcionalidades passadas para estimar as próximas.