When I started blogging and later ventured into internet marketing, things were a lot different than they are today. During 2009 and 2010, 93% of my traffic came from Windows and Mac. Only 1% traffic came from iOS and Android. This meant, I largely ignored how mobile users viewed my sites and only focused on desktop.
Over the past 10 years, I’ve seen mobile traffic go from under 10% to over 90%, and that brought quite a lot of challenges for me. While mobile has certainly increased the potential audience by manyfold, the responsibility now lies on the website founders to serve content in a way that works perfectly across the large variety of screen sizes, OS, browsers etc.
For content websites, the estate for ads just squeezed into nothing. We couldn’t serve the same quantity of ads anymore. But I’m not gonna talk more about that right now.
For e-commerce which we only ventured into in 2016, mobile had already taken over by the time we started it, bringing its challenges with it.
Early in our cycle, we identified what we believed was a winning product and we created a large set of ad sets which we also believed would give us a winning campaign. Despite that, we had a low conversion rate and while we made sales, we struggled to make a profit.
We were sure the product would work, we had data to believe in it. We saw others grilling and scaling it. As for ad campaigns, we had spent enough on Facebook before (outside of e-commerce) to be sure that what we were doing with ads was also not a problem. Which brought us to our final conclusion, that it was the landing page that was the problem.
Often I see, people working really hard but focusing on the wrong things or fixing what isn’t broken. I bring this up, because a lot of people just change their products or ad strategies without thinking about other possibilities.
Landing Page Struggles & Heatmaps
Back to our problem; we couldn’t think that our landing page could be problematic because our store was powered by Shopify. We expected the store and theme to be optimized to work in a perfect manner. But mobile can be tricky and so we introduced heat-maps and video recordings to see exactly how users interacted with our landing pages.
We used a tool named Hotjar, but you could use anyone you like.
I’m not going to go into details of the wide range of things you can do with heatmaps, but personally I focused on scroll heatmaps the most. While it’s a natural behavior for the loss of audience from top to bottom, if the colors change abruptly or sharply, it means a significant number of users left the page there. This can mean, among other things, that user is either not interested in content below that point, or is unaware that the page has more content to offer.
This can be solved by either removing an element at the point of abrupt exit, or introducing new elements that convey to the user that there’s more content available below. After making certain changes, I saw the conversion go up, but not enough to be excited about it.
The next logical step for me was to watch thousands of video recordings of users interacting with our store. And so I did that.
The reason why I started this blog post with emphasis on mobile was because after watching hundreds of videos, I saw how different the user interaction was for different devices having different screen res, OS, browsers, in-app browsers (such as site loading inside Facebook) and how many changes were needed for everything to be in harmony across the board.
Conclusion & Further Reading
After making those changes to the theme and landing page, we were able to bump our conversion by 120% and so the secret ‘hot sauce’ of e-com, at least for me, is the heatmap and landing page optimization.