MOBILE APP DESIGN CONCEPT
The Clipper Card mobile app is an easy way for San Francisco Bay Area commuters to manage their Clipper transit system accounts. With it, riders can sign up for a new card or link their existing card, view available balance, add money and monthly passes, manage payment methods, setup automatic payments, view account activity, and use their phone in place of a card to tag into bus, train, and ferry systems.
The project was completed in a two week design sprint as student work while in the UXDI program at General Assembly.
Defining the Project
For this project, I worked with a team of three other designers to identify and address issues that could improve public transportation in the Bay Area. With a daily ridership of over a million people, this presented a great opportunity to make a meaningful difference. Through the process, I sought to develop a better understanding of who the riders were, how they interacted with the system, and what common challenges they faced. The ultimate goal was to design a product that would encourage ridership by improving the public transit user experience.
Our team started with a brainstorming session to consider potential problems facing riders and created an affinity map that identified scheduling, delays, payment, navigation and crowds as key areas to focus our attention. We designed a survey to get feedback from users and develop an understanding of rider behavior.
The survey results clearly showed that most of our users were commuters who had been riding for over a year and use Clipper Cards to pay for their trips. The surprising thing we found when interviewing was that a lot of people weren't aware of Clipper's most convenient features. Instead of setting up automatic payments or using the website to add value, they were using add fare machines in BART stations or taking their cards into local stores to be refilled.
The strategy for solving this problem was to create a mobile application that would allow people to manage their account balance, setup automatic payments, or sign up for a new digital Clipper Card and use their phones instead of a physical card. We worked together to figure out what the initial user flow would look like, then I built a quick and dirty prototype so we could start testing with users as quickly as possible.
User testing gave good initial insights into what worked and what didn't with the prototype. A few of the steps in the sign up process were also confusing and we looked at how we could streamline the signup flow as much as possible. I designed a new series of pages and built a prototype for the next round of testing.
The Final Product
We were really happy with the final result of our design process. The concept resonated with people and nearly everyone who saw the prototype said they would love to see this app be built.
The most important takeaway I had from this project was to get something built and start testing with users as soon as possible. Our initial prototype was very basic, with simple text, boxes and icons representing the ideas we wanted to include but receiving feedback so early gave us a much stronger sense of direction going forward.