Increase Your Online Sales Using Our Principles of E-Commerce Checkout Design
Ecommerce
09 Dec 2020
15 min read read
By Digital Butter
Here’s a little statistic that will throw a curve at e-commerce website owners: The average rate for shopping cart abandonment is around 70%.
While we hate to be the bearer of bad news, it means there’s a possibility that you’re only generating income from the 30% per cent that pushed through with their purchase.
There are a lot of moving parts that affect the effectiveness of your checkout process.
Some of them are uncontrollable, such as when potential customers leave the cart once they see the price of their total purchase. There’s really nothing you can do to alter how they feel about that. Unless of course, you price your products differently.
That’s great news for your business, but that just leaves you wondering where and how you’re getting it wrong.
This brings us to a more controllable element. One, that when done incorrectly, can serve as a massive roadblock for your customers to click on that “Pay” button - the checkout process and design. Over recent years, this has become a relevant part of ensuring optimal customer experience, which is a surefire way to strengthen brand loyalty and increase more revenue.
Why is E-commerce Checkout Design Important
What’s the difference between buying from a physical store or going online?
Going to the commercial centre means you’ve gone out of your way to make a purchase and you’re willing to spend time and effort to make sure you don’t leave empty-handed.
Image Source: Shopify Plus | The 10 largest eCommerce markets in 2019
It’s not the same as online shopping. Since convenience is the reason consumers browse online, they are likely to leave without finishing the transaction when they encounter inconveniences and distractions along the way.
Suffice it to say, you shouldn’t let potential income vanish into digital air.
It’s time you streamline your eCommerce checkout design.
What is the standard checkout process vs Butter Checkout Process?
Apart from creating and marketing products, one of the primary difficulties most businesses face these days is figuring out ways to preserve a user’s interest in every interaction. This fittingly applies to the checkout design process.
Digital Butter believes it’s our job to ensure our clients end up with a conversion-focused checkout design. And while we know that many things in this world require the application of conventional practices and concepts, we understand that no business owner would like to play second fiddle to another.
It’s not always easy to stand out from the crowd. But if you want to create top-of-mind awareness, you don’t merely go with the flow.
And so, we decided to innovate.
As you can see in the figure above (insert infographic), the standard checkout process consists of seven steps. These seven steps look pretty straightforward to the unknowing eye. But the truth is it takes up a long time -- something that most online buyers are not willing to spare.
Butter’s unique checkout flow (insert infographic) is a product of rigorous research, years of experience, and a great desire to please our clients. After giving it much forethought, we realise that the typical process can do without some steps, which in turn sped things up, thereby, leaving fewer chances for the buyer to change his or her mind.
Let’s dive deep into each of these steps.
The Shopping Cart
In case you’re wondering just how much money e-commerce brands are missing out on due to shopping cart abandonment, we’re talking about US$18 billion in revenue annually.
It doesn’t have to be that way.
But you see, no one wants to wait in line, which is the very logic behind online shopping’s success. You don’t have to queue up when buying something off the internet.
However, if your client has to go through hoops just to complete a purchase, they might as well go to the shopping centre. With your customer’s convenience in mind, we addressed the factors that slow down the checkout flow, making sure your customers won’t have too much time to rethink their decisions.
Seventy-nine per cent of online buyers get excited over free shipping. It actually motivates them to make a purchase. Offering free shipping once they reach a certain amount inclines them to shop for more. Moreover, displaying delivery times on the shopping cart page, instead of putting it elsewhere, helps ensure your customers won’t have to leave the page to get the info. We want to eliminate as many as possible interruptions which can distract the consumer from completing the purchase.
Coupon Code
Butter and Tree have enjoyed a long-standing partnership -see more info on Tree's e-commerce platform via our Tree case study.
Over 90% of people use coupons when buying online. An easy-to-spot area for a coupon code field means the customers can see the discounted price quickly, persuading them to do a little more shopping. However, obscure ones will have them bolting out the shopping cart faster than a slab of butter can melt under the scorching summer heat.
Clear Call-to-Action
Butter partnered with % Arabica for the design and build of their e-commerce store on Craft Commerce. Check out our Arabica case study.
All CTA buttons must be straight to the point and clear to see, so customers can navigate their way to the checkout page with ease. We make sure that they can edit orders and number of items without a hitch.
Updated Total Price
By providing a discernible area for the updated total price, your customers can see how each product affects the shipping rate and overall purchase. Should they want to make adjustments, they can see it right then and there, instead of having to go back once they see the order summary.
It can be incredibly irksome to go through an eCommerce store and fancy a couple of items only to realise at the end that you can’t pay for them. Save your customers the frustration by showing the available payment providers on the Shopping Cart page.
The Checkout Process
Ecommerce retailers assume that shop design, imagery, and merch display are the most critical website elements and therefore, should be top priorities.
Well, not exactly.
The checkout process is the heart and soul of your online store, so it deserves just as much attention (even more) as you’re giving to aesthetics. Without a quick and seamless checkout flow, you can’t take your shop visitors all the way to the finishing post — and you very well want them to get there, right?
So, we did our homework and sought out to eliminate the possible obstacles, big or small, knowing that either of which can put a dent in your revenue.
Since we find a 7-step checkout process to be too cumbersome, we’ve decided to shorten it to 4 or 5 phases. For instance, we crafted a quicker and more efficient design for %Arabica, aiming to provide a satisfactory user experience for their customers. To shoot for a faster and more structured approach, Butter did a couple of tweaks to the normal process such as:
Putting together the Shipping Info and Method on the same page.
Apparently, once the users click the continue button and are faced with another set of boxes to fill up, they’ll just call it a day and move on. Last thing we want is to prematurely cut your buyer’s journey when they are halfway to committing to make a purchase.
Removing the preview order stage and replacing it with an accessible order summary
For customers to have a glance at before successfully completing their process.
Capturing the email from the beginning of the process
So you’ll still be able to grow your email list without seeming too pushy and despite the customer abandoning the cart. Most businesses force customers to sign up to get their email addresses. Unfortunately, it’s one of the shortcuts to drive the consumers to the abandonment expressway.
Brevity pays off, and your target customers deserve swift and hassle-free transactions. No one wants to get held up at the checkout counter by a fussy store clerk, right?
We also prioritise not only the desktop experience but also the mobile aspects. It’s a perfect way to target 79% of smartphone users who have used their phones to buy something digitally in 2020.
The Delivery Options & Addresses
Presenting various delivery options can sway people into a purchase. Simply because they feel that you’ve got everything covered -- from their actual needs to their potential needs.
For instance, letting your online shoppers know that pick-up service is available will be regarded as thoughtful and considerate. Your customers might not opt for it, but that doesn’t mean they wouldn’t be impressed.
Of course, not all e-commerce stores offer this service, so don’t feel compelled to put it up as an option if you don’t. Just that if you do, make sure you let your consumers know.
Butter also streamlines the checkout process by making sure your customers don’t have to input their addresses twice. Oftentimes, the billing address is where the items are likely to be delivered. So, it’s going to be the same as the shipping address.
Although, on some occasions, they vary. For instance, when sending a present to someone else, your customer will need to type in two different addresses - his or her address for billing, and the receiver’s for the shipping.
But as previously mentioned, it’s not that prevalent. After all, even if you’re buying presents for someone, it’s unlikely you want it shipped right to their doorstep.
By adding a simple checkbox for individuals using the same address for the billing and shipping, we eliminate a tedious part of the process for your customers. Once ticked, this checkbox can notify the system whether or not you only need to record one address for that transaction.
Apart from this, we ensure that relevant information is captured for your customers’ convenience. Additional options allow them to mark their address as the primary shipping or billing address. It’s a real timesaver that can make transactions run even smoother for future purchases
Fully-proofed forms lessen the likelihood of your consumers overlooking mandatory fields. As a result, they can reach the finish line more quickly, sealing the deal.
Redundancy is the enemy here. Butter aims to deliver a checkout flow that only solicits relevant personal data, those that are of absolute necessity. We also want to get rid of any possible distractions from your user’s way to make sure they get to the end of the checkout process.
The Payment
Now, we’ve reached the end of the line. But, wait -- don’t be too confident. Are there any more reasons for your customers to turn their backs from their carts?
Turns out the answer is YES.
The lack of payment options is a significant impediment in concluding your customers’ buying journey. Convenience is key here as people want to see multiple payment options. In fact, 40% of shoppers trust online shops with abundant payment options, and almost 60% will gladly up and leave if you don’t have their chosen method in place.
And, as we’ve said before -- being accommodating can make an impact on your customer’s desire to do business with you. If they don’t feel like their needs are being met, they’ll happily chuck away the time they took to pick out items from your shop. They won’t go out of their way to finish the transaction.
On the other hand, it’s not advised to go beyond what’s necessary as this proves to be short-lived and unsustainable. Target your customers’ preferred payment methods, and you’ll be fine. Credit cards, such as Visa®, Mastercard® and American Express®, are the most popular payment providers amongst Hong-Kong citizens (8). However, don’t discount the use of digital wallets because they seem to be on the rise and come a close second to credit cards.
Butter wants to make your customers feel important, and we thought of ways to make it come across on your payment page.
Mobile and desktop optimisation make for a high-level customer experience. Just because you’ve gotten them this far doesn’t mean it’s time to let your guard down.
We showcase various payment buttons on the payment tab. These clear call-to-actions are fuss-free and easy to navigate.
By streamlining User Experience, customers need not go back and forth just to check the summary or order preview. It’s going to be there -- right at the payment page for complete transparency.
The Takeaway
Your e-commerce platform should have a quick, efficient, and seamless checkout flow. You might not think it, but it gives you a competitive advantage as it’s instrumental in driving sales. It also leaves a good impression on your customers, which will have them coming back for more in the not-so-distant future.
Offer a diversion-free experience to the users by simplifying the process. But don’t make the mistake of skimping out on options. Customers appreciate having control over the whole approach, so make sure you arm them with plenty of alternatives to promote convenience.
Digital Butter has been part of Hong Kong’s E-commerce industry for more than a decade. We use our web design expertise to help local brands establish their e-commerce platforms -- be it from scratch, re-platforming or re-engineering online stores. Get in touch with us for consultations or enquiries
Digital Butter has been at the forefront of Digital Marketing in Hong Kong since 2009, completing over 400 successful projects. We're known in Hong Kong for boutique e-commerce. We specialise in the design & build of high-performing platforms & stores. We produce work that redefines category excellence and accelerates platform profitability.
We believe that you don’t get interesting solutions if you don’t ask interesting questions. Our philosophy has been developed over many years - We take needs, create problems, then solve them.
Other popular topics
23 Mar 2023 8 min read By Michael Ashton
Website Design and Development Cost in Hong Kong: The Ultimate Guide
