ModaleProjeto acadêmico · continuação individual
Bilhetagem e planejamento de viagem no Recife. Uma investigação sobre mobilidade orientou a prioridade do passe digital e a organização da interface.
Como organizar passe e rotas para quem precisa consultar o transporte durante o deslocamento?
Dar mais destaque à bilhetagem e manter o planejamento acessível, sem presumir uma rotina multimodal para toda pessoa.
Telas no Figma e um protótipo HTML para explorar seleção de modal, rotas e compra simulada de passe.
393 × 852Da integração à prioridade de uso
Capítulo 01 · Contexto e papelA hipótese inicial era reunir diferentes meios de transporte em uma experiência de planejamento e bilhetagem. O público considerado foi quem usa transporte público no Recife.
O projeto começou na formação acadêmica com atuação em UX/UI e continuidade individual em telas, cores e protótipo. A restrição principal foi desenhar e codificar sem acesso operacional às catracas, saldo do VEM, pagamentos ou frota em tempo real — funções que permanecem simulações declaradas.
O que a amostra permite dizer
Capítulo 02 · Pesquisa e limitesO resumo da pesquisa registra 23 respostas, das quais 18 completas. Nessa base de 18, 88,9% relataram não alternar entre tipos de transporte.
88,9%
da amostra descrita não alternava modais. Isso levou a rever a prioridade da integração na interface. Não usar vários modais hoje não demonstra falta de necessidade, nem prevê quantas pessoas usariam uma solução futura.
Resultados da amostra, não estimativas populacionais
Na base descrita de 18 respostas, 100% afirmaram que o VEM agiliza a viagem e 72,2% usavam apps de mobilidade. Conforto e acessibilidade física envolvem veículos e estações — problemas operacionais que uma interface não resolve. As decisões de design focaram na acessibilidade digital e na organização dos fluxos.
Integração multimodal no centro
Ponto de partida do projeto, a ser confrontado com os hábitos descritos.
Mais destaque ao passe
A importância atribuída à bilhetagem orientou a hierarquia. Planejamento continuou disponível.
Uso futuro ainda desconhecido
A amostra não demonstra demanda, adesão ou impacto da solução proposta.
Passe, consulta e viagem
Capítulo 03 · SoluçãoA home aproxima a última rota dos tickets. A lista de passes permite consultar as opções, e a tela de viagem reúne informações do deslocamento.
Proposta visual e limites operacionais
Essas capturas preservam o arquivo original do Figma, inclusive dados de exemplo. Elas documentam a proposta visual; não demonstram atualização em tempo real, validação de cartão ou compra real.
Acesso rápido aos passes e histórico de tickets para agilizar o embarque no transporte.
Visualização das informações do deslocamento e última rota sem depender de conexão real.
Cor, forma e rótulos
Capítulo 04 · Sistema visualMarrom e creme dão identidade ao projeto. Ícones acompanhados de texto ajudam a identificar ações sem depender apenas da cor.
Dourado profundo sobre creme
Par de ação e destaque (#5C4812 sobre #FFE3A0): alcança 7,01:1, garantindo nível AAA para ícones, botões e elementos da aplicação.
Ícone creme sobre marrom
Par estrutural da identidade: razão de 10,34:1, superando com folga o padrão AAA para ícones e navegação.
Texto preto sobre creme
Par sólido que atende a 1.4.6 com nível AAA (16,75:1) para texto normal e dados essenciais de bilhetagem.
Paleta e papéis visuais
Conformidade AAA para ícones e aplicativo
Com a adoção do dourado profundo (#5C4812), todos os pares essenciais da interface alcançam a faixa AAA (superando 7:1) tanto para textos quanto para ícones, botões e elementos da aplicação sobre a base creme.
Experimentar a proposta em código
Capítulo 05 · ImplementaçãoO protótipo em HTML, CSS e JavaScript permite explorar rotas de exemplo, alternar meios de transporte e simular a seleção e compra de passe.
Demonstração interativa em código: revisada neste portfólio para navegação por teclado, zoom e identificação das simulações. Não há pagamento, login, NFC ou integração com serviços reais.
Validação disponível e aprendizado
Capítulo 06 · Resultado e limitesO registro do projeto informa testes com 20 pessoas, incluindo duas com daltonismo, em telas de bilhetagem e rota.
Entrega demonstrável e aprendizado de produto
Os materiais reunidos não incluem roteiro, métricas de tarefa ou taxa de sucesso; por isso, não apresento redução de erros nem validação integral. A entrega demonstrável é a proposta de interface e o protótipo funcional. O aprendizado central foi distinguir hábito atual de necessidade e orientar decisões de design com honestidade factual.