Time: 2023 JAN - 2023 FEB

Time: 2023 JAN - 2023 FEB

Duration: 4 Weeks

My Role: UX Designer

Taipei MetroGO

Taipei MetroGO

Hackathon App Redesign

Hackathon App Redesign

Top

Background

According to a research in 2019, the amount of Taipei Metro passengers have reached a cumulative total of 100 billion, with a 2.16 million daily average. With such a huge number of users, we discovered through surveys that merely 15% of them are using the official app launched by Taipei Metro.

In addition, of those who downloaded the official Taipei Metro app, less than 1/5 of users have registered an actual account, leading to low product stickiness.

Goal

Improve & optimize the aesthetic and interface layout of the current app to ensure a smoother user experience

UX Research

01 / Desktop Research

01 / Desktop Research

Problem

Problem

Why do most of the users choose to use third-party apps instead of the official Taipei Metro app?

Results

Results

Through user reviews on different app platform, we identified the top 3 pain points:

  • Poor usability - difficult to navigate

  • Lack of real-time updates on metro arrival and departure times

  • Cluttered and confusing homepage

Cluttered and confusing homepage

Lack of real-time updates on metro arrival and departure times

Poor usability - difficult to navigate

2864 reviews from Apple Store Users

Average: 4.4 stars

  • 2864 reviews from Apple Store Users

  • Average: 4.4 stars

8789 reviews from Google Play users

Average: 3.8 stars.

  • 8789 reviews from Google Play users

  • Average: 3.8 stars.

02 / User Interview

02 / User Interview

４

Karen

About

About

Age: 27

Personality: detail-oriented

Occupation: animation designer

Usual ways of commute: metro & buses

Main purpose of using app: check ETA & travel routes



Age: 27

Personality: detail-oriented

Occupation: animation designer

Usual ways of commute: metro & buses

Main purpose of using app: check ETA & travel routes

Pain Points

Pain Points

She finds it difficult to access information regarding cash back rewards.

Goals & Needs

Goals & Needs

Karen wants an app that can track users’ rewards and display them on personal dashboard.

４

Alice

About

About

Age: 57

Personality: shy, patient

Occupation: teacher, interior designer

Usual ways of commute: car, metro & buses

Main purpose of using app: access metro map



Age: 57

Personality: shy, patient

Occupation: teacher, interior designer

Usual ways of commute: car, metro & buses

Main purpose of using app: access metro map

Pain Points

Pain Points

Alice finds it hard to access information regarding transferring rides, including station map, exit location, and nearest elevator...etc.

Goals & Needs

Goals & Needs

She wants a user-friendly app that is easy to navigate and provides clear information.

03 / Define Problem & Solution

03 / Define Problem & Solution

We therefore define the following 3 directions for improvement after analyzing the results from primary research and user interviews.

We defined the following 3 directions for improvement after analyzing the results from primary research and user interviews.

Getting users lost: Fundamental functions not visible enough

  1. Getting users lost: Fundamental functions not visible enough

Streamline the process of accessing most-used functions such us trip duration & ticket fares

Adding features that display real-time updates on metro arrival time

  • Streamline the process of accessing most-used functions such us trip duration & ticket fares

  • Adding features that display real-time updates on metro arrival time

Making the path too long to access information

  1. Making the path too long to access information

Design a tab that allows users to quickly switch between trip duration, ticket fare, and station information on the same page

  • Design a tab that allows users to quickly switch between trip duration, ticket fare, and station information on the same page

Lack of desired information: decrease user retention rate

  1. Lack of desired information: decrease user retention rate

Allow users to quickly plan routes by providing relative locations between metro carts and station facilities

Optimize coupons & cash-back reward functions for a more thorough user experience

  • Allow users to quickly plan routes by providing relative locations between metro carts and station facilities

  • Optimize coupons & cash-back reward functions for a more thorough user experience

Design

#0178C2

#667080



#065C91

#F1F1F1



#B5D9EC

#EEEEEE



01 / Color

01 / Color

Noto Sans TC

Regular

Medium

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Headline 1

36px

16px

24px

20px

20px

Headline 2

Headline 3

Headline 4

Body 1

12px

Body 3

14px

Body 2

02 / Typography

02 / Typography

03 / Iconography

03 / Iconography

04 / Mockup

04 / Mockup

Homepage: Metro Map

Expand or minimize the function tab at your will!
Switch & display functions between time, price, route planning, and station information

Expand or minimize the function tab at your will! Switch & display functions between time, price, route planning, and station information

Homepage: Metro Map

Homepage: Metro Map

Price

Click on the button to switch between full price & senior price

Click on the button to switch between full price & senior price

Click on the button to switch between full price & senior price

Travel time

Click on any station to see the estimated travel time on the map. Check the ETA from the popup with multiline options available.

Save your favorite routes and access them faster in your profile page in the future


Click on the popup to see a more detailed real-time update

To

R

Daan

To

R

Tamsui

2mins

Beitou

4mins

Qiyan

5mins

Qilian

Arriving

Shipai

2mins

Mingde

3mins

Zhishan

Arriving

Shilin

2mins

Jiantan

4mins

Yuanshan

Arriving

Minquan W, Rd.

1mins

Shuanglian

3mins

Zhongshan

5mins

Taipei Main Station

Arriving

NTU Hospital

3mins

Chiang Kai-Shek Memorial Hall

5mins

Dongmen

Arriving

Daan Park

9:41

Metro

Map

Explore

Profile

Route Planning

Enter your starting and destination station to see a detailed itinerary just for you! Including fastest or simplest routes, price, and travel time.

Enter your starting and destination station to see a detailed itinerary just for you! Including fastest or simplest routes, price, and travel time.

Station Information

Station Information

Access time tables, station facilities, exit infos, and station map.


Access time tables, station facilities, exit infos, and station map.

Map

Search any nearby attractions and get the best route from your current station.

Search any nearby attractions and get the best route from your current station.

Click on the exit icon for accessibility information such us elevators and ramps.

Click on the exit icon (pic. 4) for accessibility information such us elevators and ramps.

Explore

Explore shops in stations by searching what’s nearby and see what’s trending now.

My Profile

Improve the functionality of cask-back rewards system to allow better tracking and a more user-friendly experience.

Improve the functionality of cask-back rewards system to allow better tracking and a more user-friendly experience.

Check your saved trips easier and faster on your personal dashboard.

Check your saved trips easier and faster on your personal dashboard.

Profile feature: Cards

Profile feature: Offers

Profile feature: Lost & Found

Profile feature: Settings

More functions: Ride History, Coupon Offers, Lost & Found, Settings

Thank you for watching

Check out the prototype to see it in action

Thank you for watching

Check out the prototype to see it in action