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
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.
Initial Version
Version 1
Final Design
Buy Product Process
It takes me over 3 minutes to complete the buying process due to six steps involved. Particularly, the station and destination steps require scrolling through a long list to find the desired destination. The list displays the station name in a dim and small font, making it less accessible.
To address these issues, I propose combining the station and destination pages into one page with a scrolling list. This will make it easier for riders to clearly view their start and end destinations. However, this change will not significantly affect the number of steps required, which will still be five.
Next, I explored various options to simplify the process. Ultimately, I designed a form list at the top of the home page to display all the selections. This allows users to quickly review their choices and purchase tickets without navigating to another page. This final design successfully reduces the ticket purchase time to less than one minute.
Initial Version
Version 1
Final Design
Timetable Page
Currently, there is no mobile version of the timetable available. Instead, it links to the online web version. This poses a challenge for users when checking the time, as the web version displays the entire timetable with all the stations. Users need to pay close attention in order to find the relevant information. To address this issue and make it easier for users to find their desired information, I have designed a form list similar to the buy product page. This will help users easily locate and modify their search keywords.
Initial Version
Version 1
Final Design
