Portfólio · UI/UX · Aplicativo

Design de interfaces para mobilidade urbana.

Produto
Cadê o ônibus?
Área
Mobilidade urbana
Atuação
UI/UX e design de interfaces
Ferramentas
Adobe XD e Figma

Quem consulta um app de transporte precisa de respostas rápidas: qual linha, por onde passa, quais horários e quando chega o próximo ônibus.

Encontrar a informação para seguir viagem

  1. 01

    Consulta no mapa

    Trajetos e localização na mesma visão, com cartões que identificam a linha e abrem o detalhe.

  2. 02

    Linha e horários

    Itinerário, sequência de paradas e períodos disponíveis organizados em blocos claros.

  3. 03

    Parada e previsão

    Endereço, sentido e próximos ônibus por linha, no mesmo contexto da parada.

  4. 04

    Rotina e atalhos

    Recentes, favoritos e preferências para as consultas que se repetem no dia a dia.

Interface pensada para a consulta

Telas conectadas ao fluxo de quem precisa seguir viagem.

Como as informações aparecem na experiência

Cada decisão de design conecta a consulta do usuário ao que ele precisa. Amplie as telas para ver os detalhes.

Mapa e linhas na mesma consulta

O mapa apresenta os trajetos e a localização, enquanto os cartões identificam a linha e oferecem acesso aos seus detalhes. As cores distinguem percursos quando há mais de uma linha exibida.

Visualização de linhas no mapa e acesso às informações do percurso.
Trajeto e cartão com ações da linha.

Do percurso aos horários

Ao consultar uma linha, o usuário encontra o itinerário, a sequência de paradas e os horários. Essas informações aparecem em blocos separados, com identificação dos dias e períodos disponíveis para consulta.

Detalhamento da linha com itinerário e horários organizados por período.

Informações a partir da parada

A tela da parada reúne endereço, sentido e linhas disponíveis. Na área de previsão, cada linha apresenta as informações dos próximos ônibus, mantendo a identificação da parada no mesmo contexto de consulta.

Informações da parada e visualização das previsões por linha.

Atalhos para o que faz parte da rotina

Linhas recentes e favoritos dão acesso às consultas recorrentes. As preferências reúnem opções de cidade, visualização do mapa e exibição de informações, enquanto o menu também oferece acesso à conta e ao suporte.

Organização de linhas recentes, favoritos e preferências do aplicativo.
Preferências de cidade, mapa e personalização.

Ferramentas utilizadas

Adobe XD e Figma fizeram parte do trabalho de UI/UX deste projeto.

  • Adobe XD
  • Figma

Se você está criando um aplicativo ou precisa revisar uma interface, a 3Hub organiza fluxos, informação e o design das telas — do app ao site.

Conversar sobre meu projeto

Conte brevemente o que você quer criar ou melhorar. Vamos chegar à conversa com o contexto deste case de UI/UX.