Article overview

UX Lessons Learned from Buying Petfood

· By · 3 comments ·

Provide credit card security code and accept the terms before placing your order..

I was buying pet food the other day (online of course) and stumbled upon one of the strangest flows in checkout process history: you had to provide different parts of your credit card details at different steps during checkout.

It’s a great example of how a chain is no stronger than its weakest link, and that you shouldn’t do “something new” just for the sake of it when designing a form flow.

Don’t break the expected flow

The checkout process consisted of five steps: 1) Registration, 2) Address, 3) Payment, 4) Account, and 5) Review.

Step 1 and 2 were fairly simple, getting some of the basic checkout usability guidelines right. In step 3 you were asked for your credit card number, card expiration date and cardholder name. At step 4 you provided account details such as password.

However, at step 5, things went awry. The step looked like this:

Click for full size. The credit card validation code field needs to be filled out on the review page

Take a close look. What’s the next action? On most sites, you’d normally expect that you were supposed to review the order details and then click “Place order”. But doing that at ZooPlus.com resulted in this error:

Click for full size. You get this error if you just click Place order

Why? Well, it turns out that you have to provide the credit card CVV code / security code at the review page. This is despite that fact that you entered credit card number and expiration date two steps earlier in the checkout process!

There are many reasons this results in a really poor user experience:

  1. It breaks the mental model of when and where you provide credit card details – and thus breaks the expected flow.
  2. The CVV form field blends into the overall styling and is consequently difficult to spot.
  3. The customer has to pull out his credit card again.
  4. The error message is placed out of context, making it difficult to correct.

So what can we learn from this?

Okay, so placing the CVV field on the “Review” page instead of the “Payment” page is a bad idea. This isn’t exactly a revolutionary insight.

Let’s abstract this into 2 more general observations about designing user experiences:

1) A chain is no stronger than its weakest link

ZooPlus had a pretty decent checkout process usability-wise up to the “Review” page, yet orders are more likely to be abandoned due to this one poorly designed element.

There is no point spending a whole lot of time and money, tweaking and polishing your design, if you get basic elements wrong. You simply lose more by getting a basic element wrong than you gain by getting three details right.

2) Don’t be special just for the sake of it

Jakob Nielsen have a great saying “users spend most of their time on other sites” – that is, users expect your site to behave the same as most other sites. This also include tasks where there’s a high risk of abandonment, such as filling out forms and navigating flows.

Sure, doing what everyone else is doing can be boring. It’s more interesting to invent a new and “revolutionary” design, but when it comes to form design and flows you should generally stick to the convention unless you have a very compelling reason not to. And whenever you do divert from the standard approach, at the very least perform a quick small-scale usability study before launching, so you avoid major usability problems.

Simon March 17, 2011 Reply to this comment

Another important takeaway from this is that by necessity, zooplus are actually storing your credit card details, when they should be passing the directly to the payment gateway and having nothing more to do with them.

Storing credit card details will make the customer wonder why, and it’s a huge risk for the merchant. Just ask Lush: http://www.abc.net.au/news/stories/2011/02/15/3139342.htm

Christian, Baymard Institute March 22, 2011 Reply to this comment

Great addition. Thanks for sharing Simon.

Etni Estrella March 25, 2011 Reply to this comment

While I agree on principal, even Don Norman knows that sometimes UX has to compromise with business needs…

I am wondering if this was the result of poor UXD or a conscious decision to use the CCV code as some sort of “digital signature” (along with accepting the terms) for security purposes…

Still, the user has likely already pocketed the card by this step and is now likely annoyed at this process, which could lead to order abandonment. Not a chance — regardless of how slim — I would be willing to take.

- E

Post a comment!

Close overlay