Magento 2 Checkout – Upgrade Magento for Pure Conversion Genius

Magento 2 Checkout – Upgrade Magento for Pure Conversion Genius

Upgrade Magento to version 2

Upgrade Magento for the improved checkout experience (and conversion) alone! We’ve been trying to get the word out about Magento 2’s checkout experience since we launched our first project last year. We hope that Magento 1 holdouts will start listening!

Get the free Magento 2 Upgrade eBook

What is the all the commotion about?

Razoyo has always been a bit of a skeptic about one-page checkout. We had seen several studies about one-page checkout in the Magento 1 days that clearly showed a decrease when switching from the 6-step accordion process to a one-page process. It seems counter-intuitive, but, the results we saw were clear.

I personally believe the one-page checkout processes had positive and negative user experience (UX) implications, but, the negatives, for most clients, slightly outweighed the positive.

On the positive side, you did not have to log in before checking out. However, because the one-page was not a process change, but, just window-dressing, you still had to make a decision about checking out as a guest or logged-in customer before proceeding. Numerous fields were exposed like zip code or credit card, all of which looked like they should be editable, but, a change in shipping or billing address could lead to a recalculation of taxes or shipping. With everything on one page at one time, it could still lead to a surprise on the order confirmation page if you weren’t paying attention, but, your attention on checkout was not focused by the single-page experience.

Too many Ajax calls

The one-page checkout lead to a lot of ‘spinners’ (those little gifs that inform you the system is busy) while the Ajax was communicating with Magento before updating the whole page. So, while you didn’t have to wait for the page to reload between steps, the page became unavailable (or sections did), which, from the customer standpoint, is essentially the same thing.

I believe the intent of the extension developers was good, i.e., that a one-page checkout experience could be better than a 6-page experience, but the checkout mechanism simply wouldn’t support it without extension-breaking customization. It was a quandary.

We upgrade Magento and ‘BOOM’

When we did our first test upgrade, one of the first items of business was walking through the checkout process. While it seemed needlessly unfamiliar at first, I reflected on the research available in the area. I knew that all of it (and more, I’m sure) was available to Magento’s design team, so, it made sense they would have carefully crafted the checkout process to optimize conversion. Soon, all of the changes to the process began to make sense. The lightbulb went off.

Focus, Focus, Focus

The checkout upgrade Magento seems to have worked the hardest on was to focus the customer’s attention through the checkout process. They got rid of distractions like the menu, footer and other extraneous links.

Step 1 – cart page

If you don’t need the cart page, we recommend sending folks straight to the checkout. However, if you have to send shoppers to a cart page first, you should appreciate Magento 2’s cart.

Magento 2 cart page

Items not used (like coupon code) are hidden but accessible, summary follows you down the page as long as you are scrolling in the cart, ‘Edit’ and ‘Remove Item’ are understated and text links. All attention is focused on checkout.

Step 2 – email address

The beginning of any transaction is the email address. Whether you log in or not, whether you create an account or not, this is the one crucial piece of information. Magento asks for it first. If you have an account, Magento recognizes your email address and asks you to log in… if you want to. If you want to checkout out as a guest, just keep going without entering your password. The decision is made by acting on it or not, rather than diverting the customer to another screen or pop up that requests a ‘decision.’

email entry form

Note how the system is not forcing a sign in and clearly – though unobtrusively – communicates when an account can be created. There is a small sign-in link in the upper right.

 

Sign in link drop down

The sign in link keeps you on the page and has a password recovery option.

Entering the email

I don’t have a sign in option in the main flow, yet. If it doesn’t recognize my email address, it won’t ask for it.

password request box

Magento recognizes me, now and asks if I want to sign in, but doesn’t force a decision point. Ignoring the request does not interrupt the checkout flow.

Getting paid

Without leaving the page, I can now choose a payment option and proceed. Using Braintree’s extension, I get the added advantage of not having to enter my credit card type… it recognizes it from the first digits of my credit card.

drop down showing

The expiration dates are drop downs that are formatted (2 digits for months, e.g.) just like on your card. The drop downs are a big thumb-saver on mobile devices.

Order Summary is always on page

Your addresses, shipping method and cart items build as you complete the process and are always editable without leaving the checkout flow as you can see on this Razoyo client site.

Order summary panel

Not only does the order summary follow you along, but, you can expand or collapse the areas you want. This makes mobile shopping more convenient.

Discount code

Years ago, I worked at a large chain of pizza restaurants in the marketing department. One of the biggest complaints customers had was when the order taker asked if they had a coupon. Why? Because if you didn’t have a coupon when ordering a pizza, you felt like an idiot and you were reminded of it then. An important number of transactions were abandoned because of coupon remorse. The order taker asked for operational efficiency  reasons (if the customer stated the code after the order had been placed, it had to be completely redone), but, it killed some sales.

The same theory applies here. While you still need the code to apply it, not assuming a code is available by having an open box reduces the potential remorse from shoppers who don’t have one. Renaming it from ‘Discount Code’ to ‘Loyalty Code’ or ‘Shopper Code’ might even help more (would be a good A/B test to run).

Coupon code with no box

The coupon code box has to be opened by the user.

Coupon code box open

Yet, adding a code is not disruptive at all.

Upgrade Magento’s Mobile Checkout Experience

Many of the enhancements make mobile even easier.

  • Using drop downs for month make them scroll-wheelable on mobile devices
  • Big target buttons make checkout a breeze even if you have two left thumbs
  • Form fields are data-typed, meaning many mobile browser will fill in the information (like email or address) of the user where applicable
  • PayPay is seemlessly integrated, making that checkout option even easier
Upgrade Magento for a better dropdown cart

PayPal payment options are integrated into the dropdown cart.

Can it be better?

Everything can be improved, but, Magento got a long list of important details correct in this version. The amount of attention paid to the email entry step alone is impressive. Contact us about your Magento 2 upgrade and we’ll talk about upgrading your checkout experience to match your site and shoppers.

2017-10-26T10:55:17+00:00

Razoyo

Razoyo is an ecommerce consultancy and Magento Certified Developer serving the needs of small and medium-sized web stores. We help online merchants to create, manage, maintain and update their stores, and to solve both business and technology problems.

RECENT TWEETS

CONTACT US