Contact Us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right. 


123 Street Avenue, City Town, 99999

(123) 555-6789


You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.


Clipper Card

How might we streamline the Clipper Card use and refill process to make it more convenient and reduce frustrations for Bay Area commuters?

2 weeks | Group Project | Conceptual Project



The Problem

Using a clipper card for public transportation is confusing and mistake-prone. There are several options to obtaining a card and loading it with money:

  • In-store at Walgreens or Whole Foods 
  • The existing clipper card website (which takes 2 days for the balance to be updated)
  • In-person at the kiosks at the BART stations

The Solution

Create an iPhone app that would allow commuters to:

  • Use the mobile device as a clipper card
  • Manage payments
  • Add value to card from device

My role

I worked with a team of three other people: Kevin, Elizabeth, and Paula. 

I contributed to research, usability testing, white-boarding the user-flows, and then turned the low fidelity wireframes into high fidelity mockups. 



As a team, we did a mix of qualitative and quantitative research to understand the users and their needs. 



Compared 40 Yelp Reviews and 20 Trip advisor reviews for both BART and MUNI. 

•  The negative experiences with BART were delays, the Ticketing system (clipper card) and cleanliness. 

• The negative experiences with MUNI were cleanliness, unsavory passengers, and overcrowded conditions.

Existing machine inside the BART station to refill clipper card


From a survey of 20 public transportation users:

• 70% of the users commute daily and use a Clipper card.

• Efficiency was their highest priority

• Most liked to check the schedule beforehand.

User Interviews

Interviews with 10+ public transportation users to determine top frustrations with the BART and MUNI system:

• Delays, confusion with the Clipper card, and security/cleanliness. 


User Persona

Based on our user research, we put together a user persona.


The Design process


We started the design process with a design studio exercise to get ideas flowing quickly without getting caught up in the details.

Sketches from the design studio

User Flow

After generating ideas from our design sprint we white-boarded a user flow which we revised, and then revised again... 


Usability testing


Based on our user persona, I gave the following scenario to our testers: "You're a bay area commuter, you've been commuting for over a year, and you use a clipper card for public transportation. This is an app that will let you refill your clipper card balance. How would you connect your card? ... "

Add Value

With no other choices obvious, users didn't know how to change what kind of value they wanted to add. (left) We fixed the second iteration by including a central page where they can select the option they want. (right)

Login / Signup

Users were confused by the three options presented to them in the first iteration. (left) For the second iteration we implemented a more standard login screen. (right)

Payment Method

We thought users would find the icons for the different payment methods intuitive, but they didn't know they could click on them. (left) we removed the page and inserted a form for the majority of users, with the option to choose apple pay if desired. (right)


Visual Design

After finalizing our low fidelity wireframes, I took the wireframes into Sketch and created the visual design, following the Clipper Card guidelines.


Next Steps

I found it very rewarding to see user's reaction to the app. They loved how simple and straight-forward it was, and wanted to start using it instantly. 

Given more time, I'd love to explore how we could further enhance the public transportation experience--whether by incorporating real-time scheduling--to including more languages--or improving security.