The 300 Million Dollar Button (A UX Success Story)

UX web design tutorial 300 million dollar button

Let's explore a case study where a simple change in UX led to a 300 million dollar increase in annual revenue 💰💰💰.

Backstory

Around 2008, there was a large e-commerce site (Amazon?) whose checkout process was as follows: a user would first shop for items and add those items to their shopping cart.

Once they filled their shopping cart, they would click a checkout button.

e-commerce user checkout process

At this point, they would encounter a form with the following layout:

  • two input fields: one for an email address and the other for a password.

  • two buttons: a register button and a login button

  • a link to click on if they forgot their password.

the original web form used by the e-commerce retailer in this article

While there was nothing inherently wrong with the form layout itself, placing the form here at this point in the sales process was causing a conversion bottleneck.

This placement was causing friction and hindering the user from achieving their true end goal of buying the product.

website customer frustrated by the online checkout process

So, let's dive into this for a minute and see how this caused friction.

For one thing, many customers didn't remember if they had previously created an account. For that reason, many ended up spending time trying to recall email addresses and passwords.

Unfortunately, these often turned out to be wrong, leading to mass frustration.

a customer trying to remember their login credentials but getting frustrated

And if a customer clicked on the forgot password link, they now had to try to remember which email address they might have registered with in the first place.

Now, while the company didn't think first-time users would mind registering, many users were leery of doing so. They didn't want to get into some unknown level of engagement and have to start entering all sorts of personal data.

Many were suspicious of getting placed on mailing lists and, in general, unsure how their data would be used.

Solving the UX Problem

All right then, let's now take a look at the big fix.

You see, what the company ended up doing is getting rid of the "register" button.

Instead, they created a "continue" button.

The new layout looked like this: we had one section functioning as a "returning customer" section and another section, the one with the "continue" button, functioning as a "checkout as guest" section.


Along with the continue button, they added the following text:

You do not need to create an account to make purchases on our site. Simply click continue to proceed to checkout. To make your purchases even faster, you can create an account during checkout.

the e-commerce retailer's UX form solution which increased revenue

You might recognize this as the familiar checkout pattern that we see today.


Here are two current examples of it in use:

This one is from Macy's.

macy's website checkout process

The other is from Warby Parker.

warby parker's website checkout process


Fortunately, once the company made this change, the friction was reduced.


The "continue" button guest checkout allowed the user to proceed directly to purchase the product without going through the authentication process.

And this resulted in a massive revenue increase to the tune of 300 million dollars.




Check out the video below and let me know, in the comments, what you think the key takeaway or lesson learned from this UX change was.

300 million dollar button video