clipper_index_1200.png

Clipper Card

Clipper Card | Mobile App Concept

CLIPPER CARD

MOBILE APP DESIGN CONCEPT


 
 

The 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.

clipper_animation.gif
 
 

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.

 
 

Research

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.

 

 

Initial Designs

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.

 
Sign Up Users were confused by these options and often choose to sign in when trying to setup a new account and add an existing card.

Sign Up

Users were confused by these options and often choose to sign in when trying to setup a new account and add an existing card.

Payment Setup When defining a payment method, users didn’t realize that the icons were buttons for selecting type.  Some were uncomfortable adding payment information as part of the initial setup.

Payment Setup

When defining a payment method, users didn’t realize that the icons were buttons for selecting type.  Some were uncomfortable adding payment information as part of the initial setup.

Adding Value It wasn't clear to users why were being asked to add to value to the card at this stage and they didn't always understand how the monthly pass and auto pay options were related to card value.

Adding Value

It wasn't clear to users why were being asked to add to value to the card at this stage and they didn't always understand how the monthly pass and auto pay options were related to card value.

 
App Tutorial Users didn't always recognize that these were instructions and some thought icons were buttons.

App Tutorial

Users didn't always recognize that these were instructions and some thought icons were buttons.

Digital Card Users did not understand that this was asking whether they wanted to be able to use their phone to tag in and out at Clipper stations.

Digital Card

Users did not understand that this was asking whether they wanted to be able to use their phone to tag in and out at Clipper stations.

Home Screen The initial idea for the home screen was very basic, just showing users their Clipper balance, monthly passes and an option to add value.

Home Screen

The initial idea for the home screen was very basic, just showing users their Clipper balance, monthly passes and an option to add value.

 

 

Design Iterations

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.

 
Sign Up The revised sign up screen prompted users for an email address and password to avoid confusion of adding a card with account setup.

Sign Up

The revised sign up screen prompted users for an email address and password to avoid confusion of adding a card with account setup.

Payment Setup This section was removed from the initial setup and placed on the home screen.  Users would now be able to use the app to check balance without setting up a payment method.

Payment Setup

This section was removed from the initial setup and placed on the home screen.  Users would now be able to use the app to check balance without setting up a payment method.

Adding Value This section was also removed from the initial setup and placed on the home screen.  It was separated from monthly pass so that users would not confuse the two options.

Adding Value

This section was also removed from the initial setup and placed on the home screen.  It was separated from monthly pass so that users would not confuse the two options.

 
App Tutorial The instructions were revised to illustrate one step at a time and progress indicators were added to the bottom.

App Tutorial

The instructions were revised to illustrate one step at a time and progress indicators were added to the bottom.

Monthly Passes Monthly passes were removed from the initial setup and placed on the home screen as part of a separate user flow.

Monthly Passes

Monthly passes were removed from the initial setup and placed on the home screen as part of a separate user flow.

Home Screen The revised home screen with options for adding money, monthly passes, payment type and recurring payments.

Home Screen

The revised home screen with options for adding money, monthly passes, payment type and recurring payments.

 

 

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.

 
clipper_05.png
clipper_17.png
clipper_18.png
clipper_19.png
clipper_20.png