How to make an effective checkout page: let’s analyze the most common mistakes on websites 💻

The column was first published for dev.ua on January 20, 2023

Payments on websites or in apps are something that we have become so accustomed to over the years that we consider this as a basic way to purchase something on the Internet. It’s fast, convenient, and [there should be a few more standard advertising catch phrases here]. However, when paying on some foreign sites, you may have noticed that the payment form is inconvenient, you have to enter a lot of data, and it is completely unrealistic from a smartphone, because half of the input fields are not displayed properly.

But it’s not only the need for an decent UI\UX behind all these pains , but also a lot of technical work with the key page of any site – the checkout page. My name is Denis Mykhailiuk, I am the Chief Technical Officer in bill_line fintech company, and in this article I’ve collected the main mistakes on the websites we help our partners to correct in order to achieve high conversion and earn more.

#1: Lack of responsive design

An obvious rookie mistake, which, however, is made quite often. The whole thing is that when developing / updating the website, people often pay a lot of attention only to the most obvious pages: the main page, the product page, the shopping cart. The checkout (page for entering payment data) is usually become noticable only when partner see an increase of the сart abandonment rate, and when neither email pushes nor social network remarketing didn’t help to fix that.

The problem, which is perceived as something complex, lies in the trivial display of the desktop version of the checkout page on a smartphone. It will be or too small to tap on the screen, or too large in scale. This is the first thing we check: after optimization, the situation with сart abandonment usually stabilizes.

#2: Localization errors

The next most common error is missing localizations or errors in them. This most often applies to two situations:

• The Russian-language page was translated into Ukrainian with dubious errors or it was not translated at all). Any real user, seeing Google Translate and not human language, will at best close the page, at worst – write a negative review.
• The Ukrainian-language page was translated into English (or not translated at all). This mistake is popular in 2022, when many businesses have begun to enter foreign markets. If you have a lot of customers, say in Poland, then the pages should be localized not only in English, but also in Polish. It is necessary to take into account both the level of knowledge of English and the tradition of using the native language. In addition, you should pay some respect for an our ally country.

#3: Too many data entry fields

This point requires a deeper study of the user journey and the specifics of the business.

Some merchants want to display or collect a large amount of information about an order and display it to customers. This is very good for the perception and transparency of the business, nice move. However, this poses several potential problems for checkout:

• Doubling the enter of the data to sign up at the checkout stage. This increases the number of abandoned carts, because people simply don’t want to repeat themselves.
• Displaying the full array of input above the payment form, forcing your customer to scroll down to the payment button. This reduces the payment conversion, because user doesn’t see the button all the time.

Usually, in such cases, we advise hiding the data under a spoiler or optimizing the number of input fields to the minimum.

#4: No adaptation for payment methods of different platforms and countries

Some merchants have a cool checkout page: visually optimized and with excellent loading speed. However, they didn’t make a comprehensive adaptation when they added the ability to pay via google pay and apple pay (for example, apple pay can only be on the Safari browser on the desktop). This results in buttons that don’t work, or a “broken” page layout that has a bad effect on the user experience.

But the most important thing we need is a regular a/b conversion tests. This is what will help to detect all errors and make any payment effective.