Modify BigCommerce Checkout To Boost Conversions By 30%September 5, 2015 in BigCommerce, Design, Ecommerce, Software
As many of you know, we run a few BigCommerce stores. Over the past couple of months we have been getting a lot of complaints from customers not being able to complete checkout. At first we just brushed it off believing it was operator error, or someone trying to checkout with Internet Explorer 7.
Still, after each one of these calls or chats it made my blood boil; there is nothing more frustrating than having an ecommerce store where someone is trying to give you money and you can’t take it! Even more frustrating, we couldn’t reproduce any errors. We tested and tested and everything seemed to work fine.
One one fine day in late July we got 3 calls / chats from customers that were trying to checkout and couldn’t. That was the straw that broke the camel’s back, so to speak. What followed was over a month of research, fixes, and tweaks to IceWraps.com. The end result was an increase to our conversion rate of over 30% and me enjoying an adult beverage of choice. That’s right, I said a 30% increase to conversions by just working on one page of our site!
Where Do I Start?
Based on the phone calls and chats we were getting, we knew there must be an issue(s) with the site, but we really didn’t know where to start. We had a pretty good looking template and everything seemed to work just fine for me. Below I’m including the obligatory “before” photo, so you can see what our site looked like at the start of this project. I’m sorry to say that I don’t have a “real” before photo of our site, because I never took a picture of our checkout page at the outset. However, the picture below is the same as our site looked with the exception of the logo, phone number, and footer links.
It was clear that if we were going to make improvements to the site, we were going to have to see things though our customer’s eyes. There are several tools on the market that allow you to see recorded videos, but we ended up going with Inspectlet.com. Based on our traffic, the plan was only $79.99 a month and it turned out to be the best money we’ve ever spent…
Within the first day I was able to see videos of people who were having issues checking out. It was simple stupid stuff, but it was obvious that the average person doesn’t read and doesn’t know how to use the Internet. It was honestly hard to watch because you could see people trying to give you money, but then just giving up out of frustration.
What Did Inspectlet Tell Us?
After letting Inspectlet do its thing for about 2 weeks I grabbed a bag of popcorn, some Excedrin, and prepared for the worst. I simply filtered by visitors who had been to our checkout page and proceeded to watch every single video. What I saw was simply amazing.
Before I get too far along, please take a look at the image below. I’m going to be talking about the areas with the red arrows and the header.
More than anything, I wish that I could share some Inspectlet videos with you, so you could see for yourself exactly what customers were struggling with. However, one downside to Inspectlet is that it generates videos on the fly, based on what your site currently looks like. So, if you look at any of our past videos today what you see are people typing into places, or clicking on things that don’t exist anymore. So, I will try to recreate what I saw in words.
The most common issue is that people simply don’t read. They have shiny object syndrome and are preprogrammed to try and get through a checkout process as quickly as possible. So, when they landed on our checkout page, they just got right to work by typing their email address in the email address field. The problem: this field is under the “I’m An Existing Customer” section of the checkout. BigCommerce’s standard layout is to divide the screen into left and right. Left being the path for new customers to follow and the right being the path for existing customers to login. Well, a large chunk of our visitors didn’t understand this.
Several people would type their email address on the right side of the screen and then click continue. Of course they didn’t enter a password, because they didn’t have one yet. This generated an ugly error message that most people didn’t understand. Again, without reading they would just click the link in the error message, which was to reset their password. Well, you can see where this is going. It’s pretty hard to reset your password if you don’t have an account yet! I saw over 20 people have this issue and drop off the site. This was from videos recorded in just 12-14 days.
Are you frustrated yet? So was I. Oh, but wait, there’s more… Pop another Excedrin and continue reading.
I wish this was the only problem I uncovered, but it was really just the beginning. For people who do read and clicked continue on the left side, they fell into a bunch of other traps.
The first issue was that “register an account” is the default on the left hand side. By having that checked and clicking continue you are then required to enter a password. People didn’t want to do that and would skip the password fields, even though they were marked with a little red asterisk (required). By not entering a password it would generate an error. Not a big deal you say? Well that might be true if BigCommerce’s error handling were better AND the Norton SSL badge didn’t conflict with it.
The next issue was people checking out with PayPal. This process is ever so graceful, with a big heaping side of sarcasm. When you check out with PayPal, it takes you off site – to Paypal. Once you get there, you fill out some stuff and then end up back on BigCommerce (IceWraps.com). At this point several people who checked out with PayPal thought they were done. This would explain calls from people day after the thought they placed an order. If they were able to figure out that they needed to click one more time at the end, they would get an error. Again, with broken error handling people didn’t know what they heck was wrong.
As it turns out, when someone checks out with PayPal on BigCommerce, all the necessary information is then automatically populated back on your BigCommerce site. Great! Well, that is all the necessary information except for the phone number. Not so Great! Again, without proper error handling people were clicking “complete my purchase” and not knowing why it wouldn’t go though. “All they had to do” was scroll up, edit their personal details under step 2, add their phone number, click continue, and then pay for their order. I have no idea why they couldn’t figure this out. <rolls eyes>
Another thing you could see people clearly frustrated with was the long list of countries BigCommerce displays by default. It looks something like this:
Another thing people would do quite a bit was to click on the little red 2, 3, 4, or 5, which is the label for each step. For a lot of people this looked clickable, but it’s not. Inspectlet shows a little red dot each time someone clicks. You could see someone going click, click, click, click, click, like a spaz on these areas. Nothing would happen. They would get frustrated and leave. #goodtimes. I pointed these areas out with a red arrow in an image above.
Finally, the menu at the top was a big distraction. People would get annoyed with the checkout and end up clicking some menu item at the top. If someone is on the checkout page you don’t want to let them escape!
OK, I See What’s Wrong Now. How Do I Fix It?
After watching all the Inspectlet videos, eating all my popcorn, and downing a half bottle of Excedrin I was armed with the knowledge of what was causing the most strife with my customers.
The first thing I did was rely on my good old friend Google to see what I could find about this subject. Surely several other people had discovered these problems, written about them, and discussed how to fix them? Not so much.
One thing I did uncover however was a company selling a one step checkout process out of India. It seemed like a steal at just $79.99, so I purchased it.
Here is what it looks like. Again, I didn’t take a screenshot of this in operation on our site (I wish I had), but here is generally what it looks like. The concept is amazing. AMAZING!!! Everything is on one screen and there aren’t any next, next, next, next buttons to click.
At first I couldn’t have been happier with this. I thought my problems were solved and I was gloating inside. I started testing everything and things seemed really great. I noticed a couple small errors that I alerted the company to and they took care of them within 48 hours. At that point I actually started writing this post and set out to collect some before and after data. One thing I noticed however was that though our desktop conversions were through the roof, our mobile and tablet conversions fell off the map. Hrmmmmm.
So I grabbed my iPad and started some extensive testing. After a few minutes I could see exactly what was wrong. The script that fires when someone types in their city, state, zip and allows the shipping info to show wasn’t working on my iPad. Rut Roh. So, I emailed the company that made the checkout again to alert them of the problem. I expected to hear back from them after a day or two just like with the other errors I found. However, after a week, still nothing. So, I reached out again to follow up. They told me that they couldn’t reproduce the problem. At that point I sent screenshots in explaining exactly what was wrong. Another week went by and I finally had to ask them to remove the script from the site – back to the original checkout I went.
Mike’s Checklist Of How To Fix BigCommerce’s Checkout
Since I wasn’t able to ultimately use the one page checkout script I found, it was back to the drawing board with BigCommerce’s default checkout. My goal was to fix all of the problems I mentioned above without reinventing the wheel. Here is what I did:
- Stripped the header out and replaced it with a barebones header. We included nothing but our logo, the Norton trust seal, yotpo reviews, and a way for people to contact us if they need help. If someone is on our checkout page and wants to call us, that’s a pretty good use of time!
- We ripped out all the styling on each of the steps to make it clear they are not clickable. We then labeled them as such – STEPS. This makes it much more clear for customers.
- We broke the left and right side of the screen up into boxes and shaded the area we wanted people to focus on – the left side. By having this area shaded in blue it causes people’s eyes to naturally focus here.
- We changed the label of the button on the right side to say “Sign In” vs “Continue”. People understand sign in and get that is if you have an account.
- We replaced the ugly default BigCommerce buttons, which come directly out of 2002, and replaced them with more modern ones. We also added roll over effects.
- We set the default to “Checkout as a guest” instead of register an account. Sure, I would rather people make an account, but I want them to buy from us more than I care about them making an account!
- We reduced the county list to he United States and Canada, since that is the only place we ship. No reason to show people French New Guinea if we don’t ship there! We set the default to the United States since 99% of our business is from there.
- We fixed the error handling so when a required field isn’t filled in a message comes up clearly telling you what the problem is.
The end results looks like this:
The day after making these changes our conversion rate shot up and the phone calls from upset customers who couldn’t checkout stopped!
Before You Go…
Finally, the last thing we did was add an exit intent popup for people on the cart or checkout page. Over 80% of visitors to ecommerce stores come there one time, look around, then leave. They never come back again. Let me say that again. THEY NEVER COME BACK AGAIN! Or, as Taylor Swift would say… We are never ever getting back together. Ever.
With this knowledge in hand, why wouldn’t you make a last ditched effort to get them to buy? Most people who leave are going to buy somewhere else because they are price sensitive. By offering this exit intent popup we cater to that group of people and try to get them to change their mind. Again, we only do this on the cart or checkout page. So, we are talking about people who got this far and changed their mind. They obviously want to buy – we try to nudge them over the edge.
It looks like this:
We had 4 people use this coupon the first day we installed the script. That is 4 customers who were 100% going to leave our site and never come back again. Now they are customers!
We went with an app in the BigCommerce app store called Justuno that is very easy to setup. We also use a popup with a lower discount for people who have visited at least 3 pages and stay on that page for at least 5 seconds.
The End Result?
After making all these changes our conversion rate has gone though the roof. As you can see by the image below, our conversion rate the day before writing this post was at 4.4%. That’s a full 30% higher than what our conversion rate was before these changes.
People spend so much time and money trying to get traffic. However, from time to time it’s important to spend time working on your conversion rate.
To put things in perspective, you might spend $1,000 to get 1,000 people to your site with PPC. With the conversion rate bump we’ve seen from this we are now getting about 10 more sales for every 1,000 visitors. With an average order size of $50, that is an additional $500 in revenue on the same traffic we have already been cultivating. That’s $500 in additional revenue without spending any more money to get it.
Thanks for reading about how to improve your BigCommerce checkout. If you enjoyed this post, please subscribe to our newsletter or contact us about our ecommerce consulting services.
Michael started his first business when he was 18 and is a serial entrepreneur. He got his start in the online world way back in 2004 as an affiliate marketer. From there he grew as an SEO expert and has transitioned into ecommerce, running several sites that bring in a total of 7-figures of revenue each year.