Clipper Card Project
Project type
Academic Project for a UX Certification Class (2019) University of California: Santa Cruz
Contribution
Market Research, Wireframes, Prototypes
My role
Product Designer Student
Duration
3-4 weeks
Outcome
A+ grade on User Experience Introduction
What is it?
Clipper Card is a reloadable contactless smart card used for transit fare payment in the San Francisco Bay Area.
The Clipper Card integrates with 27 different transit agencies in the Bay Area.
The Problem
There isn't a mobile app, nor an option for a digital wallet. Physical ticket machines are scarce and hard to use.
The current implementation of the Clipper Card is neither eco-friendly or convenient. The Bay Area also has one of the most fragmented public transit network in the country, and integration is only possible with the Clipper Card.
How such an important tool for commuters in Silicon Valley is so behind in terms of technology and user experience?
Current User Journey
Clipper Card can be managed via a website or physical ticketing machines at some stations.
Users have to sign in to their accounts using a browser to add funds to their cards. Alternatively, ticket machines can be used to add funds or buy a new card.
Website User Journey
Ticket Machine User Journey
Research
Key-findings with interview with commuters:
When commuters in the Bay Area we polled about how a mobile app would help them on a daily basis, 82.8% said YES.
When the same group was asked to define a good public transportation using just one word, the most used definition was: reliable.
Other anecdotes:
Most users ride multiple agencies for their daily commute.
Some users are not comfortable having a 3rd party company charging their credit/debit accounts automatically once their Clipper Card balance hits a threshold.
Competitors
Due to the lack of competitors in the market, Clipper Card hasn't focus on improving its services.
However, there's a digital service growing among places where public transportation integration and management are bad or scarce. It's FareBot, an application that connects your account to different transit agencies.
This application allows the user to view their remaining balance, recent trips, and other information from contactless public transit cards using NFC.
Currently this service is already available in the following countries/cities:
ORCA - Seattle, WA, USA
Clipper Card - San Francisco, CA, USA
Suica, ICOCA, PASMO, Edy - Japan
Matkakortti, HSL - Finland
Octopus - Hong Kong
Opal - Sydney, NSW, Australia
Myki1 - Melbourne, VIC, Australia
NETS FlashPay - Singapore
EZ-Link2 - Singapore
OV-chipkaart - Netherlands
Bilhete Único - São Paulo, Brazil
Go card - Brisbane, QLD, Australia
Manly Fast Ferry - Sydney, NSW, Australia
Identity Development
As Clipper Card is a company that already exist, I couldn't create an original identity. However, I could use the identity that they currently use and improve it for the app development and present it to stakeholders, with better user interface, font and color palette.
Color Palette
Typography
Empathy Map & Goals and Objectives
Logo
Envisioned Solution
Create an easy, effective and eco-friendly payment solution for public transportation in the Bay Area by using a mobile app that provides the most important features for daily commuters.
Leverage NFC technology to use phones as an option in lieu of physical cards.
Eliminate one-time-use plastic/paper consumption by most commuters.
Proposed design
Log In
CStarting with the sign-in page, the idea is to be friendly and easy to use, while following brand guidelines to give users confidence and assure the app is official and intended for their Clipper Card. Make it easy to remember credentials to avoid this step when appropriate.
Special attention to other flows for new and returning users, who can create new accounts or get password assistance.
During usability testing, I surveyed users about their preference about multiple versions of the landing sign-in page and the version on the right was the most popular.
Setting a route
Setting a route on the app has many benefits, including a travel progress on the home page and notifications along the journey.
When a regular route is used on a daily basis, the user can set it as their favorite route to quickly get access to details, warnings and transit updates. (Image on the left)
Travel Progress
Setting a route on the app has many benefits, including a travel progress on the home page and notifications along the journey.
When a regular route is used on a daily basis, the user can set it as their favorite route to quickly get access to details, warnings and transit updates. (image on the right)
Adding Funds
Different from the user journey used by the website or ticket machines, the idea is to play it simple.
'Add funds' is the primary option from the home screen and users can easily choose among preset values or enter a specific amount.
If the user has more than one credit card registered in the account, the option to choose between credit cards will be at the end of the page.
During usability testing, users made it clear that they wanted to know clearly the card that was going to be used for the transaction, as many wanted to ensure they were using a card that gives the most benefits/rewards or their corporate/business cards assigned towards transportation expenses.
Once the transaction is approved, the balance is immediately updated on the home screen.
Add your first clipper card, just follow the journey
By using the smartphone camera, it's possible to scan the physical card and attach it to an account. As soon this process is done, it's possible to manage this card and its funds and many different ways.
Notifications
When a route is set, users can enjoy their journey by reading a book, listening music, etc. that the Clipper Card app will send them a notification when their phone's GPS shows that they're approaching their final destination.
The app will also notify if the train/bus is delayed and possible changes to the route are needed.
Buy a pass, Manage Account, and add your clipper card to your digital wallet
Promotional Video
Conclusion
These features would greatly benefit commuters in the Bay Area.
I hope they become available for the general public someday.
Any ideas or feedback about my design thinking process? Contact me at nicowbochud@gmail.com
Tools used
Sketch App, Protopie, Photoshop, Craft from Invision, Keynote & Final Cut Pro X