E-commerce Checkout Design Deep Dive (Part I) — Credit Card Collection

7 min readFeb 20, 2017

(Updated: 2/26/2017, and Part II is now available)

In online shopping, the most critical part of the process is likely to be the final checkout steps. It actually take a lot of trust (and typing) when we give our payment and address information to a third party merchant website, and then cross our fingers hoping that we get charged for exactly what we paid for, and the goods will be delivered to our home correctly, not getting shipped to my next door neighbor or a house that has the same door number but is two blocks away.

Now, step into the shoes an e-commerce site owner for a second, and imagine how you would build a site that steers the buyer to click that “Confirm” button as often as possible?

If you have read the book Thinking Fast and Slow, one of the major concept introduced is called Cognitive Ease. Cognitive ease refers to the psychological ease in making decisions, when we see something that we can related to, feel good, or familiar with already. In the e-commerce world, it means that when you build your UI, the experience should be largely the same as the other popular sites (Amazon, Target, Walmart) where he/she might shop at.

If luring a buyer to give his payment and shipping information is the most important job of an e-commerce site, then the merchant has every interest in inducing cognitive ease in the checkout flow , by making the experience as smooth and familiar to the buyer as possible.

I have been doing some works on UI layout design recently, and so I thought it would be interesting to survey different e-commerce sites and see how they structure their payment / address page, and share what I have found in this process.

In this part I, we are going to start with the credit card collection from design. In part II, we will move on to address collection form design.

Research Hypothesis and Questions

Assume that familiarity breeds liking, you’d assume that most of the payment method pages from these top merchants would have similar look and feel or layout. After all, the required information are standard for e-commerce, and the form factors (desktop mostly) are uniform.

For example, we’d expect:

A payment form structures its layout more or less inline with how a customer looks at his physical credit card. he form always starts with the card number, then the user enters the expiry date and the name.
A form collects only what it requires to complete the transaction. For example, since names aren’t always required, it will not collect the cardholder’s name, or the billing address.
It uses common terms that can apply to different card types. For example, Visa/MasterCard/Amex/Discover all use different terms to refer to the 3-digits printed at the back of their cards (for Amex it is the 4-digits at the front). Security code seems to be a more generic and well-recognized term than other choices.

With this assumptions I formulated a set of survey questions:

Does the form collect cardholder name?
Does it auto detect the card type (Visa/MasterCard/Amex/Discover) based on the number that the buyer entered, and show the appropriate help for entering security code?
What is the first field to enter? Name or Card Number?
If the name is needed, how does the form position the cardholder name field?
Does it refer to the 3-digits at the back of a card as security code, or CVV / CID?
Does it collect the billing address of the card?

Source of researches

To address my questions, I surveyed 27 different e-commerce sites across the web. Since the majority of the e-commerce still happens over the desktop, I focused on desktop browser only.

Now, let’s look at the patterns from that individual sites.

Survey Results

In our table below, we highlight the results with different colors that express a common sense judgment on the feature’s usability:

Green label denotes the feature that helps improve usability because it reduces the number of fields entered, or has better clarity
Orange label means that we are not sure if this feature helps or degrade usability
Red means that this feature hurts usability because it is more ambiguous, or make the flow more cluttered

Here are the results:

Baymard Ranking ranked E-commerce sites

The first set of sites comes from Baymard Institute’s Checkout Usability Rankings. Out of the 50 top ranked sites, I picked out 7 sites from well-known merchants that sell physical goods, and are highly ranked: B&H Photo (Rank #1), Home Depot (Rank #2), Staple (Ranked #3), Office Depot (Rank #5), Walmart (Rank #5), Target (Rank #8), Best Buy (Rank #9) and Nike (Rank #20). I expect that most of these sites would set a benchmark for good layout design patterns, with Nike being sort of like a benchmark for an average merchant.

(*) — Requires explicit card type selection

Credit card forms on several Internet giants and payment processor

The second set of sets come from several internet giants (Google/Apple) and payment processor (PayPal, Stripe). Note: I deliberately skipped Amazon in this round.

The surprising thing I found though:

Ebay has two completely different layout for managing authenticated and guest users. However, the good practices in one flow aren’t carried to other flow and vice versa.
PayPal’s payment form is one of the more elegantly designed form. But the split between Ebay and PayPal means that these best practices aren’t adopted in Ebay. It would be interesting to see if the payment method activation rate has changed, before and after the split.

Credit card forms on several hospitality or service-based merchants

The last set of sites are from 10 other established e-commerce merchants that sell services or digital good. The reason for including these sites in the survey is to use them as ‘control’, and reduce the possible bias for certain industry (merchants that sell physical goods).

Observation on common practices

Treatment in card number and cardholder name

Almost all the sites collect cardholder number as the first field on the form
However, · >50% of these sites don’t collect cardholder name at all!
>50% of these sites allow or auto-format the space between card numbers (e.g. “4242 4242 4242 4242”). Researches show 23% of buyers type their card numbers in distinct 4-digits blocks .

If the buyer needs to enter the cardholder name, the field is usually placed below expiry date and security code fields

Card type detection

Most sites support auto-detection of the card type as the user enters the card, and shows the appropriate logo
However, some sites have neat treatments around helping buyer entering the security code by auto-detecting card type and shows an appropriate image hint. For example, if an Amex card number is detected, the form shows the front of an Amex card, and highlight the CID position (see below)

Security code/cvc/cvv?

Most sites refers to CVC/CVV2 on the card as “security code”.

Billing address requirement

Most sites still require a billing address for the card.
However, there are great way to help user enters the correct address. We will talk more about that in Part II.

General layout design

Sites mostly use explicit labels, although we are observing a new trend that inline. the label in the field. Google sites (across Play Store or Payments) takes this design approach.

The use of animation is essential in creating a delightful experience. Out of all the sites I looked at, the Target has a nice experience where the fields are first inline, and upon typing the card number, the form then show the rest of the fields for credit card