One of the most frequent questions our customers and potential customers ask is:
“What does Magento Enterprise native checkout look like?”
Magento have done their research around what makes a checkout process easy for a user to complete. Overall the out-of-the-box solution is pretty great. However, there are a few improvements that we suggest to our customers that smooth out even the smallest barriers and will increase conversions.
Let’s take a look at pure vanilla Magento Enterprise checkout. Under each screenshot of each step, I’ve listed minor enhancements we frequently suggest and implement in our customers’ solutions.
Step 1: Login
Here, there is an option to checkout as a guest, which is good practice. But, there are a few too many options and just a few too many clicks (decisions) for the user to make before being able to move on to the next step. It is better to make that right-hand column look a bit more like this:
A simple “Continue” for new customers and the option to create an account later is a great way to avoid a commitment to “Guest” checkout from the first step. We are more likely to finish the path that we have already started (according to P.E.T. UX theory). So, why make creating an account a change in that path rather than an added bonus further in the process? I’ll get to that later.
Enclose the checkout! Enclosing the checkout (removing the navigation) creates focus for the user. It is also an opportunity to add security icons and messaging. For many, many more reasons why to enclose the checkout, read Paul Rouke’s post on eConsultancy.
Now, I’m going to checkout as a guest in this example, but if you scroll to the bottom of this post I’ve included Registered Customer screenshots too.
Step 2: Delivery Address
Here is a familiar form, but it is a long form. By integrating with a postcode look up tool, this step becomes much quicker for your users to complete. We have previously integrated with Postcode Anywhere and recommend that enhancement to our customers.
Also, it’s good practice to make sure your form field sizes are related to the content that should be typed in them. For example, the form field for postcode in this example is too wide. Here is some more advice specific to form fields and validation on Smashing Magazine.
Step 3: Payment Address
I love how the left column updates with each step and acts as a mini-summary. I also love how it’s really obvious that a user can go back in the process and not lose any information already entered. Good and good.
Again, the main enhancements we suggest for this step are the same as for Step 2: the addition of a postcode look up integration, and paying attention to form field best practice in the design.
Step 4: Delivery Method
This step will vary greatly depending on the delivery options that are configured. The content of this step is absolutely fine as it is, but just make sure that this is not the first time users are seeing shipping costs. This is known to cause drop off if there are surprises. According to a survey by eConsultancy, “74% of shoppers would abandon a purchase due to high delivery charges”. This can be avoided if users know the charges before even adding a product to the basket.
Other enhancements we have recommended for delivery options include:
- Alternative delivery methods like Click & Collect, Same day delivery and Ship from store
- Time-slot delivery
The feasibility of these will depend on your systems integrations and your chosen 3rd party providers.
Step 4: Payment Method
Again, this step will vary depending on your Payment Service Provider. Generally the PayPal method will redirect away from your site to PayPal for payment.
If you haven’t already added security messaging and icons to your enclosed checkout header, this is a very important step to have these visible.
Step 5: Summary
This is the last step in the checkout journey before clicking “Purchase” (unless the user is paying with PayPal). It’s very important here for the user to be able to see all important information. In our experience this includes product images. By including product images, the user is less likely to go back into their basket in order to double-confirm what they are buying.
The products in the summary list are not clickable. This is good design by Magento. There is a link to edit the basket which is debatable. Some of our customers strongly push for keeping that there, others don’t want it there at all. My view? As long as it doesn’t visually interfere with the main “Place Order” button, keep it.
Step 6: Thank you
So, remember that I checked out as a guest in the first step? Considering that, this is really poorly designed. I’ll go as far as to say that ALL retailers want their users to create an account. If you keep this as is, it is a dead end.
We suggest something like this:
The only thing missing from a “Guest” checkout that is included in a “Register” checkout is a password. By starting the checkout process without an explicit “Guest” option and ending the checkout process with a screen like this, you are reiterating the values of your brand, the benefits of account creation and showing the user how simple it is to create an account. Choose a password! Most likely, they will do so.
Validation: Magento Enterprise comes with inline validation out-of-the-box which is great. But don’t forget about micro-content! These error messages should actually mean something to your users.
The only difference in Registered customer checkout:
This is the only difference between “Guest” and “Registered” checkout. Obviously this can be styled many different ways. Think Amazon… it doesn’t have to be a drop down. Bottom line: quick and easy checkout for returning customers.
So, not too bad, right? With Magento Enterprise it’s nice to know that with a little bit of research and without too much development effort, you can build and test a user-friendly checkout process.
About the Author
Rachel Tonner is Brand Manager at Ampersand Commerce. With a background in digital design, branding and online presence, she is well-versed in cross-platform user experience & design for ecommerce. Rachel is responsible for ensuring customer brand guidelines, designs and UX requirements are followed through project delivery.