Taipei Metro GO redesign

This is my internship project, I have an internship at Taipei Rapid Transit Corporation with 320 hours.

Context

“Taipei Metro Go” is an app with over a million downloads, officially released to provide real-time information on the Taipei Metro system in New Taipei and Taipei region. The system's five lines have an average daily ridership of 1.926 million.

Source: Metro Taipei official website
https://english.metro.taipei/

What’s wrong with the current version?

What do my supervisor wanted to see in the new design version?

Due to limited time and resources for this project, I did not follow the traditional "Double Diamond Design Process." When in need of information, I tended to consult my mentor and supervisor, who often mentioned that my ideas had been considered before, and they explained why they were not implemented at the time. Gladly, I obtained some backend click data and used this information along with feedback from the Apple Store and Google Play Store to redesign this app.

Who are our users?

I divided users into two groups, they have different purposes to use our app.

1. People who are familiar with the route map (most take the MRT to commute)


Purpose: to know information related to time and the density of crowd

2. People who are not familiar with the route map (rarely take the MRT)

Purpose: to know information related to the route, and perhaps the most convenient way.
For example, some stations have been designed to be “Same-Platform Transfer,” and both trains will arrive at the same time to allow passengers to walk to another train in a short time.

Why does the public want to use our app?

What’s the difference between our app and Google Maps? What functions does the public want?
I asked for the data from our company’s survey, here are the important functions that the public values.

Important functions for the public

According to the backend data and comments on the app platform, I have summarized the most attractive three functions:

Train arrival time

Coupons

Density of crowd in each carriage

What is our advantage compared to other guide apps?

Train arrived time
Our train arrival time is the most reliable for the public.

Feature functions

Such as “get-off alert” and “Density of crowd”

What is our disadvantage compared to other guide apps?

According to the comments on app platforms and employee advises, our disadvantages are:
1. Unfriendly information architecture design
2. Unattractive interface design
3. Non-intuitive operational logic
4. High bounce rate

Design

UX design focus

1. Focus on arrival time and feature functions.
2. To ensure universal applicability, separate the travelers who are familiar with the route map from those who are not.
3. In terms of operational practicality, considering that this app is typically used while taking the metro, the design will primarily focus on one-handed use.

UI design guideline

Color

Color Imagery: Clean, Safe, Reliable, Friendly

Header

Width: 390px (100%)
Height: 86px (10.1%)
Gradient Line Length: 354px (90%)
Color: White with 80% opacity,  background blur
Separation: Teal gradient line


Adjustments: If the display is too complex, remove the line and add a shadow for separation.

Buttons

Information Architecture_current version

Information Architecture_redesign version

Green text indicates functions that opening in a browser.

Blue text indicates functions opening within the app.

Initially, I wanted to remove infrequently used and repeated features to allow users to find the functions they need more quickly. However, after discussing with my mentor, she suggested that I keep all the features to serve the public but hide those functions in a deeper place. Even if only one user utilizes a feature, it is worth retaining.

Changes I made for information architecture:
1. Journey Planner: provides a non-map-based method for those unfamiliar with the route map to find their routes.
2. Taipei Metro Section: provides feature functions, and ranks them with click data.
3. Combine “hamburger” and “My Account” into “User Center.”

Comparison

-Home page

Current:
The homepage is meaningless to users. Only the features in the middle are useful to them. Especially for passengers who are urged to know how many minutes are left to take the next train.

Redesign:
1. Place the Frequently Used Arrival Times on the homepage and allow users to set their common stations, which are likely used for commuting. If users prefer less-crowded carriages, they can click on the arrow to expand and view the congestion level.
2. Customizable, commonly used features.
3. Keep the online store advertisements on the homepage, but position them lower down on the page.
4. Put the Accessibility Mode button in the top left corner to better accommodate the usage habits of visually impaired users.

-Route Map

-Transfer Information

I added “Bus station name” because many Taipei citizens are not familiar with the bus system. Information like exit numbers and bus directions are not sufficient enough for them to find the bus stop. I also added the bus incoming time.

-Real-time Information

Move the “metro route lines” buttons from top to bottom for a better experience in one-handed use.

-Home page

Project duration: 2023.04~2023.07

Figma Prototype: (Please click the play button on the top right corner)

Figma Link