"It’s all about the checkout." Improve your ecommerce conversion rate
“In the end it’s all about the checkout. Isn’t it?” - Vitaly Friedman
Usually, companies don’t have a big budget to spend and hire professional conversion specialists or agencies that will help them optimize their conversion process. And eventually, help them increase their sales. In this case, most of us have to do the research on our own in order to increase the conversion rate of our shop.
We at Laroche decided to share some insights that we learned from years of designing eCommerce websites. These insights will help you not only improve your conversions rate but also the brand image. How’s that? Well, when an eCommerce store focuses on a good usability, fast checkout and load time, the message and copy is clear, has good product photos, it’s a sure way to differentiate from others. In a nutshell, it all comes down to how easy and fast I can buy something from your website. Marketing popups, poor forms that are hard to fill in, long checkout process, creating an account in order to buy something, these details decrease conversion rate.
Most of the conversion specialists will say that you have to use better persuasive copy that will convince your customers to buy products or not drop down from a checkout process. Or they might suggest changing colors to buttons, and this kind of details. But there is a different way to do things. It’s all about simplifying the process of buying a product on your website.
Checkout
It should be extremely easy to buy something on your website. How easy? For example, the shopping cart should always be visible and not that I have to open a new page, lose context and then see my products. The best solution, in this case, is to have a shopping cart that is the same on desktop, tablet, and mobile. A slide in bar would solve this. Look at Cotton Bureau how great they do it. Something very intuitive, easy and fast. And most important, you don’t lose the context of where you are in the process! Also, take a look at the upsell in the shopping cart. It's a good example of copy placement.
Bonobos.com is another great example. Their checkout is all on one page and each step is highlighted when you work on it and others are faded. In this case, the client knows all the steps in advance without losing context.
Bellroy - a company that gets the idea of producing great leather products, investing in digital marketing and having a modern and professional e-commerce store. They also know the need of having the functionality of the website on the same level as their high-quality goods. As in the case of bonobos, having the checkout process all on one scree is the way to go.
They also limited the fields a customer needs to complete in order to save time and lower the bounce rate. There is the only field for the address, this means the billing address is by default the shipping one too. However, in order to be careful so the user does not misunderstand you, you can write shipping address and put in brackets billing address. This way you will avoid any confusion.
Warby Parker - if there would a prize the most minimalistic and clean checkout process, they would get it. Even though their checkout has 2 steps, the benefit of it is that it is all in one column and the fields are short. This creates the illusion that you can fill in everything quickly. Our minds think this way too, you complete something from top to bottom and this way their checkout process feels natural when completing it. Another good example from them is their error messages. Most checkout processes highlight the fields in red when something is missing without giving a proper explanation of what is needed to do. This creates frustration for the end user and increases the chance that they will leave the website. Warby Parker, clearly explains each field if something is missing or if an information is filled in incorrectly.
Boldking - not only fashion stores have great checkout experiences. For example the dutch brand Boldking has a smooth one page checkout process. Even though getting to the Shopping Bag is pretty generic, the entire experience of going through the process of buying their product is delighting and easy to use. Well thought upsell strategy when filling in your information. The process is from top to down so you don’t lose context of what is happening and you constantly are reminded about your product summary.
Also, I have to mention that choosing your shipping method is user friendly because most of the shops have it as a dropdown or tabs, which confuses people. A research done by Baymard Institute among 486 people showed that choosing your shipping that is hidden behind a tab or drop down is misleading and most of the people missed it. Another great thing I noticed about their checkout is that if you drop the process and close the website and then come back, it remembers all your data you filled in. And not only it remembers the data, but the last step where you have been.
TheCoolClub - a dutch ecommerce website that sells minimalistic posters. Besides being a well execute website that loads fast and does not contain extra clutter, it has a basic but well optimized checkout process. Their shopping bag is exactly like on Bonobos, with a slide in bar, but they found a good way to display payment methods they accept and the free shipping copy. However, when adding a product to the shopping bag there is no indication that the product has been added which can create confusion for some users. So you have to be careful and display this important interaction in a clear manner so everybody can understand it.
Takeaway notes
A rule of thumb - if a client finish a checkout process in under 1 minute, you have winning checkout flow. If you prioritize performance before anything else, it will help you deliver higher results. If you can cut through tons of animations that are not useful for a functional website, then it will dramatically improve your results. I understand, we all want to have some animations that will impress the visitor, but it will come down to do you want to impress or convert?
Everything in the checkout flow should be designed with an eye to details and possible errors. Constantly ask yourself, do we need these extra fields only to lose a customer or we can cut them out? Can we combine these 2 steps into one? Is billing form easy enough to fill in? Or is it clear enough? How fast can a customer checkout? Let’s test the process with random people who don’t anything about our shop, etc.
Summary:
Checkout under 1 minute
Keep all the fields and steps on one page. Details, Shipping, Payment and summary.
Shopping cart can be either a slide in bar or a top corner bar. Not necessary to design and build an extra page for it.
Remove all the unnecessary clutter and keep it clean and to the point.
Visually prioritize the important fields, copy and buttons. It should be clear to anyone what they should do and what is the next step.
How to ensure that your conversion rate is constantly increasing?
Or at least it is not going down. Three simple steps: learn, apply and test. It’s always about iterating, learning and testing new flows. If you do this constantly, your conversion rate will go up faster than you think. Changing copy alone is not enough as you need to do UX research, tweak your user interface, make changes to design, see how people use it and so on. It really boils down
Further reading & research
The guys from Baymard Insitute, do lots of research on eCommerce usability. They study big eCommerce stores from all over the world and fortune 500 companies too. Their research papers have real data and results on what works and what doesn’t. If you are a company with a low budget, then this will step up your game tremendously as you can learn from the mistakes of other companies.