How you can increase your eCommerce website’s conversion rate non-stop

In this article, Denis Studennikov, the Head of the UX/UI department of a Ukrainian-based agency Turum-burum, is going to share an example of how to get a $2.5 million monthly revenue increase with the help of design changes.

Besides that, he provides three reasons why website owners need to constantly optimize the interface, shares key principles of winning eCommerce strategy, and explains what approach to choose and what the ESR approach looks like in practice: examples from Infoshina, ARGO, Intertop, and others.

3 reasons to constantly optimize the interface

A website is a bridge between traffic and product. Hence, there are at least 3 reasons why it’s beneficial for a business to optimize a website constantly:

1. A customer-oriented design of the website converts more users into buyers while maintaining the same traffic.
2. A user-friendly website ranks better in search engines and increases the effectiveness of driving traffic.
3. By providing users with high-quality online service, you give them a caring experience and increase brand loyalty.

Key principles of a winning strategy of an eCommerce project

A good strategy is a must for a business to be successful. So, if you want your eCommerce project to become profitable, you need to build a winning strategy and, thus, keep in mind the following principles.

1. ECommerce is not a static solution, it is always a dynamic process

The main problem in the worldwide market is that, usually, business owners see eCommerce projects as a point-in-time static solution. After they get a new website, they don’t consider that they should work on its design anymore.

You should start to think about an online store as a product on a journey that evolves all the time. That perspective means you need a roadmap of how it will be developing. You should revise this roadmap as the market’s preferences evolve, behavior patterns of users change, and lots of other factors influence the project. That way, you could keep eCommerce aligned to new corporate strategies, identify risks and opportunities, and maximize the rate of return (ROI).

2. Constant optimization of the website interface is a must

Usually, businesses are investing in marketing activities every month, such as Google, Facebook advertising, email marketing, SMM, and technical support of the website. But the interface is out of the case.

Here are a few questions to answer:

• Why don’t you think about the interface?
• Why don’t you keep analyzing your users' behavior and their needs as well as the reasons why they leave your website without buying anything?
• Why don’t you improve your website’s design according to your users’ behavior so they can easily purchase your goods?

Meanwhile, all these factors influence the conversion rate and your revenue as a result. Ignoring these factors, you lose clients.

This is how conversion rate optimization appeared.
The CRO seeks to increase the percentage of website visitors that make purchases on the website.

There are lots of approaches for conversion rate optimization, yet all of them are based on analyzing customers and their behavior along with improving the interface according to the research results so as to meet the user's expectations.

What is the growth potential of your site?

We consider the income from increasing the conversion of the site using the example of an average online store.

Usually, the increase in conversion is directly proportional to the increase in revenue. But there is also a formula that allows you to calculate the potential of the site:

In this formula:

• CR is a current conversion rate
• Traffic is the average number of online users per month
• AOV is the Average Order Value
• Revenue is the current online monthly revenue

Why do we take a 13% conversion rate increase? Because from our practice, it is the minimum conversion rate increase that we usually get after improving the website.

Let’s take a look at the example of an average online store the Turum-burum team works with.

Here are the inputs:

• Traffic – 400,000 users per month;
• Conversion rate – 3.75%;
• Number of conversions – 15,000;
• Average order value – $50;
• Monthly revenue – $750,000.

Suppose we managed to increase the conversion rate by 13%.

The results we get:

• Traffic stays the same – 400,000;
• The conversion rate becomes 4.24%;
• The number of conversions has increased to 16,950;
• The average order value stays the same – $50;
• Monthly revenue rises to $847,500.

Thus, we get  $97,500  thanks in part to the website interface improvements after 1 month.

What is the ESR approach, and what is its advantage?

To make the website more user-friendly and achieve business objectives, it’s crucial to choose the correct approach, that is based on figures and data.

Turum-burum uses two approaches:

• ESR (Evolutionary Site Redesign) — step-by-step interface improvement without changing a structure;
• RSR (Revolutionary Site Redesign) — development of the new design based on the data of the old website.

If you don’t make changes to your website regularly, that means you will end up having to completely redesign it every 5 years. But if you choose to keep improving your website, you can extend your website’s life span for many years, and it will always be relevant to the user.

So, let’s elaborate on the ESR because sooner or later your business will come to it even after the launch of the totally new site.

As it was mentioned above, ESR is a continuous step-by-step improvement of the online store interface and correction of critical mistakes using CRO tactics to increase site conversion.

We consider that the ESR approach combines UX/UI expertise and CRO tactics.
The advantage of this approach is that all the interface changes are based on the analytics data, and website metrics and are subject to A/B testing. Besides, all the changes take place gradually, without total redesign, so that the traffic could convert better and generate larger profits. This allows to minimize risks, since the changes are minimal, don’t require significant investments, and pay off quickly. Thus, this approach enables you to constantly optimize the efficiency of your online store.

The website redesign process using the ESR approach looks like this

There are 3 main phases:
1. Preparation – a collection of the necessary information:

• Analysis of the goals and tasks of the users and the customer;
• Niche research;
• Web analytics tools setup;
• Analysis of the target audience and creation of the customer profile.

2. UX analysis – analysis and processing of the collected data:

• Analysis of the Google Analytics and Google Tag Manager metrics;
• Analysis of the heat maps, WebVisors, scroll maps;
• Interface analysis;
• Feedback collection and analysis.

3. Development and prioritization of hypotheses:

• Development and proposition of hypotheses;
• Testing and efficiency measurement;
• Introduction of all the changes.

It’s a cyclical and ongoing process of improving the interface and effectiveness of the website following the changes in user preferences and needs.

Let’s have a look at the impact and effectiveness of the ESR approach using real-life case studies.

What the ESR approach looks like in practice

We focus on figures, so these are some of our projects and the results that we managed to achieve, using the ESR approach. These are brand names and chains of online stores that experience thousands and some of them even millions of traffic every month. We have helped them to improve their interfaces, and you see how this increased their conversion rates on this slide.

Case 1. Conversion optimization using ESR for ARGO

ARGO is a huge Ukrainian clothing company that represents such brands in Ukraine as Benetton, Penti, Orsay, Vero Moda, Jack&Jones, MANGO, Lee Cooper, Kenvelo, Liu Jo, Scotch & Soda, Hummel and has more than 52 stores.

We started working on the ARGO project with the product card analysis, which revealed a number of issues, such as:

• Unstructured information;
• Duplicate headers;
• The main call to action – the “Buy” button – was black,  even though all the other accents were red.

Having solved these issues and recolored the “Buy” button in red, we managed to double the conversion rate.

Besides, we noted the unusual cart icon – a bag.

Having done some research, we discovered that it could harm site conversion. The attitudes that users have towards bags and carts are different. In the U.S., ‘cart’ is the term that describes the physical shopping cart in stores. But in other countries, such as the U.K., they use the term ‘basket’.

A bag is an object where you place your items after you have made a purchase. Bags give users the impression that they already bought an item and can’t change their minds.

A cart is an object you use to collect items. It gives users the impression that they are free to put in and take out items if they don’t want them. There’s less pressure on the user when they add items to their cart.

We changed the bag icon to the standard shopping cart and, as a result, the CR was boosted by 55.8%.

Case 2. Conversion optimization using ESR for Infoshina

Infoshina has been one of the leading Ukrainian retailers of car tires and rims since 2013. Their online store gets over 600,000 visits per month. The company is an official dealer of Michelin, Goodyear, Premiorri, and Bridgestone. Below the main issues found and solutions made are described.

Unstructured product card

We began the project with the optimization of the product card since it is the major decision-making spot.

During the analysis we identified a number of mistakes, the key ones being:

• Sticky product info, price, and “Buy” button at the top of the screen;
• Extra blocks distract the user from the target action;
• Unstructured information.

We moved the “Buy” button to the bottom of the screen on mobile, and the add-to-cart micro-conversion from the product page increased by 85.57%.

After that, we eliminated extra blocks. We leveled the indentations between the elements, made the product photo bigger, and placed the cross-sell blocks higher, thus increasing the add-to-cart micro-conversion from the product card by 13.26% more, according to A/B testing results.

Issues on the checkout page

We continued the optimization further down the sales funnel. During the analysis, we identified several issues on the checkout page. Here are some of them:

• Two similar-looking buttons “Place order” and “Continue shopping” differ only in color;
• The Main CTA button was blue, not green.

Checkout micro-conversion from the cart increased by 14.83% after we:

• Left only one call to action – the “Place order” button;
• Added an “X” to the upper right-hand corner, so that the user could go back and continue shopping;
• Changed the color of the “Place order” button from blue to green.

Case 3. Conversion optimization using ESR for Intertop

Let’s take a look at another example of the ESR approach in action in the fashion industry.

The evolution of the product card

Product card redesign was carried out in 3 stages.

The first one took place in 2018 – we analyzed the product page and identified a number of mistakes based on the collected data (user behavior, clicks, and WebVisors).  The main ones were as follows:

• Unclickable logo;
• Product description, being of no value to the user, was taking up a lot of space on the first screen;
• The decision-making area didn’t fit on the first screen;
• The “Details” section was not obvious and got lost in the interface;
• Little and poor-quality product photos that wouldn’t zoom in once clicked upon.

During the first phase of the product card redesign, we eliminated these problems, which enabled us to increase micro-conversion from the product card by 31%.

After that, a number of new issues emerged:

1. Mobile patterns started to prevail since the target audience had become younger –– users tried to swipe and tap like in a mobile app, and the design didn’t meet those modern requirements.
2. Scaling of the online store resulted in the emergence of a new “Beauty” section –– the product card that didn’t take into account specific features of the products of this category had to be changed.
3. The website content policy had to be updated –– for example, photos showing the products on a model needed corrections to improve the aesthetic appearance.
4. The number of product returns because of the wrong size had to be minimized.

After we conducted an analysis and developed hypotheses, the following changes were introduced:

• For the desktop version:

• We designed 2 product images from different angles for illustrative purposes.
• The brand logo was moved to the product photo.
• Breadcrumbs were hidden.

New product card design changes in the desktop version after the second phase of the Intertop website optimization helped increase micro-conversion from the product card to the cart by 12%.

• For the mobile version of the website we:
  

• Hide breadcrumbs in the upper section of the product card.
• Added a bottom sheet –– navigation for showing additional information, which is standard for mobile apps.
• Moved labels to the decision-making area under the photos, so that they didn’t cover important parts of the image.
• Introduced Expanding Bottom Sheet to minimize product returns because of the wrong size. When the fixed “Add to cart” button is clicked on, the Bottom Sheet expands, where the user can double-check the chosen parameters, and then press “Add to cart” once more to confirm his/her choice. As a result, 82% of the users made use of this feature.

These changes helped us increase micro-conversion from the product card on mobile by 38%.

Pop-up cart evolution

Having analyzed the pop-up cart at the outset of the project, we identified the main mistakes:

• Duplicate the “Add to cart” button;
• Unstructured information;
• Ineffective and malfunctioning cross-sell block.

In the first phase of optimization, we solved these issues and according to A/B testing results, the conversion rate increased by 54.68%.

These changes also influenced user interaction and behavior; besides, the average order value increased, which necessitated further optimization of the cart and checkout.

Here are some new tasks that appeared:

• The average order value increased, and the pop-up cart couldn't accommodate all the items.
• Bonus program changed  – the accent on bonuses was needed
• Problems with the selection of the product size and quantity appeared.

After the second optimization phase, the following changes were introduced:

• On the desktop we:

• Fixed the area with the important order information (total amount, bonuses, discounts) and the “Place Order” button in the upper part of the screen, so that the user could always see it when ordering more than 3 items.
• Placed the product list on the left side of the block and added the scroll option to make the cross-sell block more accessible and enhance the effectiveness of the tool.

• On the mobile we:

• Fixed the “Place order” button at the bottom of the screen for user convenience.
• Made a separate block for bonuses.
• Added a button for quick navigation to the cross-sell block.

All the hypotheses proved to be workable and led to the following results:

• Conversion increased by 27% on mobile and by 14% on desktop;
• Micro-conversion from the cart to checkout increased by 22% on mobile and by 8% on desktop.

The results after one year of the Intertop project implementation:

• Checkout conversion rate increased by128%;
• APRU increased by 71.43%;
• CR for 2019 increased by 55.4%;

The results for 2020 despite COVID –– CR increased by 10.5% more thanks to selective changes in the interface.

How to start improving the user interface

Everything has its start. Thus, before changing anything, you need to know what to change. That’s why the UX audit is the very first step on the way to improving the user interface. You can either conduct the audit by yourself or reach out to the professionals.

Tools you can use for the UX audit:

• Google Analytics;
• Google Tag Manager;
• Hotjar;
• Optimize;
• Google Forms;
• Plerdy, and others.

So what should be taken into account while creating a winning strategy for eCommerce?

Let’s wrap up the article by summarizing the main idea.

• Experiment! Even the slightest changes produce tangible results.
• Focus only on the KPIs of your interface, not on how beautiful it looks.
• When deciding on this or that change, don’t be guided by anyone’s opinion –– it is only the figures and data that you should focus on. Effectiveness is the main criterion.
• Don’t rest on your accomplishments, keep researching and analyzing your target audience and improving your interface.
• Convenient user experience can become your competitive advantage.

Aim high and reach for the stars!

‍