Mobile apps · Design concept
Transport companion
A transit app design study covering route search, route comparison and journey details, with proposed selection and unavailable-data states.
Design concepts, not client projects. Screens are static mockups; names and data are illustrative.
The design brief
Help a passenger compare route choices before inspecting each leg of a journey. The concept uses a simple search screen and a consistent layout for alternatives.
- Designed for
- Passengers planning an unfamiliar journey and comparing transfers or walking requirements.
- Constraints to consider
- Locations, routes and any displayed times are fictional static examples, not live travel information. The concept does not provide navigation, ticketing or service alerts.
The proposed journey
- 01
Set the journey
The search screen separates the origin from the destination so the direction of travel is explicit.
- 02
Compare route options
Route cards put journey duration and transfers in consistent positions for comparison.
- 03
Read each leg
The detail screen breaks the chosen route into ordered legs, with transfer and walking information beside the relevant step.
Why these design choices?
Keep comparisons consistent
The same information appears in the same order on each route card. A shorter duration should not hide an extra transfer.
Use colour with labels
Lime marks the selected option against deep blue and white. Route and step labels must carry the meaning without relying on colour alone.
A closer look at the visual system
Proposed design specimens. These are static examples, not working controls or a production specification.
Colour roles
Navigation & text
#133952
Route surfaces
#FFFFFF
Selected journey
#C6EA64
Typography & spacing
Clear information. A considered next step.
Use a sans-serif face with clear station names and numerals. Give route identifiers enough weight to distinguish them from descriptions, especially at transfer points.
Separate alternative routes into distinct cards. In the detail view, use a continuous vertical sequence while leaving enough room for longer stop names and transfer instructions.
Beyond the ideal state
No route found
No route matches this search. Check the locations or change the departure time.
Route selected
Route selected. Review the transfers and walking sections.
Updates unavailable
Live updates are unavailable. Check with the transport operator before travelling.
Why show transfers alongside journey duration?
A short journey may involve more changes or walking. Placing those details next to duration lets passengers compare the trade-off before opening a route. The concept does not establish which option suits a particular passenger.
