A redesign of Bay Area Rapid Transit's Kiosk system that allows for faster payment transactions and easier decision making for loyal members and guests

User-design image



  • Individual Project
role icon



  • UI/UX Designer
  • UX Researcher
team icon



  • Sketch
  • Procreate (iPad Pro)
  • Miro
  • Marvel
  • Invision
duration icon



  • 4 months

problem statement

BART has learned that customers are frustrated with single ticket purchases and that in some cases, prospective customers abandon the conversion flow given the number of steps required.

BART also believes that single ticket purchases will increase at some stations if customers do not have to select a destination first

How might we make ticket purchasing less taxing for BART users?

proposed solution

Design the purchase of an “anywhere ticket” as embedded software in a unique BART kiosk.


I approached the problem by with these 4 important strategies:
My design thinking process


I sketched an initial proto-persona to reflect the target audience of BART Select users.

After gathering more intel from avid BART travellers, my proto-persona then blossomed into a more rigorous persona

customer journey

With my final persona, I then created a customer journey map which captured the journey,emotions and thoughts throughout the entire experience from Station arrival to completing the transaction.

My persona, Sandra's experience via Journey Map

story map

The story map session was conducted with a team where we collectively jotted down key activities and categorized bothin-scopes and out-of scopes. With our final results, I then created a digitized version.

user flow

From here I wanted to design a structure that provided the actions and features that were the most crucial and beneficial.

Also to really focus on limiting the. number of steps that a user would need to take to make a purchase.

paper prototype

I began creating rapid wireframe sketches for the new user experience and testing it with others. And based on the initial feedback, an iterated version was produced to reflect those changes.

Users appreciated the luxury of having the set rates presented to them.

paper prototype cont'd

The results of the hand drawn iterations were then transformed into a digital version where I then performed another set of usertesting.

Low-Fidelity wireframes

After gathering positive feedback from users testing the flow in Marvel, I then began designing the low-fidelity wireframes.

Lo-fi: Fee Selection Screen

Users felt that the home page was missing visual guidance.The options listings were a bit unclear to some.

Mid-fidelity Wireframes

With this iteration, I focused on the feedback of introducing a "tap/touch" visual guide for persons that prefer visual representation rather than words.I also added the "rider" term to allmenus to avoid the confusion oftype vs. price.

Mid-fi: Fee Selection Screen

The wireframes were pretty clear and straightforward for most but the visual guide received mixed reviews.

high-fidelity wireframes

For the final iteration, I took into consideration all findings and recommendations while focusing on the visual aspect — creating a"dark mode" set of screens,similar to the current kiosk imagery, but with my own personal touch.

Hi-fi: Fee Selection Screen

I received positive reviews on the flow and features— pointing out that the design was"modern" and "sleek".

high-fidelity wireframes cont'D - pin pads

There were comments about including the Credit Card payment transaction. Users wanted to get the full experience — from start to finish.So I went ahead and designed those as well for the final set of iterations.

Image of all hi-fi pin pads

clickable prototype

I'd taken the final iterations and transported them into digital form for users to interact with and to gather the feedback discussed in the previous slides. However, before use, it was instructed that the PIN Pad's payment display only listed the "average rider" amount (due to linking).

NOTE: InVision currently doesn't allow embedded sharing of desktop sized prototypes. So unfortunately, you will have to click the link below to access and test the flow in InVision!

Link to InVision prototype
Image of final prototype in Invision

Once again, I received positive reviews on both easy flow and features, with participants using words like "intuitive" and"edgy".

Validation Testing

I conducted a final set of validation testing with 6 new BART commuters and here are the results: 

Final validation results of 6 BART commuters


With the BART Kiosk redesign, I was able to significantly transform the experience for BART commuters — creating a simple, swift and sleek flow that users unanimously preferred over the current transaction. If there were some things that I would like to further explore, it would definitely be:

  • Explore the flow of returning ticket member
  • Explore the flow of returning card member
  • Further explore the interaction designs of the current flow and the aforementioned out of scopes
View More Case Studies