Arrow close_button arrow_dropdown angle_left angle_right Phone Search Hand Slider Checkmark Read Icon eguide tools video
Groove Commerce
Unlike the other 99% of designers in the world I don't drink coffee. I know nothing about a good cup of joe, but I do know some things about user-friendly eCommerce sites. This month I checked out a coffee seller site to give them the design 1, 2, 3: a good cup of joe in the shopping cart treatment.

Unlike the other 99% of designers in the world, I don't drink coffee. Well, that is to say I didn't. Recently though, I've been a regular chai, latte, frappuccino drinking, from breakfast to dinner, designer. And so far, it's been pretty tasty and only a little jittery. It's fair to say though, that I know nothing about a good cup of joe, but I do know a thing or two about user-friendly, well-designed eCommerce sites. So, for this month, I thought I'd check out a coffee roaster and seller site and give them the 1, 2, 3 treatment.

I visited this one coffee seller's site, and it is a beautiful design -- great textures and color palette -- but the site has some room for usability improvement, especially on their shopping cart page. (And as you hopefully know by now, when you want to improve your online store, you begin with the shopping cart and checkout, and work your way backwards through the shopping process.) Check out their shopping cart page below:

Before I tell you what I would fix - what would you do? Can you spot the problem areas?

1. User Confusion
The row of buttons while aesthetically pleasing are not intuitive to a user. They all have the same visual appearance and weight. No button is more important than any other, and from a conversion standpoint, we just know that isn't true.

The checkout button should be different from the other buttons because it is the primary call to action (CTA). When a user arrives on the shopping cart page, their eyes should go directly to the checkout button. But here it's getting lost. Changing the size or color is an immediate way to give the primary CTA more visual weight and presence on the page.

2. User Confusion
Unfortunately, the color of the buttons isn't the only problem with them. The order of the buttons: checkout, update, empty cart, and continue shopping, also isn't intuitive. Let's take it button by button:

The Checkout button is the first button on the left. While this makes sense in the fundamentals of design - English speakers read from left to right, and thus, the most important information should be on the left - this is one of those times where it's okay to break the rules. The standard practice on eCommerce websites is to align the checkout button with the Total column on the shopping cart. If you're going to deviate from the standard, it ought to be for a good reason. And this website isn't giving a strong enough reason to move the CTA button. As a result, it's not where user's are expecting it to be causing them to slow down before moving into the checkout.

I won't go into too much depth about the Update button. I prefer it to be in closer spatial relation to the items it's updating (such as quantity and promotional code). But the update button can really float around on the page depending on the design.

The Empty Cart button needs to go ASAP. Users already have the ability to remove and item or to change the quantity zero, which is enough pathways for a user to remove items or empty the cart. Don't provide them this button; it won't be good for you conversion, and it's not good for usability. Imagine having four items in the cart, and accidentally, hitting the "Empty Cart" button instead of the update or continue shopping. Suddenly, all the hard work you've spent shopping over the last 45 minutes, is a complete waste. Do you think the user is going to go through that again or will they just close out of the site and shop for it "later."

Again, I don't have an incredibly strong opinion about the Continue Shopping button. My suggestions are to 1. consider it's placement in relation to the checkout button, and 2. consider whether it needs to be a button vs. a link. And one more additional thing to consider, where does your Continue Shopping page take the user? To the homepage, to a category page, to the last product page they were on? Think about it, Continue Shopping is a rather ambiguous phrase.

3. Credibility & Confidence
Granted on well-designed, up-to-date websites, user's will probably feel confident in the site's credibility and ability to protect sensitive information. However, adding third party security logos (in the footer is a good place) provide an instant visual guarantee to the user that their information is protected. And if you had to choose between a user thinking vs. a user knowing, which do you think increases conversion? Yeah, me too.

These few design changes could have a significant impact on a site's conversion rate. And you could buy a lot of cups of joe with that dough.

Mentioned in this Post:
Shopping Cart : Java Cabana

Get in Touch