MTR Mobile aims to provide various services and information related to the MTR transportation system in Hong Kong.

The main app revamp are updated trip planner and displaying real-time train information with new onboarding and homepage. Various updated connection maps for different pages and scenarios are created and latest Online Ticketing System is also included.

After learning about the concerns and requirements of the client, I have summerized some issues in current version which need to be resolved in the latest version of MTR Mobile:

• Trip planner duration placement. How to display them as accumulated time with the limitation of the updated design

• With the previous design, the duration display is quite confusing as it was referring to the total duration for travelling between each station and it is placed at the bottom instead of beside the station.

• Users do not know the exact meaning of the time (e.g. 7 minutes)

• How to display more content on station info page while displaying scroll area clearly and bottom sheet display issue.

After some research with multiple UX reference on the approach of existing transportation mobile app, I have proposed some solution to potentially improve the above problems:

• Trying to place the time on the railway line with the limitation of the existing design

• Have to create banners without blocking the station names by putting arrows accordingly

• Use gradient effect to indicate the scroll area and add auto scroll to targeted location (eg. Station shops)

• Displaying the time on the railway line with the limitation of the existing design as the current design cannot be updated drastically.

• Place the duration display on the railway line on the left without blocking any elements while having a more logically design for user to know the meaning instantly.

• By changing the first time to "0 minute" to easily refer to the starting time

• Displaying more content on station info section without the need to scroll the section to the top by moving the default location to a higher location.

• Adding a tab selection when there are 2 sets of information for a single station and use gradient effect to indicate the scroll area and add auto scroll to targeted location (eg. Station shops)