Checkout Page — Walgreens vs CVS

Think about the last time you bought something online, and think about your checkout experience? Do you even remember it? Probably not, as we all have been hypnotized to accept things the way they have presented to us. Why is running a dishwasher more complicated than using a computer? Why are parking signs on the street so difficult to read? And why do online checkout pages have to be like a hospital patient acceptance form? Things can be simpler, and it is time for change!

Since I work in the payments industry, I thought of taking a closer look to the some of the most visited shopping sites and their checkout flows.

My mission is to change the shopping experience one checkout page at a time.

One tap, seamless checkouts are the way to go, but when you don’t have those options, this does not mean your checkout page has to be like a hospital patience acceptance form (6 pages boring form).

Today I have reviewed checkout flow of two popular shopping websites; Walgreens vs CVS. Here’s a closer look at the set-up of their respective checkout pages.

Walgreens

Shopping Cart Page

Let’s start the journey with 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 seems scattered all over the page, I don’t know where to look or what to click. Not a nice start:)

Coupon box problem: What is coupon box problem? “Coupon box problem” is practice of displaying a big coupon text box that ultimately lowers your conversions.

Instead display a clickable text named “Coupon” on the page. Once the shopper clicks on the text, then they are presented with the coupon box. So why not show it directly? First, not everyone is going to checkout with a coupon. Second, having a coupon box part of the checkout flow creates distraction and increases checkout abandonment. When shoppers are about the move to the next page to pay, they see this big coupon box, and then shoppers navigate away from the checkout page to search for valid coupon codes online. There’s a high chance that would abandon your checkout page as they might come across attractive coupons for the competitor brand. Not to mention, every extra second spent away from the check out page could lead to cart abandonment. For example: Phone calls, text messages, emails interruption by family/friends, etc.

Checkout page should be like a SWAT operation. Get in and get out.

The goal should be making the shopper complete checkout as quickly as possible. This is not only great for user experience but it is also important to prevent checkout page abandonment and increase your 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 signup. 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 you see this page the first thing you see is the signup form, and you start asking yourself “what do I do now? where do I go next?” Luckily you get to see the checkout as a guest option and the panic is over.

Shipping Page

Shipping page is finally here, yay! Why not move the Zip code field above the City? Wouldn’t it be great if City and State auto populated once Zip code was entered in? Although Zip code could belong to multiple cities it is less common use case; also auto populate does not mean, users are not allowed to edit.

Time to review the Payments page.

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 have been clicking various buttons page after page after page just to place my order successfully.

Walgreens displays an express checkout option on their shopping cart page as well as their payment info page. Until reaching to the payment info page, the shopper already went through 3–4 pages and filled out shipping info. So really, what’s the point of displaying express checkout options on the last page?

Keyboard Tab key works well to navigate from one field to another, so does the “same as billing address” checkbox where shoppers can use billing address as shipping address without having to re-enter their address. The card number field however needs some updates. The card number field does not have spaces between numbers, and it is often difficult to read a long string of numbers without any spaces between the numbers.

Another problem is the expiration date format as it’s not consistent with the date format on most debit/credit card. Almost all cards have MM/YY format(2 digits month followed by 2 digits year), so why on the web we have Month dropdown with month names? Don’t make users to figure out which month is the 10th. And don’t display a dropdown in here.

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!

I have to read and agree to Walgreens Terms of use. Why are you making me feeling like I am signing a contract? Since when I have to sign a contract to get toilet paper. (Assuming the same option will be still there if I bought toilet paper instead of batteries:)