Metra Chicago

Mobile-first concept redesign of Metra Chicago, focused on streamlining everyday commuter travel across Illinois

Role

UX Design,

UX Research

TIMELINE

8 weeks

SKILLS

UX Design

User Research

Prototyping

TEAM

3 UX Designers

OVERVIEW

Why is METRA so important for Illinois residents?

Metra supports daily commuter travel across Chicago and its surrounding suburbs. Riders frequently depend on its digital experience to check schedules and purchase tickets, often under time pressure and on the go.

The existing web experience, while functional, lacked the clarity, responsiveness and structure needed to support quick mobile decisions, creating friction during critical commuting moments.

PROBLEM STATEMENT

METRA’s digital experience worked, but not when it mattered most.

What was the Problem?

Designed primarily for desktop use, the platform lacked the clarity and responsiveness. It needed to support commuters making quick decisions on mobile, under real-world time pressure.

Design Intent

What was the intent behind this project?

This project reimagined Metra as a mobile-first experience designed around commuter behavior and not desktop navigation.

The focus was on prioritizing quick access to schedules and tickets, clear navigation, and visible system status during everyday travel

USER RESEARCH

When time is limited, navigation friction becomes a critical failure

To understand how Metra performs under real commuter constraints, we evaluated the existing experience through scenario mapping, heuristic walkthroughs, and information architecture testing.

Across both daily and infrequent commuters, the same issues surfaced repeatedly: unclear labeling, dense navigation, and complex task flows made essential actions slower and more effortful than necessary. While the platform functioned on desktop, its structure broke down on mobile - where responsiveness, hierarchy, and scannability are critical during time-sensitive travel.

These insights directly informed a mobile-first information architecture focused on clarity, speed, and immediate access to core commuter tasks.

SOLUTION

Designing for urgency requires clarity over complexity.

This project reframed Metra as a mobile experience designed for real-world commuting—where time is limited and decisions matter.

By prioritizing clarity, fast access to core actions, and visible system status, the redesign supports commuters in moments where hesitation leads to missed trains. The result is an experience built for movement, not browsing.

Prototype

CORE SCREENS

Navigation

The homepage functions as an action hub, bringing high-frequency commuter tasks to the forefront while secondary options remain accessible through a simplified hamburger menu.

Quick links provide direct access to core tasks
My Tickets is available in one tap
A flat, clearly labeled sidebar replaces deep menus

This structure enables fast orientation and confident decision-making without unnecessary exploration.

Ticketing

Ticket purchasing was streamlined for moments when time is limited and certainty matters.

Direct entry from the homepage
Clear distinction between one-time tickets and passes
Recently booked train lines enable fast re-purchasing
Face ID supports secure, frictionless checkout
Purchased tickets surface immediately with a visible QR code

The flow minimizes hesitation between intent and completion—especially just before boarding.

Schedules & Alerts - Staying Informed in Real Time

Schedule checking adapts to how commuters think—by station or by train line—while keeping real-time visibility central.

Access available from both homepage and navigation
Dual search paths: by station or by train line
Live tracking and ETAs provide real-time status
Service alerts are embedded within the flow

The experience prioritizes clarity and reassurance during time-sensitive travel.

Outcome

what was achieved by doing this?

This mobile-first redesign demonstrates how a clearer structure and task-focused flows can better support commuters during time-sensitive travel. By aligning navigation, ticketing, and schedules around real-world decision-making, the experience reduces friction in moments where clarity directly impacts outcomes.