Have you ever found yourself frustrated with a checkout page while shopping online? You’re not alone. Thousands of shoppers abandon their purchases daily due to poor checkout experiences. So why would you want to put your shoppers through this hell? Checkout friction is no joke, and it can be the cause of a major loss in sales. That’s why we decided to introduce a new blog series: The Checkout Showdown, to compare the checkout experiences of top brands.
For our first installment, we’ll be comparing the desktop checkout experiences of Walgreens and CVS.
Batter Up: Walgreens
Shopping Cart Page
Let’s start the journey by adding a 24 pack of Duracell batteries to the shopping cart. Right off the bat, I am overwhelmed just looking at the page. The content is scattered all over the page, and I don’t know where to look or what to click. Not the most inviting start.
Why are there so many things on this page?!
The Coupon Box Problem
The coupon box problem is the practice of displaying a big coupon text box (like the one Walgreens has here) that ultimately lowers your conversions, instead of improving them.
Instead, we recommended displaying the word “Coupon” with a clickable link. Once the shopper clicks on the text, he or she is then presented with the coupon box.
“But wait, if they’re going to click to it anyway, why not just provide a box and save a step?”
Great question. Not everyone is going to checkout with a coupon, so having such an obvious box could serve as a deterrent to the final checkout instead of a helpful tool. When shoppers see these type of boxes they often turn to third party sites or old emails to look for coupons, and if they can’t find any (or find a better deal somewhere else in the process) will abandon the purchase. The less distractions you create, the better. Phone calls, emails, or kids running around can cause a shopper to abandon, don’t add any unnecessary hurdles.
A successful checkout page should be like a SWAT operation. Get in. And get out.
Your goal is to get the shopper to complete the checkout process as quickly as possible. Not only will this provide a great user experience, it will also reduce the chances of checkout abandonment and increase overall conversions.
Let’s proceed to checkout and see what happens.
Wait, sign-in page? What service am I signing up for? I just want to get some batteries, not sign up for a lifetime of spam. When was the last time you were asked to sign up or fill out a form when purchasing items in-store?
There is an option for checkout as a guest, but when I first saw this page the first thing I noticed was the signup form, and asked myself “what do I do now? where do I go next?” Luckily I found the “checkout as a guest” option and my panic was over.
I made it to the shipping page! Can’t they move the zip code to be above city and state so it auto populates once I enter my zip? Although zip codes can belong to more than one city, this is not a common case. To cover all your bases here, enable auto populated fields with the ability to edit if need be.
I am not sure how many pages I had to go through to buy a pack of batteries online, but it felt like walking in the woods with no map or compass. I was ready for a recharge before I finally finished the process.
Walgreens displays an express checkout option on their shopping cart page as well as their payment info page. Before reaching to the payment info page, I have already gone through 3–4 pages and filled out shipping info. So really, what’s the point of displaying express checkout options on the payment info page?
Give me some space fella
The tab key works well to navigate from one field to another, and the “shipping same as billing address” checkbox is a nice touch. The card number field, on the other hand, does not have spaces between numbers, and this makes the readability very poor. Another problem is the expiration date format as it’s not consistent with the date format on most debit/credit cards. Almost all cards have MM/YY format, so why are they showing me a month dropdown? After everything I’ve been through, don’t make me figure out which month is the 10th!
Review page. Can we already checkout please?
If the incorrect expiration is mistakenly entered and needs to be edited, then too bad, because clicking the “Edit payment” removes the card history.
And this sh*t just got real!
The look and feel of this checkout is already off to a better start. At the onset, I feel a lot less overwhelmed. We do see, however, that CVS also suffers from the Coupon Box Problem.
The CVS shopping cart looks nice, but they have the Coupon Box problem here, and it is a bigger issue for CVS than it was for Walgreens. The coupon code field is super noticeable and inviting, so there is a much higher chance that a shopper will navigate away to hunt for coupons.
The real art is making the coupon field visible enough for those who already have coupons in hand, while making it invisible for those who don’t have one.
CVS makes the same mistake as Walgreens by prompting a signup page in the flow. I understand you want people to signup, but trust me most users don’t want to signup. It is ok to offer a signup/sign-in option, but make the Guest Checkout option equally obvious. On this page, guest checkout is hidden and the hierarchy of the elements is wrong. Doesn’t “Continue Shopping” kind of look like a sub category of continue as guest? Yes, yes it does.
Prompting me to signup was mildly frustrating, but take a look at this beautiful form. They display the field names inside the boxes, and when you put the cursor inside the box to start typing, the field name moves above the box. Woah.
They are missing auto city/state population based on zip code, but look at how short the payment field is. I feel good about this form, and I feel good about this page! Let’s talk about call to action button?—?Bam! Place Order is bright red, obvious, and couldn’t be easier. Nice job with this page, CVS!
And the Winner is [Drumroll]….
The biggest problem with Walgreens is that it contains too many steps. On the other hand, Walgreens offers the express checkout option whereas CVS does not. Both companies had the Coupon Box Problem and poor signup page designs (wait, why do they even have a different page for that?), but CVS was a little worse than Walgreens in those areas. When it came to the checkout page, CVS blew Walgreens out of the water.
The clear winner of this is matchup is CVS.
Stay tuned for our next Checkout Showdown which will feature two mobile checkout experiences. In the meantime, you might enjoy this article about why mobile wallets are important.