Redesigned Caltrain App

As someone who is big on simplicity and having a great experience, I decided to redesign the Caltrain app using Balsamiq. I hoped to improve user experience by making the app more intuitive.

Occasionally, I take Caltrain to San Francisco, instead of getting stuck in traffic or dealing with exorbitant parking fees. Sometimes, I run into the issue of forgetting my clipper card and having to line up to use the ticket machines. It drives me insane that there seems to either always be a line, or not enough ticketing machines. I often found myself wondering why until recently, there wasn’t an app to address these issues since Apple launched their app store ten years ago.

10 years later….

Caltrain officially launched their long overdue app this Feb (I hope providing free wi-fi to commuters will be the next great idea they implement)). In addition to my excitement at the prospect of spending less time in line to buy a ticket, there was the benefit of reducing paper waste and not worrying about losing my paper day pass.

These problems were addressed with the new application, but other problems which I didn’t think of initially were magnified and I was left with the feeling that it could be improved without reinventing the wheel.

First and foremost, I would summarize my expectation of experience (from when I am about to buy a ticket to when I no longer need to use Caltrain for the day) in 4 phases:

• Ease of navigating the app
• Ease of buying the ticket
• Ease of showing proof of my ticket to an inspecting agent
• Getting other information that are relevant to me when I get to my final Caltrain destination ride

We often hear about usability — how well a design solution performs in terms of ease of use, ergonomics, and usefulness. But while using the new app, I experienced the following issues:

• Too many clicks/touches just to buy a ticket
• An app that wasn’t easy to navigate
• Not enough information that could be helpful for my journey

Here is what it looks like to buy a ticket

Based on these pain points, I decided to embark on a quest to revamp part (and not all) of the app.

I broke up this project into 4 stages

• Research
• Revamp and simplify the homepage
• Redo the structure of the app
• Add customer requests

I set out to get conduct research…

Typically, I prefer to watch users interact with a product live or conduct a series of interviews to identify a pattern. But lacking this access, I approached my research differently.

First, I used the app store as my starting point. The current rating for the app is 2.2 and 2.1 on Google App Store and Apple app store respectively. Here are some users comment:

“No real time or static schedule. Some links appear to be just a wrapper for the mobile site”

“Include a real-time schedule. Also include monthly passes so that I don’t have to carry a clipper card anymore”

“One very important feedback that I have is to allow anyone purchase a ticket instead of trying to open an account…”

“Pretty disappointing. At least integrate with your twitter feed, have a static timetable…”

It sucks when you get reviews like these, but they are great feedback (and why I love product management). Some pain points were solved, but lots of opportunity remain to improve the product (or app).

I summarized customer feedback into 6 categories using the cost benefit analysis (Note — both cost and benefit are estimates)

Using a cost-benefit analysis methodology gives me the perspective on whether this project is worth undertaking. I prefer this approach when evaluating and prioritizing request from stakeholders with competing interest, as well as prioritizing product initiatives.

Simplify the homepage

As I started re-designing this app, my first focus was to make the homepage a summary of what experience users hope to get from it instead of dragging the user along. On the left is the current homepage as it takes the user directly to buy their tickets. The problem is, users don’t know what other experience to expect.

Change the structure of the app

With the homepage acting as a summary of the app, it became easier to work within each category — Buy Tickets, My Tickets, Schedules and Maps, and Events.

“Buy Tickets” is the most important section of the app, and with the highest cost benefit tradeoff. I focused a lot more time thinking about what would make a user happy and it came down to “less clicks/touches” and “structured list of stations”.

The current app requires a user to take 11 steps just to buy a ticket, which is more than the 8 steps it takes to buy a ticket physically at a station. Upon researching other popular transportation apps and experimenting, I reduced it to 6 steps. That’s almost half the current time, which could potentially lead to more sales and increase in customer happiness.

Secondly, the current app lists the stations from Northbound to Southbound or vice versa. I kept the structure the same but grouped them into zones to give the user a better idea of breakdown of fees and what locations they fall under.

Add User’s Request

As I outlined users pain points above, I thought the best way to address some of their concerns was to simply adding some feature request to the homepage. The ability to pay for parking and a listing of events easily accessible by Caltrain were amongst the top concerns; I focused on events.

Regarding listings of nearby events, I advocate for a partnership with ticketing companies(Eventbrite, Ticketmaster, StubHub) to display curated major events like SF Giants, College sports, Golden State Warriors, Oakland A’s, and SJ Sharks.

Key Takeaways

Re-designing an app doesn’t necessarily mean re-building from scratch or overthinking the process. Sometimes it’s about redesigning or simplifying the app so that the user can get that experience quicker.

I don’t believe redesigning this app is a one and done project, but instead an evolving project as users’ habits changes. Other areas of improvement which I didn’t address were but will in the future are:

• Real-time updates of schedule
• Ability to pay for parking
• Other payment options to be added (Bank Accounts, Venmo, etc)
• Buying events tickets on the app
• Sharing train journey status with friends and family

What’s next?

Here’s the workflow of my re-sketch but I’ll use invisionapp to redo the app. Look out for my future post.

If you have any feedback on my re-sketch or ideas I could have added, feel free to share in the comments sections.

Hope you enjoyed my article!