The other day I found myself in a neighborhood of Seattle I don't frequent all that much. I was on time to meet friends for dinner, but just barely. Not wanting the extra slow down of finding street parking, I opted for a nearby parking lot managed by Diamond Parking knowing the convenience would cost a premium.

What should have cost me $19.42 for 3 hours of parking ended up costing $84.92 ($121.42 if I didn't get on top of it within 15 days). So, what happened? Shit UI.

I actually found this to be kind of funny as I spend the majority of my time working on billing interfaces used by 13 million customers around the world. I am too attuned to the hardships people encounter when trying to make a simple payment on a product or service (my reddit feed has recently been taken over by Facebook Ads subreddits, often filled with billing complaints). Payment engines are complex and a customer should be shielded from it as best as possible. Simple, linear user journeys can go a long way to reduce blockage and enable folks to spend freely.

In my case I was at the mercy of a mobile app named Call To Park. The first screen provides the options to login or sign up for an account. After a failed attempt at creating an account (turns out I already had one?) I got in with my credentials. I easily inputed my parking location and the desired amount of time.

Then came the payment part. I'll give them props for integrating Google Chrome's form autofill. However, it was the error handling that took me a long time to figure out and resolve.

left: Active input fields for CC. right: Random error message.

A few of my initial thoughts when this error happened: are there multiple fields within that input field? Did Chrome's autofill place the wrong value? Is the title "Credit Number" incorrect and should it actually say "Name" (and somehow the other required fields would appear after a name were entered)? At no point did I think to look at the content surrounding the Credit Card section. Billing information? Unnecessary. All they need is a valid payment method. And besides, if they needed that information wouldn't I see a contextual error message? Login Details? Absolutely unrelated to the task at hand.

At this point I was five minutes into trying to pay and late to dinner. So I resolved to continue trying while making my way for the restaurant. Once there, I decided to take a look at the "my account" section in the menu, see if I could get to the root of the problem.

left: An incomplete account. right: My account a day later.

At this point something clicked in my brain. I think it's because there was no longer a mix of static and interactive elements on the screen. Seeing that I didn't have anything on file for my name, credit number, and expiration date helped me put the pieces together and conclude that all fields were required for a successful transaction. As soon as I provided the information, I was able to complete my transaction and dig into my tacos.

Note: I later added 2 hrs to my reservation, hence the mismatched paid amount.

Fast forward 2-3 hours later... I return to my car to find a parking ticket. Call To Park's broken interface cost me $65.50 for the 5 minutes that elapsed. In retrospect maybe I should've remained in the parking lot for the 10 minutes it took me in total. I guess I'll find out once they reply to my ticket dispute.