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
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
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
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.
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.
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.
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.
After generating ideas from our design sprint we white-boarded a user flow which we revised, and then revised again...
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? ... "
After finalizing our low fidelity wireframes, I took the wireframes into Sketch and created the visual design, following the Clipper Card guidelines.
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.