Reebok.com Checkout Flow Needs Improvement

While trying to buy a pair of shoes from Reebok.com, I ran into a pretty clunky user experience for the mid-purchase suddenly out of stock use case. Here’s what happened: I added a pair of shoes to my cart and then was shown an error message.

Image

Image

Unfortunately for me, someone must have beat me to the last remaining pair of this specific type of shoe at this specific size. This is fine and boilerplate e-commerce. Happens all the time. But how would Reebok.com design the user experience for me?

A bit clunky I’d say. In the top of the page, I see an error message saying that one or more items … are no longer unavailable and that I should check my cart contents before continuing. This page isn’t too clear because according to the top of the page there’s a problem with an item in my cart and according to the bottom part of the page there are no products in my cart.

Sure, I understand that the reason why the item was taken out was because it became out of stock, but let’s see how this use case can be improved. For one, we can have the error message be more specific and tell me specifically which item became suddenly out of stock – as opposed to the more generic “one or more” catch-all. Second, it would be very beneficial for Reebok’s conversion if they pointed me to similar shoes to the one that suddenly became out of stock. From browsing their site, I know that they already have this feature built out — so they just need to invoke it here. If they can make those two changes, this clunky experience of losing out on a pair of shoes you really wanted can be improved and thus improve their end-to-end conversion.

An Improvement to Amazon Checkout: Transparent Shipping Costs

One of the main reasons people use Amazon.com is because of low shipping costs. Many years ago (an eon in internet time), Amazon created the promotion of offering free shipping if the order size was at least $25. This was both a feature that was loved by customers and a feature that was business savvy (one side effect of such a feature is that it increases the average order size). More recently (several years ago), they created Amazon Prime which provides for free 2-day shipping (irrespective of your order total) if you have paid a yearly fee for the Prime service.

For items that are not sold directly by Amazon.com, the shipping options aren’t quite as awesome. In fact, many of these items do not have free shipping and offer standard rates depending on how soon you’d like the item. For these non-Amazon items, Amazon.com can improve the user experience when it comes to displaying shipping costs at the time of Checkout. Consider the following item:

Image

This experience is confusing for the user because it is not perfectly clear what the shipping costs are with each available shipping option. The user is required to manually select the radio button associated with a shipping option in order to view the corresponding shipping costs. For example, if the shipping option is changed to two-day shipping, the total is updated to reflect a cost of $20.45.

Image

The result of this lack of transparency between the various shipping options is going to lead to pogo-stick behavior by the user. The user will click on the different options they may have some interest in, only to bounce back to the original option if the shipping cost wasn’t what they deemed reasonable. Instead of encouraging this type of behavior (and wasting the user’s time and patience), the better experience would be to make the cost of each shipping option visible to the user from the get-go. Here is a sample mock-up of a better user experience:

Image

Activation of Amazon 1-Click Can Be Smoother

Amazon has a type of checkout, called 1-click, where you can complete the entire checkout process (specify the payment method, confirm the shipping address, select the delivery preference, etc…) just by clicking one button on the item page. By default, this setting is OFF. The flow they have to turn on this setting is a bit abrupt.

Image

On the right hand side in the image above (highlights added by me), there is a secondary call to action underneath Add to Cart that states Sign in to turn on 1-Click ordering. Here’s what happens if you click on this link. First you see the sign-in page:

Image

No surprise here. After signing in, you see this:

Image

A confirmation page telling you that you have now signed up for 1-click. What happened?!? As a user, my expectation was to be taken to a settings page where I could check a checkbox, or toggle a radio button, or click a button to turn ON 1-click. As a general pattern, it is a bit odd for a user to see a confirmation page of any kind after signing into a site. Typically, you want to have the user sign-in, be verified, and then click on a final confirmation call to action to finish the flow. To have it occur immediately after the sign-in page was a bit abrupt.

For example, the user can be taken to a page that looks something like this where they could then confirm their decision.

Image