Simplifying the Clipper payment process through a mobile, iOS application.

Concept Project

Team Members

Jenny Ng, Vani Mehta, and Vasavi Reddy

My Role

User Experience and Visual Design

The Problem

Adding money on to your Clipper card can be a long and confusing process. My team and I decided to create a mobile application to simplify this process.

Final Prototype

Fig1. - This is the final prototype, built with Pixate

The Research Phase

We first started tackling this problem by viewing the current Clipper card payment process for different transit services. We soon realized how convoluted the data got, as different transit services had different buckets on your Clipper Card.

We then viewed several forums online, and talked to various Clipper card users to try to understand their frustrations with the current process. Using their feedback, we went into creating user flows that simplified the current payment process.

Fig2. - User Flow: Initial sketches for the Bart payment flow

Fig3. - User Flow: Initial sketches for the Caltrain payment flow

The Ideation Phase

From here, my team and I went into many sketch sessions. We would all seperately sketch out our ideas and then come together to combine them. Once we flushed out all of our ideas, we went into creating our initial wireframes and prototype.

Fig4. - Initial Wireframes

In our initial wireframe of the Dashboard, we had the balance at the top. By clicking on the buttons below, the user will be able to view the balance or information regarding that item. In our initial wireframes, we also added in Bart Parking as that balance is on the Clipper card as well. For this project, we decided to narrow the scope and not include parking payments in the app.

Fig5. - Initial Wireframes

Initially, we gave the user the option to choose one-time payments or autoload from the screen where the user enters the amount they want to add to their Clipper card. Instead of having many different actions in one screen, we decided to split the different types of actions into different screens.

Fig6. - Initial Wireframes

Initially, we had a quick pop-up that allows the user to confirm the payment or to cancel it. We felt with a pop-up that the user could skim it quickly and click on the wrong button by accident. So, we decided to have a whole screen for the user to confirm their action instead of just a pop-up.

The Iteration Phase

Using our prototype, we conducted a lot of usability testing to get an idea of what was working within the app and what wasn't. We got a lot of great feedback, and using this information, we decided to take a new route and went back to sketching, wireframing, and prototyping.

After iterating on our initial wirefames and prototype, we conducted more usability testing. Using the feedback from this round of testing, we went back and made more changes to our wireframes.

Fig7. - Wireframes

In our second iteration of the Dashboard, we decided to split up the different transit services into different screens. The user will be able to slide through each screen to see the balance for each transit service. Each service will also have the appropriate actions to take on the screen. With Cash Value, the user can view their balance at the top, and they can choose to add more money through one-time payments or auto-load.

Fig8. - Wireframes

For the Muni Monthly Pass, the user can view monthly pass information at the top, or they can add a different Muni pass.

Reflection and Next Steps

Though my teammates did many rounds of iterations, there are still many areas to be improved upon. While we were able to get the prototype out in front of people for user testing, we would have liked to have more variety in the people we were talking to.

As for next steps, I would like to speak with more CalTrain users. While we were able to talk to a few, majority of the people we spoke with were Muni and Bart users. For the future, I would like to figure out my target audiences more, so that my designs speak to the right users.

Fig9. - Final Mockups

In our final iteration, we decided to go with 'cards' on the Dashboard. Each individual card will have all of the pertinent information about that value and the ability to manage or add money to that value. In this mockup, the user has a CalTrain Monthly Pass for only the month of June and $50 in Cash Value that can be used on any transit service.

Fig10. - Final Mockups

When registering your Clipper card for the first time on the app, your Dashboard will show an empty card for Cash Value, which is the easiest way to pay for transit services. Through the hamburger menu, users will be able to add other transit services to customize their Dashboard.

Fig11. - Final Mockups

After clicking on the Add Transit Agency button, the user will be taken to a list with all of the transit servcies that work with Clipper. In our initial designs, we were thinking of using only Bart, Muni, and CalTrain services in the app as they are the most used. In our final iteration, we decided to keep all services as we weren't sure how often the other services were used. For next steps, it would be great to find the usage rates of all Clipper transit services.