The Magento 2 Checkout - Has it improved?

One of the most important areas for improvement in Magento’s upgrade from 1.X to Magento 2 was the checkout. The default checkout process in 1.X is extremely clunky, which can have significant consequences on website conversions. The average cart abandonment percentage is 69%, which highlights the potential gains that can be made with an improvement to this process. Thankfully, Magento was aware of this and they have significantly improved the checkout as standard in Magento 2.

There are many factors that can contribute to customer abandonment at the checkout and the more of them that can be addressed, the greater the chance of improvements to your conversion rate. 23% of people will abandon the checkout process if there is no guest option. 27% of people abandon due to a long and/or complicated checkout process. 24% of people will abandon if they can’t see the total order cost up front.

Magento 1.X checkout features

Out of the box, the Magento 1.x checkout defies many key user experience rules. This is why there are a number of more user-friendly checkout extensions available. While we have completed many customised checkouts at Best Response Media, a simpler out of the box solution would have been useful!

Magento 1 Checkout

Magento 1 Mobile Checkout

Poor guest checkout

Although Magento 1.X has a guest checkout option, it is clunky, to say the least. As you can see above in both the desktop and mobile versions, there are a lot of options for the visitor, which can result in abandonment.

Long and complicated checkout process

The entire Magento 1.x checkout process covers six steps. The longer the steps in the process, the greater the impediment to conversion. As you can see above, this process is even more complicated on a mobile device.

No order summary

When you reach the Magento 1.x checkout, you will not see your order summary until you have been through the entire checkout process including entering all of your delivery and payment information. As we have seen already, this can contribute towards 24% of abandoned orders.

Number of steps not clear on smaller screens

If the checkout is being viewed on a smaller desktop screen, tablet or mobile, it is not clear how many steps there are in the process. This is because the checkout steps are vertically stacked. This lack of immediate clarity for the checkout steps volume can generate uncertainty that can lead to abandonment. Although there is a small progress section on the right-hand side of the screen, this is not numbered so it is not entirely clear to the customer how many steps are in the process.

Magento 2 checkout features

Magento has addressed most of the above issues with the Magento 2 checkout. While it is not perfect, it is a big improvement.

Magento 2 Checkout

Magento 2 Mobile Checkout

Two steps to the process

The previously clunky six steps have been reduced to two. This makes the process simpler, especially on mobile and tablet. Although the same amount of information is being requested by the customer, the method for collection has been significantly improved.

Guest checkout as default

When you enter the Magento 2 checkout, you are not given the option of logging in / registering or shopping as a guest. Instead, you are asked for your email address and if you already have an account it will recognise that from your email address and provide the option of logging in. Otherwise, you can create an account at the end of the checkout process, which is generally recognised as a better approach.

Easy account creation

Further to the above, the process of creating an account just requires a click of a button after the order has been submitted. Again, this adds to a smoother approach on mobile devices.

Always visible order summary

The order summary including thumbnail images is now always visible on the right of the screen on a desktop and via a link on mobile. This ensures the customer is clear about what they are paying for before entering their payment details.

Shipping instantly calculated after entering address

Once the delivery address has been entered, the shipping options and prices will be instantly displayed.

Billing address requested only if necessary

The billing address will only be requested if the payment provider requires it. The payment card type will also be detected automatically.

Further customisation

Although the Magento 2 checkout is a great leap forward in usability, which should lead to improved conversion rates, it would still benefit from further enhancements.

Clarity over login / account creation

We would recommend testing a few different approaches to ensuring that customers are clear about the login and account creation process. A returning customer might get confused if they don’t see a login option close to the email entry box on the desktop, which could lead to abandonment. The same concern could apply to account creation. There is a login option in the top right-hand corner on desktop and mobile, but this might not be clear enough. There is also a default message displayed regarding account creation, but the content and presentation of the login option and account message should be tested.

Address lookup

Implement an address lookup function to enable customers to reduce the amount of text that they need to enter when inputting their address. Again, this is especially helpful on mobile devices. The traditional method of this is postcode lookup, where the customer enters their postcode and are provided with options for potential addresses. However, there may be instances where they do not know their postcode or they live in flats with an unclear setup. In these instances, address lookup works much better.

General style update

The checkout is very clean with minimal distraction in its vanilla form. You will want to implement your own fonts, colours etc. We would also recommend further testing with entry box delineating, order summary display etc. For example, on the desktop, the order summary is collapsed as standard. It might be more effective to have this expanded as default. On mobile, the two steps indicator is not displayed, which would be beneficial to show customers what stage they are at in the process. The basket icon is displayed, which enables a view of the basket contents, however testing a text label here such as “order summary” or “your basket” could enhance checkout performance.

Add trust marks and payment options

Adding popular trust marks and payment options including extra options such as Paypal on top of the standard payment gateway can help conversions. The trust marks could be placed below the order summary. Paypal is extra helpful on mobile as it further reduces data that needs to be inputted to complete the purchase.

Add alphanumeric option on mobile

Default the input field to alphanumeric input field on mobile to make entry easier. For example on telephone number or credit card input fields. It will then default to the correct keyword for the customer and enhance the user experience.

Share It! Tweet it! Publish It!