Product Design

Time: Fall 2018

Role: Product Designer

Tools: Sketch, Adobe XD, Adobe Illustrator, Invision

Skills: Ideation, Wireframing, Prototyping, Usability Testing, Interaction Design


The Bay Area Rapid Transit or "BART" trains have been revolutionary addition to the San Francisco Area since their arrival in the 70's. Since then, there have been minimal improvements to help increase rider satisfaction, and safety. A recent string of safety issues got me thinking of not only ways to prevent crime on the trains, but also to allow for better experiences taking mass transit. I focused on three main issues that I believe are currently hindering the system right now:

  • 1. Trip Planning
  • 2. Safety
  • 3. Ticket Convenience

Below I have outlined how I approached solving each issue, and the mockups for a whole new BART experience.

Trip Planning


  • 1. Create a way for users to visualize their BART trip.
  • 2. Make recent/frequent trips readily available for commuters.
  • 3. Use current location to help users new to the area.

The process

When I began to think of ways to allow Bay Area commuters to have a better experience planning out their BART trips, I decided to do some research of my own. I found that their current trip planner gave users the ability to see how long trip would take and when the trains were arriving at certain stations. This is all helpful information, but doesn't clarify things such as location.

I started to draw what I thought was the ideal flow that users should go through when planning trips. I had a list of accomplishments I wanted to achieve (listed above), and a good sense of how other trips are planned online (thinking of uber/lyft, airlines, regional trains). Once I had a solid wireframe, I began to digitize my thoughts which helped me see how the experience could be improved. Getting my hands on Sketch helped me rapidly create mockups in order to get a sense of how my ideas translated into an actual screen.


1 - One of the most important decisions I made was that the app needed to show the users location, and their selected destination. I think this helps in the sense that people new to the area can see where in the Bay Area they are, and are going to go. Also, I believe that including a map will help even frequent users visualize their commute.

2 - My next decision I made was giving trip planning knowledge of previous trips. This is meant for the more frequent travelers who might be going into San Francisco for work, or a user that wants to remember how they got somewhere last time. The "Recents" feature will give the user the ability to select past trips and immediately have the information of how safe the trip was (at that time, between those destinations), what the price of the trip was, and the total trip time.

3 - Lastly, I felt a new BART experience demanded finding BART stations. Since a user is already on the app with their ticket pulled up, it would save lots of stress for them to see where they are and where they can meet the train. Rather than having to switch to a different maps app on their phone, everything would be in one place. Additionally, users who are visiting and don't know the area well can get specific directions on how to locate the different stations around the Bay Area. This in turn would save lots of time and stress.



  • 1. Provide riders with the tools to seek help on BART
  • 2. Allow the police to gain detailed knowledge of criminal activity
  • 3. Notify other riders about dangerous situations

The Process

I began thinking of ways to solve the crime problem on BART by figuring out how things have been documented in the past. When I would look on Social Media or the news and see videos from people's phones, I found that there was a ton of technology not being utilized for actually stopping crime. I wanted to answer the question: What if this connectedness we have today could solve documenting, and alerting people of crime?

I knew I was onto something, and grabbed a pen to scribble down some information about how it would theoretically work. Next, I planned out some time to hit the white board with a more in depth depiction. I started with a witness and spread their intel to others in the car, police, and the train operator. Once I had the concept of the flow, it was time to design experience from the witnesses perspective along with others riding on the train and those in nearby stops.


1 - I think in the heat of violence or other crime, it can be difficult to stay calm and search through your phone. That is why I decided the report problem button needs to be a large, fixed button that will be easy to access in times of crisis.

2 - Writing the report would be simple, with only having to input where and what. I think keeping this short and simple is the best choice because although there might not be all the details from the initial report, people will at least know there is something wrong in that area.

3 - Giving the ability for other passengers, and authorities to add updates will allow for a defined source of information. Unlike twitter or other news sources, passengers on the train just get the info that is pertinent to the situation without any clutter between tweets or waiting for a journalist to update an article. The video part of the updates I thought was a good way to allow other passengers to document the scene (helping the police with evidence) and let people know what the perpetrator looks like.

Ticket Convenience


  • 1. Give both frequent and unfamiliar BART riders the ability to use a digital ticket.
  • 2. Allow for digital tickets to be produced from an online trip planner.

The Process

I wanted something very simple, and easy to use when in my ideation of this feature. I knew users would want to be able to pay right from their phone, and scan their ticket right from their phone. So, the main part of my process when designing this crucial part of the app was to make it informative and basic.


1 - I used some darker colors on the ticket itself to help contrast between not only the white background of the app, but to also give contrast to the QR code that the machines would be scanning.

2 - The contents of whats on the ticket were another important aspect I looked into. I wanted users to be able to sync their ticket to their apple wallet (by clicking on the top right of the ticket), or send it to their apple watch. The info button on the bottom left allows for users to see more about the restrictions, detailed info about their ticket purchase, and BART guidelines. Finally, the "paid" in the bottom right corner helps the user know that their transaction was successful, and clarifies any miscommunication between them and train officials.

3 - A common problem I noticed after riding on BART for so long, is the search for open seating or less crowded cars. To solve this, I added a feature that will update live between stops and allow for people coming on the train to visualize how packed each section of the train is.


This has been my favorite project to work on thus far. I really had time to dive into the process of making design decisions, and mapping out flows. I loved being able to use the auto animation feature that was just introduced to AdobeXD. After coming up with initial screen designs, I now was able to think about the UX of the app in a deeper sense. I had to not only think about how each screen individually looked, but how they could mesh when transitioning. By doing this I learned a ton about creating a design system with a list of components, icons, and colors. Although it was small, I now have some more knowledge of how I can take what I've learned and apply it to a role at a larger company.

Return Home