Fare Restructure and Ticketing Redesign_

Metrolink started a fare restructure pilot that introduced new passes, such as the SoCal Day Pass and the L.A. Zone Day Pass, and changed or retired others. In two months I redesigned the ticket-buying flow across ticket vending devices (TVDs), ticket office machines (TOMs), the mobile app and the web portal, based on field observation and testing at LA Union Station. The new destination-first flow made buying faster, clearer and more intuitive for riders of all ages.

What wasn’t working

• Confusing ticketing. Riders struggled with station selection, understanding fares and multi-step flows.
• Mistakes and lines. The confusion led to wrong purchases and long lines at the kiosks.
• New fares to fit in. The restructure added new passes and rules, and changed or retired others.
• An overly complex flow. Too many steps added friction before a ticket printed.

The goal

1. 01AlignKickoff with stakeholders on goals and constraints
2. 02Observe50+ riders at LA Union Station
3. 03MapAudit of the TVD screens and the current flow
4. 04DesignSketches, wireframes and a clickable prototype
5. 05TestTwo rounds of field testing with commuters

Field research at LA Union Station

• Watched 50+ riders buy tickets at the busiest kiosks with my Project Manager and UX Director, and chatted with some about their experience
• Most riders were frequent travelers who knew the machines, and one-way tickets were the most common purchase
• Some tourists were unsure which station was closest to their destination
• At the ticket office, Customer Relations Representatives asked “Where to?” first, a shortcut the design could adopt

Understanding Metrolink riders

Metrolink’s personas showed a diverse group of riders, each with different behaviors and pain points:

Key insights

• Riders think about their destination before their ticket type
• Tourists needed a map and visual confirmation
• Customer Relations Representatives used shortcuts and mental models the design could adopt
• Frequent ticket types needed to be more prominent, and new passes clearly distinguished

Mapping the current flow

• Audited the current TVD screens
• Mapped the existing ticket-buying flow end to end
• Found it overly complex, which added unnecessary friction, so streamlining it became the priority

Design strategy

• Optimize the flow: fewer steps and screens, and faster selection
• Home screen hierarchy: put the Day Pass first to match business goals, with every fare option still clear
• Destination selection: a more efficient layout, clearer text and search help for picking a station
• Speed: simpler interactions and less cognitive load, for quicker decisions

I rebuilt the flow around the rider’s destination, added a quick path for the SoCal Day Pass, and carried the design across kiosks, the ticket office, mobile and web.

Destination first, with a Quick Pass

• I first designed a ticket-type-first flow, so riders could grab a Day Pass without choosing a destination
• Metrolink proposed destination first, to capture origin and destination data
• I pushed for more validation. Customer Relations Representatives asked “Where to?” first, and kiosk riders arrived knowing their destination, so destination first matched real behavior
• My pushback on requiring a destination for the SoCal Day Pass led Metrolink to remove it from the Quick Pass, for a faster checkout

Discounts at payment

• Proposed moving EBT card, promo code and corporate card discounts into the payment screen, in line with industry practice
• That would have removed the separate Special Tickets category from the home screen
• Technical constraints and executive decisions kept the existing structure, so I kept that flow as intuitive as possible and documented discounts for future iterations

Home screen concepts

• Sketched home screens that promote the new Day Passes and simplify navigation
• Grouped related options into clear categories
• Gave the SoCal Day Pass a visually distinct, quick-access entry

Helping tourists find their station

• Station search with a keyboard and suggested stations
• Quick access to the system map for riders who can’t find their station
• A station list with a map preview for visual confirmation

Explaining the L.A. Zone Day Pass

• A simple line map with station names
• A text list of the stations the pass covers
• Coverage shown in more than one way, so every rider can check it

Testing with real commuters

I presented concepts to Metrolink, iterated on their feedback, then built a clickable prototype and tested it with commuters at LA Union Station. What we found:

A second round of testing with a high-fidelity, interactive prototype validated the refinements.

Updating the Metrolink app

• A darker blue home screen that matches the kiosks and ticket office machines, with more contrast
• Updated icons, with the same icon buttons for the new ticket types
• Extra links moved to secondary buttons at the bottom of the screen
• New SoCal Day Pass and L.A. Zone Day Pass tickets, with their own icons and branding
• Three options for the cluttered Utilities menu, based on analytics of the most visited links: five key links, grouped categories, or links phrased as rider questions

• Destination-first flow: matches how riders and ticket office staff already think about a trip
• Quick Pass: a fast entry for the SoCal Day Pass, with no destination needed
• Fewer station-selection errors: search, the map and a station list help riders pick the right station
• Validated in the field: two rounds of testing at LA Union Station
• A complete handoff: documented designs for kiosks, the ticket office, the mobile app and the web portal

From the field