up arrow
A Metro App (IOS) Case Study

Reimagining a better experience
for LA Metro riders.

CLIENT
LA Metro
Timeline
2020 (4 Months)
Role
UX Researcher, UX Designer
TOOLS
Figma
View Prototype
Overview

What is the GoMetro App?

GoMetro is a mobile application that helps Metro riders plan their trip around the city of Los Angeles (available in the App Store and Google Play Store). Users can retrieve Metro's rail/bus arrival times and system alerts for efficient scheduling.

The app has gone through plenty of updates since its' first product launch, yet the app still holds an average 2 star rating. (Jan 2020)
Why Redesign?The app is lacking in particular areas, but the GoMetro app has immense potential for what a transit app can provide for its' users.

The main objective for this case study is to improve the commuter's experience within the GoMetro iOS app and strengthen Metro as a business.

Disclaimer: I am not affiliated with Metro in any capacity.
My commute results from Pasadena to Santa Monica
The Story

Commuting Can Be A Drag

Life of a commuter is rough. I used to drive from Temple City to Santa Monica for work until I adjusted to commuting by rail. A few months into my commute journey, I discovered a Metro app that can relieve the quality of my commute.
‍
The app lacked a lot of things I wish the transit app would provide me:
1. A quick and efficient way to add funds to my tap card.
2. Real-time updates for lines.
Other riders had issues with the app and didn't bother to use it. This problem sparked my curiosity and inspired me to take on the design challenge.
The Problem

Metro riders are having a hard time planning their commute with the app.

Metro riders are experiencing longer commute times. The tasks of a rider's commute is predictable, but timing is not. Every day there are different obstacles riders face, whether it is showing up to a bus/rail that is undergoing maintenance or getting into a long line to reload funds. All these factors impact a person's schedule from just a few minutes to hours.
Can a redesigned Metro app help improve users’ commute and benefit Metro as a business?
User Research

Let's Look at Some Statistics

Through Metro's source hub of user surveys and rider statistics, the most interesting survey question was how often riders use mobile applications to get traffic information (see stats). This gives a better perspective of the user base for the app.
How often do you use mobile applications to get traffic information?
Bus
Very Often
49%
Occasionally
21%
Rarely
13%
Never
17%
Rail
Very Often
44%
Occasionally
23%
Rarely
15%
Never
18%
Fall 2018, On-Board Survey Results - Metro Research PDF
App Reviews

What are users saying?

App reviews give insight on how the app is functioning and what people like and dislike about the current product. Below are some reviews most people wished the app should be able to do.
IDEATION PHASE

Initial Notes and Concepts

Rough sketches and notes
Designing Solutions

Focused Pain Points

After much research and consideration, I decided to build the redesign around three focused user pain points.
Planning a Trip
Adding Funds to Tap Card
Checking Arrival Times
#1
Pain Point

Planning a Trip

Planning a trip on the app is essential to access all information about the user's trip. The app should include trip information like the ETA to rider's destination, bus/rail delays, and trip cost. Metro app currently does not provide these expectations.
Pain Point #1

Where do users go plan a trip?

The primary function of Maps is to search Metro lines, stops, or stations. This can be very limiting for users if they don't know which line, stop, or station they wish to start from.

As an alternative, users can begin planning by accessing the Trip Planner. The function is located within thumb's reach(see photo). Users cannot search Metro lines, stops, or stations through the Trip Planner.
GoMetro App - Map, Trip Planner 2020

The Trip Planner isn't very helpful

Riders are able to receive simple information about their trip like ETA and directions. New and inexperienced riders will find the directions confusing and will need supplementary help.
The Solution

Plan a Trip in an Instant

With the new redesign of the Trip Planner, users can swiftly plan their trip with recently saved searches and personalized favorite places. The new Trip Planner enables users to plan their trip with real-time transit information like arrivals or service outages.
Redesign
- Trip Planner 2020
Redesign
- Live Navigation View 2020
The Solution

Live View Navigation

A standard list of directions can only guide the rider so much. The new live view navigation factors in real-time traffic information and guides commuters where they need to go with turn‑by‑turn directions.
#2
PAIN POINT

Adding Funds

One of the most daunting tasks for a commuter to do is checking and adding funds to her tap card. This process takes time, depending on how a person decides to reload their tap card.
Long Lines for the Fare Machine
Pain Point #2

The 2 Ways to Add $ to Tap Cards

Fare Machine Screen - 1/6 to checkout

In Person

The user flow on the TAP vending machine is slow-moving. This typically takes about 2-3 minutes to go through. (Rough estimate for active riders)
Con: Process takes 2-3 min if there is no line and if everyone knew how to maneuver through the fare machine.
Reload Tap through Metro App

Through the App

Users can add funds through the GoMetro app. However, this requires a username and password every time the person signs in. Process takes roughly about 6 minutes.
Cons: Funds do not automatically get reloaded to your card.
- 2-3 business days on buses with fare boxes
- Up to 30 minutes on buses with mobile validators
- Up to 1 hour at rail stations with validators or turnstiles
The Solution

No More Lines or Delays

Users save time buying Metro passes or adding funds to their tap card ahead of time by using the redesigned app. Funds will be automatically added and updated for use once purchased.
Redesign
- Add Funds 2020
Three of the many tap cards I had to buy
Redesign
- Cards View 2020
The Solution

All Tap Cards in One Place

Add and access tap cards on the new GoMetro app. No need to carry or buy physical tap cards anymore!
The Solution

Tap Using Your Mobile Device

Metro's pay validators enables contactless payment with their physical tap cards. Users are able to pay with their mobile device using the advance NFC technology available today.

Riders can tap to pay like how they would with a tap card by simply tapping their mobile phones at the pay validators.
Tap to pay like how you would with a tap card.
Redesign
- Cards View 2020
#3
Feature'S EXPECTATION

Checking Arrivals

Finding arrival times or alerts of rails and buses can impact the rider's schedule. GPS will give transparency to users and help plan their commute more effectively.
Pain Point #3

When is the bus or train arriving?

GoMetro has many transportation lines. Currently, there are no GPS of the buses/rails available to the user. Riders are only offered limited information about the stops. If they want to find more arrival times, they would have to scan through the PDF attached in the app. The PDF is an issue because it is not an accurate arrival time.

Buses/rails can possibly be undergoing maintenance without the commuter knowing.
Readability is an issue on the current app.
GoMetro  - Maps & Schedule 2020
The Solution

Implementing Metro's GPS

Real-time updates and GPS locations of buses and rails offers users precise locations of buses/rails.
Redesign
- Arrivals 2020
The Solution

Locating Arrival Times

Users can retrieve detailed schedules through the arrival tab. These times are updated in real-time and offers an accurate time for arrivals. This will provide users all the stop details and alerts they need about the stop.
Redesign
- Arrivals 2020
The Solution

Encourage Commute Life

I've mentioned before, life of a commuter is rough. To lighten things up, a rider profile page will incentivize riders to return and check their stats. The profile offers stats on the rider's activity. Information from how much carbon dioxide riders saved to how many miles they traveled are fun ways to keep riders engaged on their contributions of reducing their carbon footprint.
Redesign
- Profile 2020
Takeaways

What I've Learned

Redesigning an app is a huge project. I didn’t expect myself to take as long as I did. Though, I did have a lot of fun time creating this case study from research to design.

Mapbox as a mapping provider.
Mapbox was the perfect platform to craft a map experience for this prototype. It allowed me to customize the map and emulate Metro’s brand without illustrating from scratch.

Using Metro's GIS data.
GIS (Geographic information systems) uses locations to organize information into layers on geographic visualizations. I was able to use Metro's GIS data in my project. Using Metro's GIS data helped me get precise coordinates of transportation lines.

How does GPS tracking work?
Metro also offers their API for third party apps to receive real-time bus/rail locations. Developers can grab these pieces of data and implement them into their apps.

Learning about NFC & how it works.
I was curious why the Metro app couldn't provide riders a virtual tap card and if it's because they did not have the technology for it. However, I figured it is possible. If Metro had the technology (pay validators) to read tap cards, they can include this experience on mobile. Newer phone models that have NFC technology can be used to tap and pay.
If I had more time . . .

Test, Design, Reiterate, and Repeat

I am proud of the design executions I took to make this final product possible (especially the profile page because it spreads carbon emissions awareness). If I were to revisit this app again, I would explore more pages and system alerts regarding the service outages.

If I had more time for this project, I would execute more user research, interviews, and testing. Users are the most important factor if the product is up to par or not; they are who we are designing for. With more testing of the app followed by feedback from actual users, improvements could be made to the product and hopefully verify my design solutions, which aim to elevate riders’ quality of commute and attract more Metro app users.

Prototype + Lo-Fi

View Prototype

Thank you for scrolling!

More UI/UX Projects
PROJect 1

SmartFinancial Website

SmartFinancial is a fast growing tech company and is going through constant growth and need strong brand recognition and web presence.
View project
PROJect 2

The Roots Intranet

The Roots Intranet is Leaf Group’s redesigned personal computer network where employees can access company documents, information, and updates. Take a look at the project that helped jumpstart my interest in UI/UX.
View Project

Other Work

Meraki Chocolate

Branding, Packaging Design
View Project

Sticky Grams

3D Modeling, Branding, Packaging Design, Marketing
View Project

Leaf Group Rebrand

Branding
View Project

Society6

Social, Email Marketing
View Project

Let's Connect!

aluu.designs@gmail.com
(feel free to chat with me about anything)
© 2020 Alexis Luu. Built with lots of TLC ✨