Contact Us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right. 

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

clipper_iphone_mockup.jpg

Clipper Cardbackup

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

Project Overview

The Problem

Using a clipper card for public transportation is confusing and mistake-prone. To get a card and load it with money or a monthly pass there are several options:

  • 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
  • Monthly passes can only be bought during the last week of the month for the next calendar month.

The Solution

Create an iPhone app that would allow commuters to:

  • Get a virtual clipper card from anywhere
  • Add value to card from device
  • Manage payments
  • Use the mobile device as a clipper card

My role

I worked with a team of three other people: Kevin, Elizabeth, and Paula. 

We each contributed to research, usability testing, and white-boarding the user-flows. During the second week, I took the low-fidelity wireframes created by Kevin and turned them into high fidelity mockup.

 

research and discovery

As a team, we did a mix of qualitative and quantitative research to understand the users and their needs. We all did user interviews, I did independent research and business analysis, while my teammates created a survey.

Takeaways

Most of the users (70%) commute daily and use a Clipper Card. Their biggest frustrations were train or bus delays, confusion with the Clipper card system, safety concerns, cleanliness issues, and complaints about other passengers.

Business model canvas

Daily passengers fill the largest revenue stream, so it's important for BART to have lots of passengers.

User Persona

Based on our user research, we put together a user persona to remind us of who we were designing for.

Complaints on 3rd party sites

On Yelp and Trip advisor, the three top complaints about BART were Delays, the Ticketing system (clipper card) and cleanliness.

User Interviews

Most users we interviewed were most frustrated with delays, confusion with the clipper card, and security / cleanliness.

Complaints on 3rd party sites

On Yelp and Trip advisor, the three top complaints about MUNI were cleanliness, unsavory passengers, and overcrowded buses and trains.

Survey Results

Some of the strong trends from the survey sent out: most riders have used public transportation for over a year, and their biggest concern is time and efficiency. Most of the data for our user persona was pulled directly from the survey.

Daily Riders

A lot of people use the clipper card. On BART and MUNI alone, there are over a million riders a day. 

 

The Design process

We started the design process with a design studio exercise as a team to get ideas flowing quickly without getting caught up in the details.

Sketches from the design sprint

Sketches from the design sprint

 

User Flow

After generating ideas from our design sprint we white-boarded a user flow which we then revised. And then revised again... 

 

Low-Fidelity Wireframes

After agreeing on the user flow and decided which screens were needed. Kevin created low-fidelity wireframes and a clickable prototype to test on users. 

Usability Testing

Based on our user persona, we gave a simple scenario for 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? ... "

Iterations

Based on user feedback, we then re-iterated our design, and created a second prototype to test again. 

Add Value With no other choices obvious, users didn't know how to change what kind of value they wanted to add. (left) We fixed the second iteration by including a central page where they can select the option they want. (right)

Add Value

With no other choices obvious, users didn't know how to change what kind of value they wanted to add. (left) We fixed the second iteration by including a central page where they can select the option they want. (right)

Payment Method We thought users would find the icons for the different payment methods intuitive, but they didn't know they could click on them. (left) we removed the page and inserted a form for the majority of users, with the option to choose apple pay if desired. (right)

Payment Method

We thought users would find the icons for the different payment methods intuitive, but they didn't know they could click on them. (left) we removed the page and inserted a form for the majority of users, with the option to choose apple pay if desired. (right)

Login / Signup

Users were confused by the three options presented to them in the first iteration. (left) For the second iteration we implemented a more standard login screen. (right)

 

Visual Design

After finalizing our low fidelity wireframes, I then took the wireframes into Sketch and created the visual design. I loosely followed the Clipper Card branding guidelines, since the goal of our project wasn't a complete brand redesign, I wanted the clipper brand to still be recognizable. 

 

Next steps:

For the first phase, we just touched the surface of being able to digitally use your iPhone as a clipper card, making it easier to check and refill your balance.

Given more time, next steps would include exploring how we could enhance the app into one that enhances more aspects of the bay area public transportation. For instance, many users we interviewed would like to know ahead of time about scheduling, there were also more security precautions we'd like to build into the app, and since the bay area is such a diverse demographic, we'd also like to have the app available in more languages.