BART Mobile


Personal project to improve the on-boarding process of BART



Mobile UX/UI Design 


Sketch, Principle, Adobe Photoshop 



User research has shown that the majority of user problems with BART (Bay Area Rapid Transit) stem from:


  1. A lack of efficient technology at BART stations

  2. A lack of user awareness regarding BART resources

User responses revealed frustration with the inefficiency of the automated ticketing machines at BART stations. Users said that the process of using the ticket machines is generally straightforward but feels time-consuming, especially when you have little time to catch a coming train, loaded too little or too much money on your ticket/Clipper Card* (no automated feature in machine to calculate exact fare), or are traveling in a large group and have access to a limited amount of machines in the station.


Furthermore, in order to board the correct train, the majority of interviewees said they relied on some external source such as Apple Maps, a BART route map posted around the station, or a fellow passenger on BART. Some users complained that these methods weren’t thorough, and a common user experience reported was boarding a BART train in the wrong direction.


BART offers an app, BART (Official), that contains an extensive “Plan Trip” feature to map one’s personalized route via BART with a fare calculator and service advisories. 100% of users interviewed stated that they didn’t know about BART (Official) or never used it. 



*A Clipper Card is a physical card in which users can upload money at a discounted rate and use for various Bay Area Transportation modes such as BART, Cal Train, AC transit, etc.


  • Create a simple mobile ticketing process, within the BART app, that incorporates a trip planner, fare calculator, and the ability to buy tickets, popularizing the app altogether

  • Improve the BART (Official) app’s UI 


User Persona 

(persona based on 10 user interviews)

Colin Brooks 

"The onboarding process of BART often feels tedious and involved".


Male, 20

Berkeley, CA

Psychology Major at UC Berkeley

  • Takes BART twice a month to go into SF with friends

  • Loads Clipper Card every other time he’s at the station and loads about enough money for current round trip 

  • Relies on Apple Maps for his BART route 


Colin's Goals

  • Explore San Francisco frequently

  • Save money everywhere he can 


  • board transportation...

    • rapidly​

    • efficiently

    • in a stress-free manner

    • safely

    • knowledgeably

Pain Points

  • Hates having to stop and load Clipper Card frequently at station, but doesn’t want to load more money than is required at once

  • Has experienced a few service delays before and didn’t know in advance

  • Doesn’t enjoy being in BART stations for extended amounts of time, buying tickets - feels unsafe and dirty, also chance of missing train

  • Boarded a train going in the wrong direction when he first began riding BART


1. Strangely enough, the BART (Official) app already tackles a lot of these user issues 


The BART (Official) app contains up-to-date information advisory warnings and schedule changes. Additionally the app gives you the ability to “Plan Trip” from Point A to Point B with the most efficient route, thorough directions, and the exact cost of the entire trip. However, based on my user research, interviewees didn’t initially know about the app or they didn’t feel the need to download it as they could just Google the same information when they needed access to it, especially people who rarely use BART. 


2. Incorporating a mobile ticketing feature into the app will solve the majority of user issues found


A mobile ticketing feature will eliminate the largest amount of user time spent at the station and make adding value to a ticket/Clipper Card more seamless; it will also allow for users to purchase their tickets with their exact route in mind, including their journey to and from BART stations. Additionally, this feature will incentivize users to download the BART app and have access to more stress-reducing features such as service advisories, the schedule in real time, and in-depth details of the train they are going to board. It ideally would also encourage users to take more trips on BART. 


3. There are shortcomings with the BART (Official) app 


The app has an outdated and muddled user interface, and no way to immediately purchase tickets or load one’s Clipper Card.  

Current Design of the BART (Official) app 






















4. BART is currently testing mobile ticketing in a simplified manner


BART has released a BART to Airport app which actually allows users to purchase mobile tickets, in groups, to and from airports. While the app does effectively allow users to buy tickets for this purpose, it doesn’t walk the user through their potential experience on BART before they buy their tickets, an aspect that was deemed to be very important to the user. 

Current Design of the BART to Airport app 




















  • User can choose a starting and ending point, departure time, and means of transportation to and from BART stations for their trip (primary options are walking, biking, and driving to stations) 

  • Contains a list of trip options with information such as a route, service advisories, fare, and total travel time 

  • Users can see detailed directions for their potential trips

  •  Directed here from “plan trip” screen

  • User can see various prices given their selection of fare types and trip types (one way vs. round trip) 

Fare Calculator Screen​

Choose Your Origin Screen

  • The process of buying tickets on this app involves 4 steps: selecting one-way vs. round trip, the station you want to start at, the station you want to end at, and your group size

Buy Tickets Screen

  • After completing the steps, the user is presented with a virtual ticket they can purchase 

Plan Trip Screen

Trip Details Screen


Visual Language

Color Palette






My main goal in choosing a palette was to develop more consistency than the current BART (Official) app presents and pick a few bold colors that create meaning through visual language. 


  • Light blue: this is a variation of the light blue in the existing BART logo and used for primary buttons in the prototype

  • Dark blue: I paired the light blue with a darker blue to display branding for BART within the app, and used it for secondary buttons and some text. 

  • Red: this is used to represent service advisory notifications and draw the user's attention 

  • Green: used for tickets prices/“buy now” buttons 

  • Gray: a neutral color used for text 


SF Pro Text Regular

SF Pro Text Medium

SF Pro Text Semibold

SF Pro Text Bold

I chose the SF Pro Text font to cultivate a straightforward and clean feel within the app. 


I altered the existing BART logo. 

High Fidelity Prototypes


While designing I kept the two most significant user needs at the forefront of my mind: to board BART rapidly and knowledgeably. Based on these needs, the app should allow users to buy tickets quickly while also presenting them with necessary information about their ride. Additionally the app should be easy to navigate and feel intuitive.

I created the landing page so users could immediately begin the process of what they came on the app to do: purchase BART tickets. After filling in their trip information they can either choose to plan a trip out before buying their fare or instantly buy fare (ideal for users who frequently ride BART).

I broke down the “Plan Trip” screen from the BART (official) app into the landing page and the two following screens, seen here, so the user would be presented with information in a more concise manner. The “Buy Fare” screen was directly adapted from the BART to Airport App as I found it to be a minimal and effective display of information. 

A user can access fare they bought for a trip from the "My Trips" tab. They can also view past trips and buy fare for those same trips, under this tab. Additionally, the expanded QR code from the ticket screen ideally would work in concert with the ticket scanners in BART stations, so that the user could efficiently scan their QR code and enter through the gate. 


1. It’s necessary to thoroughly research existing solutions

After conducting user research, a maps system and mobile ticketing were the first solutions I thought of. I initially assumed it hadn’t been done with BART because I hadn’t actually heard of apps such as BART (Official) or BART to Airport. I was surprised to find out that they existed, after some research. Exploring such apps was integral to the my project, as I was able to then build off of them to better cater to my target audience, even if they weren’t hugely successful apps. This showed me that spending that extra time to research current solutions is essential. 

2. Keep user needs at the heart of your design

I found it really easy to substitute my experiences for those of the user, especially when I had  my own strong opinions about BART and the existing ticketing process. Resisting this urge was harder than expected, but doing so forced me to design for my audience and therefore create a product I know would be useful to my audience.

Chat with me today!