Design

Clipper Card Website and Autoload Fail

Leave it to the government to take an otherwise brilliant idea and disfigure it so badly that it makes you want to just put it out of its misery. If it’s true that a camel is a horse designed by committee, then the Clipper Card is the three-legged, syphilitic camel of public transportation payment systems.

Clipper Card is the three-legged, syphilitic camel of public transportation payment systems.

If the agencies that birthed this malnourished horror of a baby bothered to consult a product designer, that designer should be publicly flogged for crimes against the citizens of the SF Bay Area.

I recently switched to the new Clipper Card system which is supposed to unify payment options across most of the major transportation agencies in the Bay Area. In theory Clipper should be totally awesome – one card to pay for all your transit needs, with built-in discounts and the ability to load your card via cash, ACH, credit cards or commuter checks.

In practice, however, it sucks.

I won’t go into all the wonderfully creative ways in which Clipper fails (many of which are documented here), but rather I’m going to focus on the special hell that is Clipper’s website, and in particular its Autoload functionality (or lack thereof).

[toggle title_open=”Click to toggle info on what Autoload is.” title_closed=”Click to toggle info on what Autoload is.” hide=”yes” border=”yes” style=”default”]
Autoload is the method by which your Clipper card recharges itself once it falls below a balance amount (that you can set). You can set up Autoload from a bank account or from a credit card. Unfortunately, due to Clipper’s 1970s-speed computer system it takes 3-5 days for even a credit card Autoload transaction to post to your Clipper card, and 5-10 days for an ACH transfer to show up. Wizard.

It gets better (worse), though. If you want to set up Autoload, you have to set it up separately for each agency that you want to have credit with. The one exception is if you simply Autoload cash – that can be used systemwide. But any discounted or high-value tickets offered by an agency (e.g. BART’s $48 for $45 discount) require Autoload to be set up separately for that particular agency. I can understand why this is (separate accounting, etc), but it’s very confusing for newcomers.
[/toggle]

Clipper’s Website – An Exercise in Futility

I set up Autoload for BART’s high-value discount ticket ($45 for $48 in credit) when I first got a Clipper Card six weeks ago. In order to qualify for the Autoload discount I had to give my credit card info, which I dutifully entered into their system.

Today I wanted to check on my Autoload settings and see which credit card I had used to set up Autoload, so I went to the Clipper website and logged in. I didn’t see a link to “edit” Autoload, so I went to the next most obvious place and clicked the “Set Up Autoload” menu link. That was my first mistake. As you can see below, there is nowhere to edit one’s Autoload info.

(click to enlarge)
clipper_autoload_fail_1

 

Only mildly annoyed at this point, I went to Clipper’s Frequently Asked Questions and found instructions on how to edit Autoload. Mostly straightforward, if a tad unintuitive.

Boy was I in for a surprise!

It turns out that the FAQ is completely wrong. The link it references does not exist!

(click to enlarge)
clipper_faq_fail

 

Not one to give up easily, I started exploring the page and noticed a “change billing information” link. “I wonder what that does,” I thought to myself. So I clicked it.

(click to enlarge)
clipper_autoload_fail_2

 

Turns out what it does is scare the hell out of you!

Before I can continue my wild goose chase I must first accept terms of service that authorize Clipper to charge me. Keep in mind at this point I’m still just looking for information on my existing Autoload settings. I’m not trying to purchase anything or authorize a payment. Doesn’t matter. I have to authorize payment first.

Another fun fact, as I later learned, is that you have to agree to these terms EVERY TIME you return to this screen. It’s a mandatory step in the process that never goes away, no matter how many times you check the little box. Isn’t that super?!

Ok… I’ve made it this far, so out of morbid curiosity I’ll agree to the Terms and Conditions just so I can keep playing this demented game.

(click to enlarge)
Scary warning!

 

What does the next screen hold for us…

Ah ha! Address and billing information! Maybe we’re getting closer!

But wait. What is this?

It’s actually just address information. Where’s my credit card info? I know I gave you my credit card information.

In fact, this screen brings up a whole bunch of questions:

  • Why don’t you tell me that you still have a credit card on file for me?
  • You do still have a credit card on file for me, right? It didn’t disappear, did it?
  • Which Autoload product(s) is my billing info linked to? I have to set up Autoload separately for each transit agency, so which agency or agencies does this billing info pertain to?
  • Where did the left-side navigation menu go?
  • And most importantly, where the hell do I EDIT MY AUTOLOAD SETTINGS?!
(click to enlarge)
clipper_autoload_fail_4-4

 

I scoured this page for a few minutes, mulling over all the above questions, when I finally noticed the navigational “breadcrumbs” across the top of the page:

Account Management > Edit Autoload > Payment Details

Hmm… that looks interesting. I wonder what “Edit Autoload” does. So I clicked.

Eureka!

Finally I found it! The place to edit Autoload! That only required 5 completely unintuitive steps and ignoring Clipper’s incorrect FAQ entirely.
 

(click to enlarge)
clipper_autoload_fail_5

 

The astute observer will notice that on this page the only thing to “edit” is actually the option to disable Autoload entirely. That’s it. There is no payment information, no ability to choose a different credit card for Autoload. Just disable.

And if you try clicking the “Update” button without having selected the disable option the website will present an error message instructing you to choose “an” option before proceeding. I think it should tell you to choose “THE” option, since there’s only one thing to do!

I Could Write a Book

I wish I could say that Clipper’s suckage was limited to just the Autoload fail I’ve highlighted in this post. Unfortunately, the crimes against usability and design are so numerous that they could provide content for an entire textbook on how NOT to design a website. It’s tragic, really, because the Clipper Card idea has such amazing potential and, if implemented well, could be a delight for its users.

Instead, it’s incredibly frustrating and makes me want to throw things.

I wish I knew how this website and the procedures behind the Clipper Card were designed. We live in the SF Bay Area, home to some of the best product and web designers in the WORLD, and yet we have a transit payment system that feels like it was a high school project.

I’ve submitted feedback to the MTC, but I’m not holding my breath that any of this gets fixed any time soon. I would like to state publicly, however, that I will happily offer the MTC my services and advice on how to improve their consumer website. My designer friends and I would be happy to fix some of the more egregious problems in an effort to make the system better for everyone.

If you’re listening, MTC, please do something about your website, whether or not you enlist my help. Clipper Card users everywhere would thank you (and you’d probably save some money on customer service).