How to Streamline Ecommerce Checkout as a Means of Generating Revenue
On your ecommerce site, the checkout process is the last mile for your customers to finalize their purchase. You may have created fantastic marketing campaigns and product pages, but if shoppers have issues during checkout, they will abandon the cart. As a result, ecommerce checkout optimization is a top priority for most retailers. This is especially true with mobile checkout, as mobile shopping is expected to grow to 54% of all ecommerce sales by 2021.
In this episode of Recommerce, Sara sits down with Tim Halbach, a Tech Lead at Command C, and talks about how to generate more revenue by improving your checkout process. You’ll learn:
- The three guiding principles of ecommerce checkout
- How upselling and cross-selling relate to the checkout process
- The most common obstacles that turn customers away
- The different layers of checkout testing
- Guidelines for structuring your checkout process on mobile, as well as with a mini cart
Full Episode Transcript
Sara:
Welcome to another episode of Recommerce. Today, I am here with Tim, a Tech Lead at Command C. I’m Sara, the founder of Command C.
Today, we’re going to be talking about optimizing checkout. Now, I know we’ve all read a million articles about optimizing checkout, so today our focus is going to be slightly more specific and we’re going to dissect the ins-and-outs of optimizing for mobile checkout, as well as the mini cart, or the fly-out cart.
Sara:
So, with that, welcome Tim, glad to have you here.
Tim:
Hi, Sara. It’s great to be here today. It’s a good thing that you’re talking about mobile because we’ve seen mobile checkouts increase by 20 to 30% over the past year, so it’s very important that ecommerce retailers begin focusing even more of their attention on mobile checkout.
We’ve seen mobile checkouts increase by 20 to 30% over the past year.
Sara:
That is a massive number for one year.
Tim:
That is a huge increase, and that’s why it is really important for that mobile focus.
Sara:
Yeah, I think it’s not only a huge increase, but it’s such an indicator that mobile shopping is not going away. We always can encounter a bit of resistance when it comes to doing one more thing, but this is a really important thing.
What about the mini cart?
Tim:
The mini cart is a great feature for ecommerce retailers to use to help their customers through the checkout process, but so many merchants are beginning to use the mini cart incorrectly and putting too much focus on the mini cart, taking away from the traditional cart, and therefore becoming distracting.
Sara:
Well, I cannot wait to dig into these topics. Before we do, I want to set some high-level strategic guiding principles that apply when it comes to optimizing any facet of checkout – be it the two angles that we’re going to discuss today or desktop.
Those guiding principles are to minimize distractions, to minimize obstacles, and “test, test, test,” as we put it here at Command C.
Let’s talk about a few examples of each of those guiding categories of mistakes that we often see.
The 3 guiding principles of checkout are 1) minimize distractions 2) minimize obstacles and 3) test, test, test.
Tim:
Sure. When it comes to distractions, once a customer has decided that they want to click that button into your checkout process, you want to do as little as you can to distract them from that process and encourage as much as possible to move all the way through.
One of the things that I very strongly recommend is to remove any distractions, such as the header and footer should be very simple to keep the users focused on those checkout steps.
Sara:
Yeah, it’s so interesting because this is such a thing with Shopify, right? Once you pass the cart, the header and the footer look really different.
Tim:
They do.
Sara:
For years, there’s been a common request for more customization there. Not to go off on a Shopify tangent, but two of the most common requests that we get with Shopify are 1) to add more customization to the checkout process 2) and one-page checkout.
We’ve always said that Shopify has its reasons for doing it this way. It’s just such a testament to this point of, even if it breaks continuity with the rest of the site, minimizing distractions once someone has hit checkout takes precedence.
The other thing I think is important to clarify, as we embark on this discussion, is the difference between cart and checkout. Because I feel like a lot of merchants often lump the cart in with the checkout experience, and maybe that’s a blurry line. I think some different rules apply to the cart experience itself than once a user hits checkout.
It’s important to clarify the difference between the online cart and checkout in your site strategy.
Tim:
Absolutely. In my mind, when somebody is sitting in their cart, they’re still evaluating whether they are wanting to make that purchase.
Sara:
Mm-hmm (affirmative).
Tim:
They might still be looking at products, they might be evaluating pricing, they might be looking to see what tax or shipping fees might come to in the end, and they’re still in that decision-making process.
Once they hit that checkout button, they’ve made that decision they want to purchase from your site.
Sara:
Mm-hmm (affirmative).
Tim:
So, you really need to encourage them to go through that process from that point.
Sara:
Yeah. In terms of minimizing distractions, I know that’s something we talk about a lot internally here is upsell, right?
Tim:
Mm-hmm (affirmative).
Sara:
Where is upsell appropriate, where is upsell not recommended, that sort of thing?
Tim:
Absolutely. When a customer is still making a decision, that’s when upsells are very much appropriate. So, on the product pages, in the cart, those are excellent places for upsells or cross-sells.
Once somebody, again, has made that purchase decision, you really don’t want to be offering any additional distractions. Those upsells or cross-sells really become a distraction at that point.
Sara:
I think another common distraction is merchants trying to add a little too much information to the cart, or even the checkout process.
Obviously, you want to be clear with your users and make sure that they’re making an informed purchase and they have all the information they need, but I’m often finding myself asking, is this something that would be better for an FAQs page, rather than language that has to be in the checkout or the cart?
Tim:
Right. Things like shipping policy, return policy, those elements would be excellent for an FAQs page, but you really don’t need to present them there during that process.
Sara:
Yeah. So, in terms of minimizing obstacles, which we see as different from minimizing distractions, what are some common obstacles that you see being implemented in the checkout or cart experience?
Tim:
So, I see an obstacle as anything that actually prevents the user from moving through their checkout.
Sara:
Mm-hmm (affirmative).
An obstacle is anything that actually prevents the user from moving through their checkout.
Tim:
Some of those obstacles would be if you’re asking for too much information that’s required, or if you’re not giving them enough feedback that this is the information that you’re expecting. Possibly even if you’re not giving them a reason why you need an additional piece of information that they’re not used to giving.
Sara:
I also think a super common one is forcing users to register for your site.
Tim:
Absolutely. Guest checkouts are around for a reason, and that’s to reduce the obstacles for people moving through the checkout process. If somebody has to register for your site, they may really only intend on making a single purchase from your site, so forcing them to create a user name and password is just an extra step that’s not necessary.
Sara:
There’s the point of I might be a one time customer, but there’s also just the apprehension around having another user name and password, right?
Tim:
Absolutely.
Sara:
I experience that all the time.
Tim:
Yeah, so many user names and passwords these days.
Sara:
Oh, man. Last Pass!
All right, let’s address testing, because I know testing is a huge word. When we say, “testing is a guiding principle,” I want to break down for our listeners specifically what we mean by testing in this context.
Tim:
There’s several different layers of testing. One layer is just making sure that the checkout process works.
Sara:
Mm-hmm (affirmative).
Tim:
Just going through it on all devices and making sure that you’re able to complete the checkout process without any problems. Another element of testing is making sure that any non-standard changes that you’ve put in makes sense to your users. So, having somebody look at it and tell you, yeah, that makes sense.
Sara:
Mm-hmm (affirmative). Somebody other than yourself, right?
Tim:
Other than yourself, yes, absolutely.
Tim:
The third method would be, once you’ve implemented these changes, you want to make sure that they’re having a positive impact on conversions.
Sara:
Mm-hmm (affirmative).
Tim:
Certainly, every ecommerce store is different, every business is different, so some of the recommendations that make sense for many stores may not make sense for another. Validating any of those changes with actual metrics after implementation.
Sara:
Yeah, I think an important thing to consider is the timeline for collecting those metrics, which is always somewhat contextual.
If you implement a change, and just gather the metrics next week, it may not give you enough data to confirm whether or not it’s been an effective change. Then again, I think it depends on … I know it depends on the type of change you’re implementing and how much traffic you have.
The more traffic you have, oftentimes the shorter time span required for evaluating the impact of a change that you’re going to make. That’s why testing can be so challenging with lower traffic sites because it takes a really long time to accumulate meaningful data.
Tim:
Absolutely. It’s also important to ensure that you aren’t confounding your testing with, say, a promotion that’s going on, or a specific time of year that sales may be increased or non-typical.
Make sure you run checkout tests during a typical time – not during sales events, for example.
Sara:
Right. Then, depending on the kind of merchant you are, again, testing goes as far as things like usability testing, or A/B testing if you have enough traffic, heat map testing, those sorts of things.
Our point really with testing is: do it. Determine what forms make sense for your business, but at a minimum, ensure that someone other than the person who is closest to the site, or the people who are closest to the site … In other words, people who have an objective experience of the site are taking the time to browse, not only for functionality and seamlessness, but also contextually. Does it all make sense?
Tim:
Yeah, absolutely.
Interlude:
You’re listening to Recommerce, a podcast for ecommerce wearable brands navigating technical complexity and change, brought to you by Command C, a development team that saves ecommerce retailers from outdated tech and ineffective operations. We have a strong focus on Magento and Shopify Plus. You can learn more about how we help at commandc.com.
Sara:
All right, now that we’ve set the groundwork for the high-level strategic guiding principles of cart and checkout optimization, let’s dig into the nitty-gritty of mobile checkout. When a merchant comes to us saying that their site is not converting on mobile, where do we start?
Tim:
Well, the first thing. I’m actually amazed at the number of ecommerce retailers that haven’t properly tested their site on mobile. There’s just a glaring issue that would be obviously caught if somebody were to go through on mobile and perform a checkout.
Sara:
Just out of curiosity, do you think that’s actually because it hasn’t been tested or because the wrong people are testing it?
Tim:
It could be either, it could be either.
Either somebody who isn’t familiar with the technologies, or the process, or it’s also possible that they just haven’t considered the amount of mobile checkout that’s been increasing.
Sara:
Yeah, makes sense. I guess, what I was getting at there is, I see people really close to the site being the testers of the site often. Not to harp on something that we were already talking about last segment, but it’s a really important principle.
You have to find objective people to test your checkout process. Think: Hallway Usability Test.
Being on the inside of a business, you just can’t separate yourself and your perspective from the experience of someone who is not on the inside of the business. I think that’s just a really important point to drive home, is making sure you have the right kinds of folks testing your site.
Tim:
Yeah. One of my favorite testing techniques is called “hallway usability testing.”
Sara:
Yes.
Tim:
That’s just going down the hall and asking three people that are completely unrelated to the site to just take a look at it, walk through it, and see how it works.
Sara:
You know, time and time again, that approach is more fruitful than more complex approaches like A/B testing. That is just such a tried and true way to test something.
Tim:
Another thing we often see, particularly when it comes to mobile, is that there isn’t actually a mobile-optimized checkout. When somebody goes to checkout on their mobile device, they’re going through the desktop checkout process.
Sara:
Mm-hmm (affirmative).
Tim:
That checkout makes it very difficult for somebody to tap on the form fields or navigate through the process. When we’re talking about obstacles, that is a very large obstacle at checkout.
Sara:
When you say that they’re going through the desktop checkout, do you literally mean that the site is not responsive or that the checkout hasn’t been reimagined or reorganized for a mobile device?
There are a lot of checkout features on mobile that are just beginning to exist on desktop, such as auto-fill.
Tim:
Both, actually. If it’s not responsive, then that is a huge issue, right? There’s also different elements that you can use to make the mobile checkout better on mobile devices. There are a lot of features of mobile devices that you can use that don’t exist on desktop or are just beginning to exist on desktop.
Sara:
Like what?
Tim:
Such as auto-filling the form fields. Your mobile device knows a lot about you. It knows your name, address, and can prefill that information as long as the forms have the hints that the mobile browsers need in order to put those fields in the right place.
Sara:
Merchants have to be intentional about that. Well, I guess developers have to be intentional about that, but merchants need to be armed with that awareness when they’re working with their development team to ensure that those tools are being put into place.
Tim:
Absolutely. A good example of that is an email address field. It looks exactly like a text field, it looks exactly like a name field, but when you’re entering an email address you need a special set of characters. You need the @ sign, you need the period, you need those characters readily available for you. Making sure that the mobile device presents the correct keyboard to the user is important.
Sara:
As a user of mobile checkout, one of my pet peeves is when form fields are too small, or buttons are too small, or they’re just too close together, and there’s not enough white space between them. This feels like a really big barrier to me.
Tim:
Yeah. A lot of designers don’t take into account the size of somebody’s finger when putting in a design.
Sara:
Mm-hmm (affirmative).
A lot of designers don’t take into account the size of somebody’s finger when creating mobile design.
Tim:
You need space to be able to touch on a form field and put your information in.
Sara:
What about mobile payment methods? How critical are those at this juncture in time? What’s your perspective on them?
Tim:
Mobile payment is such a time saver for so many people. Often times, when you’re using your mobile device, you don’t have your credit card readily available, you don’t have your information there in front of you.
Sara:
Or you just don’t want to take it out in the middle of the subway for example, right?
Tim:
Exactly. Enabling mobile checkout really can streamline that process. Some retailers have even seen their mobile checkout conversions increase by 200% or more by just enabling mobile payment methods.
Some retailers have even seen their mobile checkout conversions increase by 200% or more by just enabling mobile payment methods.
Sara:
Wow. All right, let’s shift our focus to talking about the mini cart. I see a lot of missteps when it comes to the use of the mini cart. I think, maybe a good place to start with this would be to talk about the history of the mini cart, and where it originated from.
Tim:
Absolutely. If you think back to the early days of ecommerce, when a customer added their product to their cart, they were taken to the full cart. Then the mini cart came around, which provided people feedback that the item had been added to cart without making them navigate away from their current browsing experience.
Sara:
Mm-hmm (affirmative).
Tim:
That was a huge improvement for user experience during that checkout process.
For example, if somebody wants to buy multiple products, there’s no reason to take them away from the purchasing process in order to confirm that an item was added to their cart.
Sara:
Yeah. Now where do we find ourselves?
Tim:
Well, I’ve seen many, many retailers overusing the mini cart, and really using it as a cart replacement.
Sara:
Mm-hmm (affirmative).
Tim:
Just putting too much information in the cart, making it so that you’re overwhelming the customer with information when they add one single item to their cart.
Sara:
Yeah, and that goes back to the principle of avoiding distractions, right? I think the most important take away there is just remembering the goal of the mini cart and that’s twofold. 1) It is to give feedback that this item has been added to your cart, and 2) to provide the information associated with not only that item, but perhaps other items that you may have in your cart.
I know I always really like to check my mini cart and just see what my total is for all of the products that I’m looking to purchase. Then, to also create a shortcut, but only a shortcut to adjusting my purchase selection, right?
The mini cart gives people notice that their item has been added to cart without making them navigate away from their current browsing experience.
Tim:
Yeah, on the mini cart you don’t want to see things like upsells or cross-sells, necessarily. It’s just taking the information too far. You see the item that you just added to your cart, guiding you either forward to checking out, or over to browsing additional items, not necessarily hijacking your thought process, sending you a different direction on the site.
Sara:
I do think that there’s an argument to be made for certain kinds of upsells. If there’s an upsell that’s associated with that particular product that is in the mini cart, or if there’s a product bundling option. In my mind, the line of thought is we don’t want to distract, right?
We don’t necessarily want to send them to a whole new product category, but if there’s a chance for a quick upsell without distracting, then my thought is there might be some room for that.
Tim:
Yeah, absolutely. Things like service plans, or additional components that might be required to improve the experience, those are things that are very much beneficial to have in that mini cart. Other elements, completely different categories like you mentioned, then it becomes too distracting.
Sara:
Another facet of the mini cart that I think is so important is that quick tool tip when the mini cart is closed that shows the user how many items they have in their cart. I’ve been on sites that don’t have that, and I feel very abandoned. I feel like, hey, I just added this thing to my cart and now it’s not there. That’s how I interpret not seeing that little number tool tip.
Tim:
Yeah. That’s especially overlooked on mobile. On desktop, when you have more real estate, it’s very easy to put cart parenthesis and the number, but on mobile when you just have an icon for your cart, it’s also still very important to have that context so that people know, yes, I have so many items in my cart. No, my cart hasn’t been lost, it’s there. Just for that reinforcement.
Sara:
Which brings up a good point. What about mini cart on mobile?
Tim:
Mini cart on mobile. There’s so little real estate on mobile that really mini cart just should have feedback on the item that you just purchased, and perhaps the total number of items in your total purchase.
Sara:
Mm-hmm (affirmative).
Tim:
Then guide people to the full cart when they are ready to go there.
Sara:
Yeah. I think user experience with the mini cart on mobile is so key, also. What I’ve seen to be more effective is a mini cart that opens, on mobile specifically, opens and takes over the full screen, but there’s a very clear close button or there’s some level of transparency, so you’re not losing the context of where you actually are on the site.
I think it’s important to remember that when you have a mini cart that takes over the full screen on desktop that typically you’re losing the point of the mini cart, which is to maintain the context of where the user is.
You’re constantly having to weigh pros and cons with mobile, and a true mini cart, it can just be too small unless you’re actually using the width of the device you’re on.
Tim:
In a way, if you’re presenting the entire cart, you’re taking a step back in the days of ecommerce to where we before, pushing people all the way to the full cart when they add an item.
Sara:
Right.
Tim:
Mm-hmm (affirmative).
Sara:
All right, well this was fruitful. It was great chatting with you today, Tim. Thanks so much.
Tim:
It’s been great. Thank you.