Saltar para o conteúdo
DiogoTerra Nova

UX/UI Designer & Front-End Developer

Do cartão físico ao telemóvel: agilizar a validação no navegante

  • UX/UI Design
  • Adobe Creative Cloud
  • Adobe Illustrator
  • Figma
  • Maze
  • Miro

O “navegante” é um projeto final do curso Especializado UX/UI Design (2023) focado em redesenhar a experiência de compra e validação de bilhetes nos transportes metropolitanos de Lisboa (autocarro, comboio, metro e ferry). Conduzi a investigação, defini a arquitetura de informação e desenhei a interface de alta fidelidade de uma aplicação móvel conceptual, validada através de um inquérito a utilizadores e de testes de usabilidade.

Dois ecrãs da app navegante: pesquisa de percurso na página inicial e ecrã de validação de bilhete por NFC

O Problema

Comprar e carregar o passe na área metropolitana de Lisboa continua a exigir visitas a quiosques físicos ou máquinas de Multibanco, enquanto a validação obriga a ter sempre o cartão na mão. No inquérito que conduzi para este projeto junto de passageiros da AML, 69% disseram que já se esqueceram de carregar o passe a tempo e 77% admitiram já se ter esquecido do próprio cartão físico em casa. O resultado? Gastos inesperados ao comprar bilhetes avulsos a bordo ou caminhadas extra até aos terminais, para além das inevitáveis filas nos quiosques no início de cada mês. Os dados do INE mostram que o transporte público representa menos de um quarto das deslocações na região, e num estudo da Moovit Insights, poder comprar e validar viagens diretamente no telemóvel surgiu como uma das melhorias mais pedidas para incentivar a utilização da rede.

O desafio: Como mover a compra, o carregamento e a validação do passe para o telemóvel que os passageiros já trazem todos os dias no bolso?

O Processo

O texto abaixo resume as etapas principais do projeto. Para explorar a investigação detalhada, os wireframes e o fluxo de ecrãs completo, consulte o case study no Behance.

1. Investigação

Fundamentei a análise inicial em dados do INE e no estudo da Moovit Insights, e avancei depois para o meu próprio inquérito a passageiros da AML para mapear onde doem mais as etapas de carregamento e validação. Com base nesses resultados, criei da persona de uma utilizadora que se esquece com frequência de carregar o passe antes das filas habituais do início do mês e desenhei o customer journey map para identificar exatamente os pontos onde a experiência falha.

2. Benchmark e análise competitiva

Ao analisar o mercado, percebi que aplicações como a Moovit ou a Pick Hub cobrem apenas partes do processo, mas nenhuma permite validar viagens diretamente no veículo em Portugal. Para perceber o que já funciona bem lá fora, olhei para casos como Paris (Navigo) e Londres (com contactless e NFC desde 2014). Esta análise ajudou a definir as funcionalidades centrais: validação por NFC, uma carteira digital flexível (QR code, NFC ou inserção manual), pesquisa de rotas e acesso rápido aos trajetos mais frequentes.

3. Arquitetura de informação e protótipo de baixa fidelidade

Organizei a estrutura da app em três áreas principais – Percursos, Horários e Títulos – e coloquei um protótipo de baixa fidelidade à prova em testes com utilizadores no Maze. Os resultados mostraram que 90% considerou muito simples associar o cartão navegante à app, e o atalho de validação no ecrã inicial foi a opção mais utilizada. A fraca adesão à navegação secundária no rodapé levou-me a reestruturá-la antes de passar para a alta fidelidade.

4. UI de alta fidelidade

Desenhei a interface de alta fidelidade. O trabalho cobriu todo o fluxo principal: pesquisar e comprar uma rota, validar o passe via NFC e associar um cartão navegante físico à conta.

Para a investigação completa, os wireframes e os ecrãs de UI, consulte o case study no Behance.

A Solução

Uma aplicação conceptual que coloca toda a jornada dos transportes públicos de Lisboa - pesquisar rotas, comprar bilhetes, validá-los e gerir ou associar o passe físico – diretamente no telemóvel, eliminando a necessidade de quiosques, Multibancos ou cartões físicos.

Pesquisa e compra de percursos

Pesquisar um destino, comparar opções de percurso e preço, e comprar diretamente a partir dos resultados, com percursos guardados e recentes em destaque no ecrã inicial para deslocações repetidas.

Ecrãs de pesquisa e compra de percurso na app navegante: cartão navegante, pesquisa de destino, comparação de rotas no mapa e ecrã de pagamento da viagem

Validação de bilhete

Validar um bilhete encostando o telemóvel ao validador, com o NFC a substituir o toque do cartão físico, e um ecrã de confirmação a fechar o fluxo antes do início da viagem.

Ecrãs de validação de bilhete na app navegante: splash screen, percurso no mapa, validação por NFC e confirmação de sucesso

Associar um cartão navegante

Para viagens que ainda exigem o passe físico navegante, o utilizador pode associá-lo à aplicação por NFC, mantendo o carregamento e o estado de validação num único sítio a partir daí.

Para a investigação completa, os wireframes e os ecrãs de UI, consulte o case study no Behance.

Tens dúvidas se sou a pessoa ideal? Pergunta ao meu AmigoGPT