Redesign of the Caltrain Mobile App - Solo UX Project
Caltrain Mobile App is a train app based in California. The app help riders purchase tickets and search the timetable easier and efficiently.
My Role
UX/UI Designer
Timeline
Fall 2021 (4 months)
Type
User Experience Design,
User Interface Design,
Mobile App Design,
User Research,
User Test
Tools Used
Figma, After Effect, Photoshop
Overview
Overview
Prompt
Being a frequent rider of Caltrain, I take Caltrain at least twice a week to visit my family. I always check the timetable before purchasing a ticket using the Caltrain mobile application. However, when I tap on the timetable, it redirects me to the online timetable page. The page displays the entire timetable at once, making it difficult for riders to find the information they need. It always takes me a long time to check, and I believe it could be troublesome for other users who want to check the time. Therefore, based on my poor user experience, I would like to redesign it to improve riders' experience.
Design Process
Motivation → Heuristic Evaluation → User Research → Design → Iteration → Final Design
Heuristic Evaluation
Home Page
-
The button is not obvious enough, and it doesn't look clickable.
-
The storage space lacks intuitiveness, causing confusion for users.
-
There are too many categories on one page, and some may not be necessary.
Buy Ticket Process
-
This option lacks readability and accessibility.
-
Even though this option adds an icon, the chosen color is still too dim to read.
-
With long lists, it becomes difficult to find the desired station for riders.
-
The cancel button and the left icon lack consistency.
-
The progress bar resembles more of a navigation bar.
Timetable
-
There is no mobile version timetable. The current timetable is not responsive and user-friendly.
Research
Competitive Analysis
Caltrain App Rating
Audience Research Summary
-
The main gender of riding a Caltrain :
Male 55% > Female 39% > Other 6% -
The main age of riding a Caltrain : 25-34
-
The main purpose of riding a Caltrain : Commute to work
Interview
Interviewee 1
Interviewee 2
Persona
Design Goal
01
Simplify Home Page
02
Reduce Buy Product Process
03
Increase Mobile Version Timetable
Final Design (Design Iteration)
Home Page
As a frequent Caltrain rider, I check the timetable before buying tickets through the app. However, the app redirects me to a full online schedule, making it hard to find specific times. This process is slow and likely frustrating for other users too. Based on this poor user experience, I’d like to redesign it to improve the overall rider experience.
Initial Version
Version 1
Final Design
Buy Product Process
The current ticket purchase process takes over three minutes due to six steps, with the station and destination steps requiring users to scroll through a long list with small, dim text. To improve this, I propose combining these steps into one page with a clearer, more accessible list of stations. While this won’t reduce the steps significantly, it will make the process smoother. Additionally, I designed a form list at the top of the homepage to display all selections, allowing users to review and purchase tickets without navigating away. This reduces the total time to under a minute.
Initial Version
Version 1
Final Design
Timetable Page
Currently, there is no mobile version of the timetable, only a link to the web version, which shows the full schedule for all stations. This makes it difficult for users to find specific information quickly. To solve this, I’ve designed a form list similar to the product purchase page, allowing users to easily search, find, and modify their desired stations, making the process much more user-friendly.
Initial Version
Version 1
Final Design
