At Rocket Code, we live and breathe e-commerce. We create web and mobile experiences for our clients to help them sell more products to more customers every day. Often, this means we help our clients separate signal from noise, so they can focus on investing in their e-commerce properties in ways that improve customer experience (and thus increase sales), boost customer loyalty (and thus increase lifetime value), or enhance operational efficiency.
Introduction
This is the first part of a three-part Q&A series, where we will look at three high-value services that Rocket Code offers to e-commerce brands. We will interview experts from the business and technology teams to bring you the best insights from both worlds.
Main Goals for Improving Conversion Rates
In this article, Rocket Code’s content expert Ray Silvester talks with CEO Jonathan Bouma and lead engineer Andrew Mooney about four key components of an e-commerce site that should be examined to fully leverage a Conversion Rate Optimization (CRO) program.
Where Should Brands Start with CRO?
Ray Silvester: CRO is an exciting but confusing field. We all know there are a lot of opportunities with CRO, but making decisions about testing and improvement can be tough. Where should brands begin?
Jonathan Bouma: It’s easy to put the cart before the horse. To be honest, we’ve made that mistake before. The place to start is simply where e-commerce brands win or lose; for that reason, speed is vital. It’s important for two reasons: first, speed is the most overlooked aspect of user experience – everyone thinks user experience is about interfaces and interactions. But all that won’t matter if it’s not fast. Second, it allows us to find some quick wins, lets our engineering team dissect the work being done before we get involved, and gives us time to create a roadmap.
Andrew Mooney: Jonathan is right about speed, and sometimes quick wins can come from unexpected places. “I want hero images that take up 80 percent of the screen” may sound great, but it could negatively impact your site’s speed. When saving your images, just make sure to use the “save for web” option (or its equivalent) in your image editor; then, if you have the time, run them through tools like ImageOptim and ImageAlpha. We have reduced product page load times from eight seconds to just two by optimizing images. Making sure images are web-optimized – it sounds like something from the 19th century, but it’s still a big issue today.
Most of what affects site speed are small issues that are hard to verify quickly. There may be frameworks or tools lurking under the hood that were abandoned long ago but still load on the page, or they might be in use but misconfigured.
These slow objects remind us of buying a used sports car; it may look great in the showroom, but if you look under the hood and see a turbocharger installed but not connected to the engine, and gear shifts are tough when you push a little, you can start predicting where the problems will arise.
It’s tough to create a cohesive roadmap of what needs to be addressed and when. Fortunately, these issues can be easily identified once you know what types of things to look for. Where we’re headed, there are roadmaps
What
What does a roadmap mean?
Jonathan Poma: Absolutely. A roadmap should be used for documentation and prioritizing and working on opportunities. When it comes to prioritization, we try to evaluate each opportunity based on two criteria: effort and impact. Here, effort is simply a sum of developmental and operational efforts – what will it take to get this done? Impact is the potential business impact. And impact heavily relies on analytics. This is where we look and ask: “How many potential customers will see this change?” and “What kind of difference can we achieve?” The beautiful thing about e-commerce is that we can measure that difference as return on investment (ROI) and assess whether we believe the impact is worth the effort.
Andrew Mooney: From a developer’s perspective, the roadmap outlines the key steps of what we will work on and touch. After looking under the hood several times, it becomes clear what will work and what won’t work well. We’ve been burned in the past when a developer couldn’t see what was happening behind the scenes; they estimated some work and then we found that the page needed more cleanup and re-engineering than we expected.
Because of such cases, other improvement opportunities are sometimes pushed aside, as the return on investment seems too weak or the timing is wrong. If we could better estimate and pinpoint the scope of these changes, we’d see that we should prioritize the cleanup and improvement of other tasks before tackling the work that is causing the problems now. “Clean, improve, clean, improve” is kind of a “rinse and repeat” for the early timeframe, but it makes our lives easier and our future path clearer.
Which parts of your e-commerce store should you test?
Ray Silvester: That makes a lot of sense. But now that the dissection has been done, the speed has been optimized, and the roadmap has been built, what should be tested?
Andrew Mooney: I believe there are four main areas where e-commerce sites struggle, whether it’s a small store selling 10 shirts a day or a large store selling millions. These areas are: product pages, add-to-cart interactions, navigation, and homepage.
If I’m honest, the last two issues are obvious problems on the web. Also, while product pages apply more to e-commerce sites, value proposition pages on a marketing-oriented site can be viewed in the same way.
Jonathan Poma: I completely agree. All the elements Andrew mentioned are key components in the visitor’s buying journey. I would also like to mention the obvious; the further you go down the funnel, the closer you get to revenue. This often means you’ll want to test the checkout process. However, regarding Shopify, they have more and better data, which is constantly being optimized, than ever before. And there isn’t much we can do here… the checkout process in Shopify (or at least it used to be) is mostly locked down.
Then we’ll deal with the four things Andrew mentioned one by one.
The first is the product page. This is where you ask people to make their first real commitment by adding a product to their shopping cart. Three critical things here: trust, engagement, and payment assurance. Trust is crucial. People want to trust the site. Recommendations and reviews are great trust signals. Instagram photos and Facebook likes, etc., are great social proof. Engagement is the second thing. Make sure visitors know they can reach out to the brand if they have problems or questions. Payment assurance is the third thing. Shopify does beta testing for extended verification badges with their Plus clients. This is a fantastic infrastructure addition for any e-commerce site. Additionally, accepting multiple payment methods and having certifications from third parties (Version, Google Trusted Store, etc.) can help build trust. Testing what to display and how to display it can have a massive impact.
On
This way, learn how to build a customizable related products section for your customers.
Andrew Mooney: Content-related issues (too much or too little), product images and interactions with those images, and social proof are usually the biggest barriers to a focused product page with high conversion. These elements are not necessarily hard to engineer but rather difficult to convert into a focused, high-performance experience.
Jonathan Poma: Yes, exactly.
The second one is add-to-cart interactions. We have seen that AJAX side carts add tremendous value for many of our clients. However, all of them are clients whose average order value is much higher than the price of one of their products. When that happens, our hypothesis is validated; keeping the customer in the context of the shopping experience makes it easier for them to spend more money.
But sometimes that does not happen. For example, we have a client who sells gaming machine cabinets for thousands of dollars. It is very rare for a customer to want to buy more than one. So, we direct customers in that position straight to the dedicated shopping cart page with (as you might have guessed) plenty of trust signals around delivery, warranty, etc.
Andrew Mooney: Transitioning to your product page for add-to-cart interaction can also yield some good gains. How users choose items (size, color, quantity, etc.) is a significant barrier on some sites. It can quickly become overwhelming when the page has two dropdowns, size tiles, and fields for quantity. Simplifying the interaction, or even creating a better user flow, such as revealing options only when needed, can keep the clicks flowing to the “Add to Cart” button.
And speaking of the cart, while it is not an implicit part of the product page, it can be a significant part of the add-to-cart interaction. We have conducted tests that covered all types of carts: traditional cart pages, dropdowns, side carts, live carts for wholesale pages, etc. Ultimately, you should look at the type of experience your users expect when viewing their cart, and how long it takes them to get to checkout.
We found that a large percentage of our clients’ users tend to use some form of a side cart, compared to a traditional cart page or dropdown. Testing multiple types of carts can get really complicated, so this is where our cleaning and optimization cycle really helps. Assuming you managed to clean things up and make them as lean as possible, you could do something like this:
$(\’form#product-add-to-cart\’).on(\’submit\’, function(){
// Do any internet magic you need to add items to the shopping cart // …
// Then run your tests:
if (TESTS.sidecart){
openSideCart();
}else{
// Fallback to your legacy cart interaction
}
});
Now, this heavily depends on the store and the details of the user interaction with the site (for example, this could be tied to a click on the website or a press on the mobile web app), but you get the idea. If you implement something like this before cleaning up your site, the code will be messier than the above, as you might be trying to override existing functionality.
Using a tool like Optimizely can help by ensuring the tests are executed in the way you expect, as well as allowing you to visualize your results. (Full disclosure: Rocket Code is a one-star Optimizely partner). We typically like to build the experiment code alongside the original/native code. This way, the pages carry almost a similar amount of data but with swapped heads and enabled/disabled functions, through specific CSS classes for testing, and any JavaScript variables we may create for testing (like TESTS.sidecart you see above). At the end of the day, you want to keep your tests as clean as the original code (if not cleaner) and reuse as much as possible.
Jonathan
Puma: The third is navigation. Navigation is critical. Frankly, many sites do not do this well, whether on desktop or mobile. There are some basics/best practices here, like ensuring there are hover states and active states, and optimizing interactions for click/hover (on desktop) and touch (on mobile) – but that only improves engagement. Building user-friendly and usable navigation requires expertise and hard work. In a word, it’s a nebulous task – and often one performed by people not well-qualified to do so.
Andrew Munee: And that just creates a baseline for testing. Navigation, I feel, is a two-sided problem: an information architecture (IA) issue and an engineering issue, and a failure in one will quickly lead to a failure in the other. It’s easy to design navigation that ends up ruining your IA by not exposing enough information. On the other hand, it’s also easy to add too many links and information into navigation that makes it overwhelming for engineering.
Over-interaction will push users away, but minimal interaction will draw them in. Too much information will overwhelm the user, and they won’t find what they’re looking for on the first try, but too little information will leave them feeling lost. Once you get the right balance, you can start experimenting with adding small conversion points in your navigation without turning all your users upside down.
This looks at quantitative testing, as opposed to qualitative testing. Quantitative testing helps you understand why users are interacting the way they do, while qualitative testing is about how they interact, in many cases. But talking about qualitative testing can lead us down a deep rabbit hole, so I’ll just say that in highly touchable sections of the page, you should use both quantitative and qualitative means together to get the optimal result.
Jonathan Puma: Fourth is the homepage. Please note that the homepage is the last item on this list. It is right at the top of the funnel, and thus, farthest from the ultimate revenue. However, we see repeatedly that the products featured on the homepage are closely related to the products that are frequently purchased. It’s not hard to say that this relationship is why the relationship exists. The homepage is like the front display in a retail store – it’s where brands place their best products and the products they really want to move. We have found, perhaps even more on the homepage than anywhere else (although it applies almost anywhere in the shopping experience), that simplicity wins, and more choices do not always mean better.
Andrew Munee: And again, simplicity can gain you those speed wins, meaning less time to access a page containing conversion elements, which is not always just the product page. How should you test?
Ray Silvester: Well, great. We’ve got what to do. Now, what about how to do it?
Andrew Munee: I think one of the biggest things that people miss when testing is defining goals. Goals can be classified as either near (short-term) or far (long-term). Your long-term goals will likely be something in the range of “increase in-store conversions by X percent, annually” or “raise cart additions by X percent, monthly.”
These are very important to have, but they are hard to achieve with just a few tests. You should rely on near-term goals to achieve long-term goals; improving cart additions little by little will quickly reach the long-term goal, while giving you the flexibility to try many different changes to get the best outcome in less time. The compound benefit of small changes keeps the activity up and increases profits at the same time.
For
For an e-commerce site, short-term goals are often closely linked to your interface. The add-to-cart button needs an increase in clicks, or your quick view modals need a boost in conversion rates. You are testing your interactions and individual interface elements for their effectiveness, rather than looking at the big picture and only seeing minor increases. Increasing individual interactions empowers you to iterate more features quickly, knowing that the overall increase will bring you closer to your long-term goal, and in some cases, it will do so faster than you expect.
Jonathan Puma: The only way I can think of to add to what Andrew said is to talk about what not to do. In e-commerce, everything revolves around revenue. For this reason, it’s easy to fall into the trap where revenue is paramount, and nothing else matters. The problem with this thinking is that if you change things early in the user flow, there are variables outside of your control that can undermine how effectively you track the improvements you’re trying to make.
(I’ll admit to you, I still take revenue into account in every experiment. I won’t throw it out the window, but sometimes it may not be the only thing we hope to see clearly, or you might wait forever.)
It’s important to remember that we’re trying to achieve significance – honestly and as quickly as possible. So, if you’re testing a new hover interaction on a collection page, you should definitely monitor revenue. But you shouldn’t expect to achieve significance from that. Instead, you might look for significance in the number of views of the product detail pages. Or in add-to-cart actions from collection pages. Or on collection pages viewed per visit. Do you see where I’m going with this?
The key point is to set multiple goals but make sure that the goals you set are meaningful.
Andrew Muni: Choosing monitoring goals can be a contentious topic, as most people want to track revenue, but revenue increases are not always definitive at the top of the funnel.
If you’re worried about revenue at the top of the funnel, you should ensure that you have a strong funnel, not a sieve that leaks later on. Monitoring goals (or as they are now called in Google Analytics 4, events) is quite straightforward in Optimizely and Google Analytics (GA). The hardest part of goal tracking is selecting the type of goal, whether it be revenue, clicks, conversions, views, or something else. Once you determine that, both Optimizely and GA have very similar flows for setting up goals, requiring you to add a similar code snippet to the example below:
$(\’.add-to-cart\’).on(\’click\’, function(){
// Any actions you may need for adding to your shopping cart
// …
// Track the event you’ve linked to the goal in Optimizely
window.optimizely.push([\”trackEvent\”, \”addedToCart\”]);
// Track your event in GA
ga(\’send\’, \’event\’, \”Store\”, \”addedToCart\”);
});
All you’re doing here is informing Optimizely and Google that during the click event, someone must have also triggered your event on the relevant platforms. Once you handle several experiments, you may begin to see that you were tracking some goals across multiple experiments; these are the ones you’d want to start leveraging in your toolkit for secondary goals and monitoring. We lean heavily towards monitoring goals to ensure that our KPI isn’t distorted by something we don’t have control over within the funnel.
On
For example, tracking that someone has reached the checkout can be highly valuable if you have experiences that are going well across all categories but revenue. It may be a shorter conversion time in a month or a suitable time for your business, or you may have products that have a wide price range that affects purchasing behavior and final payment methods. At the end of the day, you just need to work with small changes and continuous iteration to ensure you are delivering the best possible in-store experience to your customers without rocking the boat too much.
How do you work with CRO? Let us know in the comments section below.
You might also like: 5 simple tricks for optimizing mobile e-commerce design
Leave a Reply