I sat next to a pretty girl on the bus today. I was hoping she’d notice me, but she seemed more interested in the Facebook app on her phone. I miss the days when computers only came in one size – desktop.
As she scrolled through her feed, she came upon an ad for a holiday discount on winter jackets. On clicking she was taken to the store’s category page. I didn’t mean to pry but the eCommerce nerd in me got interested and I wanted to see what the shopping experience would be like.
The category page itself wasn’t perfect. It was responsive, but not 100% so, which meant there was a little bit of side-scrolling involved. When she clicked through to a product page the same thing happened.
I get irritated by little usability issues like this, but she didn’t seem perturbed. After looking at a few more products, she settled on one and clicked the ‘Add to Cart’ button. This was it! My eyes lit up as I was just about to witness a live eCommerce conversion.
The ‘Add to Cart’ page was terrible. It was like the eCommerce platform that this store was running on had just given up on pretending to be responsive. Our valiant heroine struggled briefly with this page, but she eventually found the ‘Continue to Checkout’ button.
And that’s when the horror began. The checkout page was the digital equivalency of anarchy. The entire desktop view tried to render itself within the limited dimensions of the mobile screen. Form fields were warring with each other, vying to be the first to get filled out.
This was too much even for our heroine. She visibly flinched and shut the app. Another customer abandons her cart, another checkout funnel leaks sales, and another eCommerce owner wonders why people aren’t buying.
The Curse Of The Mobile Device
First we had laptops, then netbooks. Next came smartphones and tablets. Now we have phablets and almost phablets. Screen dimensions go up and down and up again.
It’s foolish to assume that all your visitors and customers only use desktops. They use devices of all sizes and you can be sure that your store is breaking down on some of them if it’s not truly responsive.
We’re tracking visitors from 31 different screen sizes on our site, and that’s for mobile phones alone! Then, there’s different versions of devices and operating systems.
So, which devices are causing you to lose sales and how do you fix it? Well, to find that out we need to start tracking. In this post we’ll set up a custom report in Google Analytics that will show us exactly which devices are not converting.
Step 1: Create The Report
Creating a report in Google Analytics looks harder than it actually is. If you’ve never created one before, don’t worry. We’ve already set up the report for you. Just click the button to download it so that you can run it in your own Google Analytics account.
After you’ve added the report to your Custom Google Analytics reports you can make your own edits to it. Here’s how we’ve set it up.
As you can see, we’ve set up three tabs in the report – Screen Dimensions, Mobile Device and Operating System. The metrics tracked for each group are the same – Sessions, Bounce Rate, Pages/Session, Goal Conversion Rate and Goal Value.
The only thing that changes for each report are the dimension drilldowns. For Operating Systems, as seen in the screen shot above, we have two levels – Operating System and Operating System Version.
For Screen Dimensions we have three levels – Device Category, Screen Resolution and Mobile Device Info. For the Mobile Device tab we only have Mobile Device Info.
You can add more tabs and drilldowns as you see fit, but these are good enough to get an idea about how each device, screen or operating system is converting.
Step 2: Find The Leak
Once the report is set up, you can start seeing results immediately. Your tabs will show up above the graph, and below it you’ll see the metrics for each tab. Let’s start with the Screen Dimensions.
Screen Dimensions
To start with, we have our metrics broken down by device type – desktop, mobile and tablet.
As you can see, our desktop and tablet conversion rates are pretty good, but mobile conversion rates are poor. What you need to look out for in your report is the anomaly. If mobile rates were between 6-8% as well, we’d have nothing to worry about. However, at below 2%, it stands out compared to the other two. Let’s investigate further by drilling down.
I’m only showing you the top 5 screen resolutions in terms of sessions. The rest are all in the single digits, and won’t matter too much. The interesting thing to note is that at least half of all sessions, from the 2nd, 3rd and 5th resolution, aren’t converting at all!
On drilling down even further, it looks like this is purely from Android devices like LG and Samsung, while the iPhone seems to be converting just fine. It’s probably a device issue and not a screen resolution issue, which brings us to the next tab.
Mobile Devices
Let’s head on over to the mobile devices tab to get another view of what’s happening. The screen dimensions tab gives us a break down by screen resolution, but the mobile devices tab shows all the screen resolutions for the same device.
Again, I’m showing only the top 5 here, but it looks like all the conversions are coming only from the iPhone and iPad, and one from any of the other devices. From this report, it seems to me that it’s probably an iOS versus Android thing.
Operating System
That brings us to the final tab. This one splits the traffic and conversions across operating systems, both mobile and desktop.
As I suspected, iOS is converting at a fairly respectable 5.7% but Android is giving us absolutely nothing. To confirm this, we can see that the bounce rate is significantly higher, and the pages per session are lower.
Now the numbers might seem small to you but this is taken over a very short period of time. If we look at the traffic over a few months, that’s thousands or tens of thousands of visitors from Android devices. If we bump up the eCommerce conversion rate from 0% to 2% that’s a few thousand extra customers. Not bad right? Let’s see how we can do it.
Step 3: Fix The Leak
With just one custom report, we’ve found a problem we didn’t even know existed. In fact, it turns out to be a pretty serious problem with a solution that could make us a lot more money.
Obviously something happens to the eCommerce site on Android devices that makes customers drop out. The best way to find out what’s going on is to go through the user experience ourselves. Get an Android device and see what happens as you browse around or try to purchase something.
Another way to test it is to use a device simulator. You can find a number of free ones online, like MobileTest.me, that simulate devices of all shapes, sizes, models and operating systems.
Typically, for problems that affect specific screen sizes or mobile operating systems, it’s likely to be an issue with the responsiveness of the site. For an eCommerce store that isn’t 100% responsive, there are certain devices that it will break down on and look pretty ugly. The solution? Make your store fully responsive!
Conclusion
The pretty girl on the bus isn’t the only one leaving your store because of poor rendering. You can’t continue to ignore them because your store looks good on the desktop. eCommerce is fast moving towards mobile consumerism, so if you don’t keep up, you’ll get left behind.
Download the report, add it to your Google Analytics, and see what’s happening on your site. Then, come back here and report your findings.
If you find that certain devices are affecting your conversion rates, it’s time to redesign your store to make it responsive. Better yet, switch to an eCommerce platform that is truly responsive so that you don’t have to worry about any of this.
