Card Sorting & Tree Testing · Mobile IA
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?
A Metra rider doesn't browse. They glance at their phone walking to the platform, decide in seconds, and move. The current site doesn't fight them - but it doesn't move with them either. It was built for a desktop user with time.
Over 8 weeks, three of us redesigned Metra around how commuters use it.
PROBLEM STATEMENT
Metra's site works on desktop. On mobile, it fights you.
What was the Problem?
Buying a ticket takes too many taps. Checking a schedule means scrolling past content built for a wider screen. Service alerts live a level deeper than they should. None of these matters when you're at a desk. All of it matters when you're walking to a train
USER RESEARCH
Where commuters lost the thread, and why
We rebuilt Metra's information architecture from scratch using a content inventory of the existing site, then validated it across two rounds of card sorting and two rounds of tree testing in Optimal Workshop.
Card sorting told us how commuters mentally group transit tasks. Round 1 used 61 cards across 11 categories - match rates landed below our 50% threshold, and 13 cards ended up in the "I don't know" pile. Round 2 collapsed to 8 categories with clearer labels (adding "Line" to every train name jumped match rates to nearly 100% for those cards). The "I don't know" pile dropped from 13 cards to 1.
Tree testing measured whether the new structure actually worked. Across two rounds, success rates held at 87% - but directness, the share of users who found the answer without backtracking, climbed from 60% to 69%.
Four tasks still landed under 70% directness in round 2. Two stand out:
Fare calculator: 27% directness. 36% of testers expected it under "About Metra." Another 36% looked under "Plan Your Trip." We kept the calculator as a standalone tool but surfaced it from both entry points, accepting that no single mental model covered the majority of users.
Train schedule check: 36% indirect. An extra "Check Train Schedule" sub-layer added a tap users didn't expect. We collapsed the layer entirely.
These weren't labeling problems. They were structural — places where the IA didn't match how commuters categorized tasks. Those decisions shaped the final navigation.

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.

Prototype
CORE SCREENS
Navigation - Surface what commuters do every day, hide what they don't
Tickets, schedules, and live status on the homepage. Everything else in a flat, clearly labeled sidebar.
Why: Card sort round 2 collapsed 11 categories to 8. Match rates cleared 50%, "I don't know" dropped from 13 cards to 1. Eight was the point users stopped guessing.
Ticketing - optimize for the repeat purchase, not the first one
Homepage entry. One-tap re-purchase on recently booked lines. Face ID checkout. QR code on completion.
Why: Tree testing showed users completing the task but backtracking inside it — directness rose 60% → 69%. Most hesitation sat between intent and checkout. Most Metra riders buy the same ticket every week.
Schedules & Alerts - Collapse the layers tree testing flagged
Two entry paths — by station, by line. Live tracking and alerts in one view.
Why: 36% of testers got confused by an extra "Check Train Schedule" sub-layer. Construction notices sat in their own page with an 18% failure rate. Both fixes were deletions
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.