Caltrain Display Case Study
Caltrain Display Case Study
2025
UX Design | Accessibility | Figma | Sketching
2025
UX Design | Accessibility | Figma | Sketching
ABOUT
ABOUT
I redesigned a train information display system to make it more visual, accessible, and intuitive. I researched train systems across the world to inform my design. Then, I turned my sketches into high-fidelity Figma screens.
I redesigned a train information display system to make it more visual, accessible, and intuitive. I researched train systems across the world to inform my design. Then, I turned my sketches into high-fidelity Figma screens.
CHALLENGE
CHALLENGE
With the rise of mobile-only tickets and maps, what do you do without a phone on hand?
Is the system accessible? Will non-Native English speakers or elderly passengers be able to reach their destinations safely and without stress?
With the rise of mobile-only tickets and maps, what do you do without a phone on hand?
Is the system accessible? Will non-Native English speakers or elderly passengers be able to reach their destinations safely and without stress?
Caltrain's screens often get stuck on "Welcome Aboard." Some show the next stops, but are hard to read quickly and leave out other information like arrival times or delays.
This creates difficulty for:
➢ New or elderly passengers, who may need more guidance
➢ Users without phones to navigate
➢ Users that aren't fluent in English, who may not be able to rely on audio announcements alone
Caltrain's screens often get stuck on "Welcome Aboard." Some show the next stops, but are hard to read quickly and leave out other information like arrival times or delays.
This creates difficulty for:
➢ New or elderly passengers, who may need more guidance
➢ Users without phones to navigate
➢ Users that aren't fluent in English, who may not be able to rely on audio announcements alone
PROCESS
PROCESS
I began by researching train information display systems across the world. I learned that:
➢ Universal visuals can replace words.
➢ Linear timelines can be understood at a much faster speed than maps.
➢ The next station is usually the most prominent thing on screen, everything else should be secondary.
I began by researching train information display systems across the world. I learned that:
➢ Universal visuals can replace words.
➢ Linear timelines can be understood at a much faster speed than maps.
➢ The next station is usually the most prominent thing on screen, everything else should be secondary.
I took a lot of inspiration from other transit around California, such as BART and even the SFO AirTrain.
I took inspiration from California transit, like BART and even the SFO AirTrain.
Japan incorporated the remaining time (min) with each stop.
Japan incorporated the remaining time (min) with each stop.
I asked Caltrain riders what they found most important. They wanted to know the upcoming station, how many stops are left, and that they're on the right train!
I asked Caltrain riders what they found most important. They wanted to know the upcoming station, how many stops are left, and that they're on the right train!
With four official languages, information in Singapore is often represented many ways.
These sketches and notes became the foundation for my design.
These sketches and notes became the foundation for my design.
RESULTS
RESULTS
The final screens are clear and accessible. Multiple languages and an intuitive timeline resolve pain points in the existing system.
The final screens are clear and accessible. Multiple languages and an intuitive timeline resolve pain points in the existing system.
Display 1: Arriving at the Station
Goal: Help users orient themselves immediately and provide clarity for 1) people on the train 2) people boarding the train.
Design:
➢ Clear station name and direction ("Southbound")
➢ Minimalist UI to lower cognitive overload
➢ A different color for the current stop immediately draws the eye; green is a cue for "Yes!" or "Go!"
➢ High-contrast text is accessible and readable
➢ Three languages boost inclusivity
Result: People know where they are and where they’re headed in under 2 seconds.
Display 1: Arriving at the Station
Goal: Help users orient themselves immediately and provide clarity for 1) people on the train 2) people boarding the train.
Design:
➢ Clear station name and direction ("Southbound")
➢ Minimalist UI to lower cognitive overload
➢ A different color for the current stop immediately draws the eye; green is a cue for "Yes!" or "Go!"
➢ High-contrast text is accessible and readable
➢ Three languages boost inclusivity
Result: People know where they are and where they’re headed in under 2 seconds.
Display 2: Next Stop
Goal: Show riders the next stop, as well as other stops in more detail so they can plan accordingly.
Design:
➢ Stops include delays and arrival times
➢ The next station is clearly written on screen and visually highlighted
➢ High-contrast text is accessible and readable
Result: Passengers get more information without the visual clutter, including arrival times. This helps commuters, new riders, and those without a phone.
Display 2: Next Stop
Goal: Show riders the next stop, as well as other stops in more detail so they can plan accordingly.
Design:
➢ Stops include delays and arrival times
➢ The next station is clearly written on screen and visually highlighted
➢ High-contrast text is accessible and readable
Result: Passengers get more information without the visual clutter, including arrival times. This helps commuters, new riders, and those without a phone.
Display 3: Connections
Goal: An interconnected transportation system where users can easily identify bus/train connections.
Design:
➢ Transfers are listed with clear icons and minimal visual clutter
➢ Upcoming stops remain on screen
➢ Designed for fast decision-making and simplicity
➢ Three languages boost inclusivity
Result: Users can quickly see transfer options, allowing them to take full advantage of California's public transport.
Additional designs showcase a shrinking timeline as the train approaches the final stop.
Display 3: Connections
Goal: An interconnected transportation system where users can easily identify bus/train connections.
Design:
➢ Transfers are listed with clear icons and minimal visual clutter
➢ Upcoming stops remain on screen
➢ Designed for fast decision-making and simplicity
➢ Three languages boost inclusivity
Result: Users can quickly see transfer options, allowing them to take full advantage of California's public transport.
Additional designs showcase a shrinking timeline as the train approaches the final stop.
I emphasized accessibility and an inclusive design, which guided my trade-offs and design decisions. These screens work as a system to support Caltrain's diverse users.
I emphasized accessibility and an inclusive design, which guided my trade-offs and design decisions. These screens work as a system to support Caltrain's diverse users.
Every experience is a chance to learn something new. I'm ready for the next one.
San Francisco, CA / Champaign, IL
Every experience is a chance to learn something new. I'm ready for the next one.
San Francisco, CA / Champaign, IL