Background
Background
The metro card system has remained unchanged for decades. The cost of the metro card machine infrastructure, the lost time of waiting in line to buy a metro card, touching a dirty machine to do it, and the potential of losing the metro card leaves much to be desired from the user experience.
Design the screens for a metro app that allows the daily user who uses the metro everyday or an out-of-town visitor who will use the metro just once to get access to the metro, on time, without having a physical metro card on hand.
The metro card system has remained unchanged for decades. The cost of the metro card machine infrastructure, the lost time of waiting in line to buy a metro card, touching a dirty machine to do it, and the potential of losing the metro card leaves much to be desired from the user experience.
Design the screens for a metro app that allows the daily user who uses the metro everyday or an out-of-town visitor who will use the metro just once to get access to the metro, on time, without having a physical metro card on hand.
Duration
1 - 2 weeks
Domain
Transport services
My role
UI design (Personal project)
UI Style guide
UI Style guide
Homepage
Homepage
The homepage of the Metro app serves as a central hub for accessing all its features. At the top section, users can conveniently access their recently used Metro card for station entry and view its details. Additionally, they can plan their journeys in advance by accessing transit information to discover the most optimal routes. Utilizing shortcuts, users can easily calculate fares, purchase tickets, locate nearby stations, and access the lost and found service.
The homepage of the Metro app serves as a central hub for accessing all its features. At the top section, users can conveniently access their recently used Metro card for station entry and view its details. Additionally, they can plan their journeys in advance by accessing transit information to discover the most optimal routes. Utilizing shortcuts, users can easily calculate fares, purchase tickets, locate nearby stations, and access the lost and found service.
QR Ticket
QR Ticket
In the scenario of a user already on their journey, they can easily retrieve their ticket from the bottom slider bar. Opening the slider reveals the QR ticket, trip specifics, and payment details for quick access and reference.
In the scenario of a user already on their journey, they can easily retrieve their ticket from the bottom slider bar. Opening the slider reveals the QR ticket, trip specifics, and payment details for quick access and reference.
Homepage with the ongoing trip slider bar.
Homepage with the ongoing trip slider bar.
Buy QR ticket flow
Buy QR ticket flow
Users can initiate the process of purchasing QR tickets either through the homepage shortcuts or by navigating to the Trips section of the app, where they can also review details of their current or past trips. During the QR ticket purchase, users have the option to share the ticket with others if they are buying multiple tickets.
Users can initiate the process of purchasing QR tickets either through the homepage shortcuts or by navigating to the Trips section of the app, where they can also review details of their current or past trips. During the QR ticket purchase, users have the option to share the ticket with others if they are buying multiple tickets.
Trips page with ongoing trip information
Trips page with ongoing trip information
Top up card flow
Top up card flow
Within the app's cards section, users can manage all their Metro cards or add a new one. By selecting a Metro card, users can also access comprehensive details about the card and conveniently top up an existing one.
Within the app's cards section, users can manage all their Metro cards or add a new one. By selecting a Metro card, users can also access comprehensive details about the card and conveniently top up an existing one.
Made with ✨ & 💜
Made with ✨ & 💜