Caltrain is a California commuter rail line in the San Francisco Peninsula and Santa Clara Valley. This conceptual project, conducted during the winter of 2017, is a response to commuter frustrations over the usability of Caltrain's website. Specifically, users complained about having difficulty planning trips and navigating through Caltrain timetables on smaller screens. The resulting solution sought to create a seamless experience focused on trip planning and optimized information accessiblity across all devices, particularly for the mobile phone.
KEY TASKS
User Research
Interaction Design
Interface / Visual Design
Prototyping
Usability Testing
KEY DESIGN TOOLS
Sketch
Illustrator
InVision
one
Background
servicing the bay
Spanning almost 80 miles with 32 stations, Caltrain averages a weekday ridership of over 62,000 people. The demand for more service and trains continues to rise.
In the long-term, Caltrain will address the ongoing capacity issues with its Modernization Program, an electrification upgrade that increases service (from five to six trains per hour, per station). Its site currently provides information on stations, schedules, and a breadth of other content, from parking and fares to newsletters and business plans.
two
the challenge
improving the caltrain experience
As Caltrain continues to expand, it needs a site that matches its growth and can helps riders pinpoint location and departure information quickly and without hassle. Currently, the site is not responsive, and its main timetables — comprehensive charts of train times crammed onto a single-page PDF — are difficult to read on a smartphone. Of course, commuters can plan their trips ahead of time on a desktop or print out the time tables for easier viewing, but on-the-go users may not always have this luxury.
In light of this, the goal of this redesign is to help make Caltrain's site mobile friendly and easier to use from the standpoint of trip / route planning. Additionally, I noticed an opportunity to improve the legibility and readability of the site's station information by breaking up and visualizing its text-dense content.
Screenshots of how the current Caltrain site's home page (left), timetable (middle), and station information (right) appear on a mobile phone screen.
Screenshots of how the current Caltrain site's home page (left) and "how to ride" information (right) appear on a desktop screen.
three
Research
primary & secondary research
I conducted both primary and secondary research for contextual framework on Caltrain's operations and to better understand industry trends and users' public transit needs. This research helped me identify opportunities to improve upon or extend on the pain points uncovered and the strategies found.
LITERATURE REVIEW
NEWS & MEDIA SCAN
A literature review as well as an in-depth news article and media scan exposed me to a set of themes and trends within the current public transit industry.
"The biggest transit trend for 2017 is flexible, user-friendly technology that allows customers to plan their trips in real time [and] directly connects them with information about their trip."
— Paul Comfort
CEO and Administrator, Maryland Transit Administration (MTA)
KEY TRENDS
•• 2017 saw the rapid increase in usage of TNCs and transit apps.
•• Human-centered designs are here to stay.
•• IoT will be incorporated into future transit assets.
•• Mobility as a Service (MaaS) will become the norm.
•• Real-time technology will become a necessity for passengers.
•• Zero cost and zero emission will be the future of public transit (electrification of transportation).
•• New and unexpected markets will help improve ridership:
"Captive by choice riders" can afford to purchase vehicle but choose not to do so and use public transit.
It will be important to understand the dynamics of the new markets and provide tailored service.
•• New and unexpected markets will help improve ridership:
- "Captive by choice riders" can afford to purchase vehicle but choose not to do so and use public transit.
- Existing user segments: "captive" and "choice" riders
- It will be important to understand the dynamics of the new markets and provide tailored service.
•• Advanced technologies will reshape public transit (e.g. TNCs, bike and ride shares). Transit services need to work closely with tech providers to ensure safety and help users learn and accept the tech.
•• Remember the core service.
Provide the best mobility options and improve congestion and the environment through frequency and reliability.
•• Big data will help refine connected mobility.
•• Big data will help refine connected mobility.
↓
KEY TAKEAWAY:
It is now more important than ever for public transit services to be proactive rather than reactive. They must learn how to leverage existing and upcoming technologies to provide optimal service.
COMPETITIVE ANALYSIS
To get a clearer scope of the competitor space, I analyzed and compared the following public transit systems and surveyed the features on their websites.
field study
Six Caltrain users were randomly selected and interviewed at Caltrain stations as they waited for their upcoming trains to arrive. This field study research was aimed at understanding how users currently feel about the Caltrain website as well as the Caltrain riding experience as a whole. The goal was to gain insight on user habits, preferences, and trends regarding Bay Area commuting and Caltrain usage.
Synthesis
To further synthesize the field study responses, I created an empathy map to visualize user attitudes and behaviors to best make sure the solution aligns with a deeper understanding of the end user.
#1
Search a direct route / path with clear start and finish inputs (e.g. 700 Waltermire St. to SF Museum of Modern Art)
#2
Looking at a particular station's overall schedule (e.g. an office employee wants to know which trains he can catch depending on how late he stays at work that day)
#3
Looking at overall timetables to gauge the best possible traveling option depending on which station they start and finish at (e.g. Hillsdale station has many more departure options than the Hayward Park station)
four
define
pinning down the target user &
simplifying the site navigation
I distilled the insights gathered from my research and split Caltrain's primary users into two types: the regular user and occasional user (Rachel and Armin, respectively). I later added a third type — the new user — to ensure that all rider types would be accounted for during the ideation and design phases. These personas grounded the subsequent design decisions by serving as a reference point for addressing the target users' needs.
Persona
personas
user tasks & flows
restructuring the global navigation to improve informational accessibility
I decided to make organizational changes to the global navigation (and consequently, the site map) based on the below rationalizations, which resulted from competitive analysis of multiple site maps belonging to public transit systems within and outside California (BART, Amtrak, Megabus, MARTA, NYT).
- Consolidate redundant content to help save users time (e.g. system map and fare chart, bids & contracts appearing on home page and under different points under "About Caltrain").
- Similar to MARTA, simplify global navigation and place content into concise buckets. (Current nav contains a heap of unorganized items; needs a closer look at categorization.)
- Shift pages to better match their label.
- Incorporate a separate trip planner page for those who want to map out their entire journey from start to finish (similar to Google Maps).
Old structure
New structure
five
Wireframes
Blueprinting the caltrain redesign
Below is a subset of low to mid fidelity wireframes that provided the framework for later iterations of designs. The mid fidelity screens were prototyped on InVision and evaluted during usability tests on the following:
- Time taken for users to retrieve real-time departure information
- Time taken for users to plan a trip
- Whether users grew confused, frustrated, or distracted during their tasks (i.e. lost clicks?)
- User reaction and thoughts about overall experience
- Opportunities for improvement (areas of oversight, errors, omissions)
six
design
Visual design
Adhering to Caltrain's existing color palette, I made all subsequent visual design alterations and decisions based on Caltrain's established brand message.
key screens
