The most effective way to continuously increase a website’s conversion rate

21 Feb17:00 – 17:30 UTCStage: Main StageTalk
Slides

Checking session availability…

Hang tight while we load the latest updates.

The key principle of a winning strategy of a design project.
How to calculate the potential of your website’s conversion rate.
How to start improving the user interface for optimizing the conversion rate.
What methodology should be used in your case?
How UX/UI improvements have increased the conversion rate by up to 55% for online stores: three illustrative examples that you can utilize to improve your business

The most effective way to continuously increase a website’s conversion rate

Denys Studennikov at UXDX Community: Increase Conversion. Video: https://youtu.be/xHxFgg_EA7U

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

About Turum-burum and why conversion matters

[00:00:00] Hi everyone. Thank you for the introduction. I'm going to start, and as you know, my topic today is the most effective way to continuously increase an e-commerce website's conversion rate. But first of all I want to tell you something about our company. We are Turum-burum agency. We are based in Ukraine, and here are some interesting facts about us. First of all, we are the only company in Ukraine that has become a Google partner. We participated at a conference for their development two years ago, and we help our partners to deal with interfaces.

[00:00:48] Also, we have a good rating on Clutch. We've been on the market more than 30 years. We have a lot of experience in UX/UI, with a primary focus on e-commerce, Web3, online booking, fintech and others. In our portfolio we have more than 3,000 projects designed all over the globe: for Ukraine, the USA, Kenya, Germany, Australia, Norway and a lot more. And we really like numbers, because our main idea is to increase KPIs using interface changes.

[00:01:30] Because we like numbers, let's start from the numbers. According to the consultancy, only about 22% of companies are satisfied with their conversion. It's a really low number, because everybody wants more satisfaction. Let's take a look at the reasons why companies have bad interfaces and bad satisfaction.

[00:02:06] First of all, there are three points for changing your results. The first is your product or service: you should make it triple-A quality, with good service, good delivery, a good range and something like that. This is the main source. The next is traffic. You use landing pages for traffic, search engine optimization, PPC and something like that, a lot of marketing. And in the middle, between the traffic and the product, is your website. This is the reason why you should improve your website: to convert your traffic better and connect your customers with your product. So the main focus will be the website, the interface of the website and the key metrics of this.

Why improve an interface, and what is your website's potential

[00:03:12] Here are some little tips. Why do you need to improve an interface? First of all, it increases business revenue: a better, improved interface means more money, more revenue. After that, you get a user-friendly product that will make users stay, because returning users earn you more money. The users who come back to your website have better loyalty, and that's why they spend more time and invest this time in your product or services.

[00:03:47] After that, it improves understanding of the needs of the target audience. If you know your target audience, you can make your service, your product, everything about your website and the company better and more suitable to your target audience. Also, it's about UX. It's about the user experience and the interface.

[00:04:11] Moreover, if you improve your interface, you will get ahead of the competitors. If you have a better site, you have better results in general. And stay on the way: everything changes over time, both your product and the users. You can be on the same page as the trends of your users, and the interface is one of these trends, because the main trend today is a convenient interface.

[00:04:45] What is your website's potential? This is the formula for understanding the potential of your website. For example, you change your website's conversion rate by 30%, and you can see the revenue increase. It's your CR multiplied by the change in conversion rate, plus the conversion rate, multiplied by traffic and average order value. After that, it's minus the revenue. This is the formula for understanding your potential.

[00:05:26] Let's check this on our typical online stores, our typical client in Ukraine, maybe also from the UK. The business has traffic of 100,000 users per month. The current conversion rate is 3.75%. We can calculate the number of conversions, and it's 15,000. The average order value is 50 bucks and the monthly revenue is seven and a half thousand.

[00:06:05] After that, for example, we change the interface and conversion increases by 30% [?] 13%. Traffic stays the same. The conversion rate is now 4.24%. The number of conversions grows to almost 17 thousand. Average order value stays the same, and monthly revenue changes to eight and a half thousand, let's round it. As a result, you have plus 97 and a half thousand bucks thanks to the website redesign. This is the potential of changing your conversion.

An ongoing process that starts with an audit

[00:06:59] But the site is not a static product. It's a living organism that needs constant development and movement. That's why you should analyze, understand and change your website to be on top of the market and have a convenient and user-friendly interface. For this you need to make it a limitless process. You should regularly analyze, correct, improve; analyze, correct, improve. It's like your quota for every month. It's like a dog trying to catch its tail. This is the formula for changing every day and every month.

[00:07:44] But how do you launch this process? Where should we begin? This is one of the tips that I'm going to share with you today. It's about audit and analytics. The most important idea and the first step is to make a UI/UX audit. It helps you with analysis of quantitative data. You can analyze the quantitative data to see the numbers, to emphasize and highlight the figures. Analysis of behavioral factors is qualitative data. After that you add heuristic interface analysis. The next step is formation of hypotheses and forming a report with recommendations. This is the first step, what you should start with to understand the potential and the plan for your improvements.

Hypotheses and the PIE prioritization

[00:08:47] Let's take a look in more detail at what a hypothesis is, because the main idea is that every change starts with a hypothesis. What is a hypothesis? It's an assumption of how to influence specific project metrics. To make a better hypothesis, you should use a formula: to influence some metric, you need something, and a pinch of context. For example, a good hypothesis: to increase average order value, which is the metric, you need to add a block of similar products to the product page. It's the basic idea of how to make a hypothesis targeted at your website.

[00:09:30] Another example: to increase the conversion rate, you need to reduce the number of fields on the checkout page. That's also a good hypothesis. You have the metric, the conversion rate, and you have the action, the hypothesis: reduce the number of fields on the checkout page.

[00:09:45] But if you have a list of hypotheses, how do you set the right priority for them? You should use PIE, which is hypothesis evaluation. What is PIE? First of all, it's potential: the most problematic page with great growth potential, based on analytics data, the audit and customer feedback. One point goes to a hypothesis with potential. The second point goes to importance: the priority of the page, which has a lot of traffic, which has the greatest impact on conversion. You should understand what the really important page is. For example, if this is e-commerce and you compare an article page and a product page, it's obvious the product page has more importance, and that's why it gets the second point, for importance.

[00:10:43] The third point goes to ease: how many resources will be needed to test the hypothesis. For example, you can spend 20 hours to test this hypothesis or to implement it, but it gets you maybe five bucks. That's zero points for ease. If you spend five hours and earn 1,000 or 100 bucks, and it's cheaper to make the hypothesis, it's a good idea to give the third point to ease. Depending on these points, you can see three points is high importance and potential on the hypothesis list, two is in the middle, and below is one point. That's the PIE principle.

[00:11:40] Also, to emphasize, highlight and deal with the data, you should make a dashboard. For this, in our company, for our clients, we use Google Data Studio, now called Looker Studio I think, to see a big dashboard with all the numbers, to keep in touch with this information and see the difference between last month and the current month, not future months of course. This is the best idea, to check your data in one place.

Intertop case study: the audit and search

[00:12:22] Let's take a look at how it works in a case study. I want to share a case study about Intertop. Intertop is like the Ukrainian Zalando. They've been on the market more than 25 years. They're a shoe retailer and they have more than 100 stores in 25 cities, and [?] through the brands, which gets three and a half million monthly visits. It's huge traffic and a huge evolution. You can also see the case in detail at hotjar.com, because Hotjar is our partner. But I'll try to highlight some basic and maybe important points.

[00:13:17] When we started to work with them, we had these goals: simplify the customer journey on the website; of course, increase conversion rate and incomes; speed up the implementation of user experience changes; fast return on investment, of course; mitigate the risk of a conversion drop connected with a dramatic design change, trying to go step by step without a dramatic change; and continuous optimization of the online store's effectiveness.

[00:13:55] We made the usability audit, and as a result we made hypotheses for elimination. We studied dashboards and heat maps, analyzed Google Analytics and Tag Manager, collected customer feedback, and did usability analysis based on our experience. As a result we had a huge, huge list of hypotheses. We had a 91-page report, a huge document. 54 mistakes were found and recommendations offered, and we spent 120 hours of UX expert work. As a result, as I said before, they had a huge document.

[00:14:48] What did we start with? We saw that search was a growth point. Why? Because visits with search are only almost 3% of website users, but with this traffic it's 60 thousand visitors per month. That's enough. And when users use the search, the conversion is six times higher than for users without search. We said, "Oh, it's a good growth point." We analyzed the search and understood: oh, it's crap, I'm sorry. We tried Nike and didn't see the result. We saw results with other brands. It worked so badly.

[00:15:52] After that we studied the top searches of the website's users, and we saw that it's like type, then brand, type and brand, something like that. After that we made an algorithm based on the users' search queries. As a sample of this result, we made the search by category, and it shows gender, after that the popular brands, not more than five, after that the popular brands with gender, and all results in the category. The same for the other types of queries. After the change it looks so similar, but it works. As a result, transaction rate from search increased by almost 75%, and bounce rate for search decreased by three times, I think. It's an amazing result. And if we multiply this by the average price of the goods, it's a lot of income.

Intertop: the product card

[00:17:04] The next step is the product card. I'm going to show you the evolution of the product card. What did we have at the start? I can explain. It's not a big picture on the screen. We saw that users clicked on the brand picture, but it wasn't clickable. The price and buy button weren't on the first screen. The detailed information was on the second screen. It was nice but not perfect.

[00:17:47] We looked through the heat maps and analytics and made some hypotheses. After the change, we made the picture bigger, because we saw it in the recordings on Hotjar. We put the information with the price and buy button on the first screen. The brand was clickable, and the detailed information and delivery information, reviews, something like that, were visible on the first screen. This helped conversion from the product card to the cart: adding from the product card to the cart changed plus 31%. That was the first optimization phase.

[00:18:38] But of course the times changed and we got a new optimization task. First of all, they wanted to minimize the green color, because there was a lot of it: in the logo, in links, in buttons, in banners, everywhere. They said, "We want something more conservative, more classic, decrease the green." Also, the target audience had become younger, and they had bigger phones. It's connected to Intertop focusing on other, younger brands like Vans or something like that, and that's why the target audience had become younger.

[00:19:29] Mobile patterns prevail, so they wanted to bridge the gap between web and app, because around 90% of users were on mobile, and that's why we wanted to decrease this line, this border. Of course they added a new beauty section, as part of the scaling process. They updated their content policy, and you can see the idea with these labels on the picture. Let's imagine that on this picture you can see a person's head, and this label is on his face. It doesn't look good. And of course they wanted to reduce the number of product returns because of the wrong size. It's a really common problem for shoe retailers. The wrong size is a big returns problem.

[00:20:37] What did we do? Of course we changed the desktop. You can see the result. We mixed the breadcrumbs with the photo. We made more space for the photo, changed some information on the right side, made the left side more clear and the right side more productive, with the colors, with the price, with the size, something like that. With this change, the second phase of optimization on desktop, the conversion rate from the product card to the cart changed plus 12%.

[00:21:24] And of course on mobile we made it with a bottom sheet, like in a mobile application. We made this so that when you scroll down and tap the add to cart button, we re-ask the question about the size and try to confirm the size. Using this, we decreased the returns. 82% of users used this bottom button, and product card to cart changed plus 38%. It's amazing.

[00:22:08] And of course, to make the mobile web version nearer to the application, we added the bottom navigation. You can compare: this is the traditional header and this is the bottom navigation without the header. We have the new numbers: conversion rate increased almost plus 30%, average revenue per user plus 51.7%, average order value plus [?] 40 88%, bounce rate decreased 4%, exit rate decreased 7.9%, and session duration increased plus 11.5%. It's amazing, I think, and if we also multiply it by the money, it's a huge change.

[00:23:17] If we talk about the returns, as I said before, 82% of users on the mobile product card used the fixed button. You can see these details: users can use this bottom button, this is the use case, and this decreased their returns.

Intertop: the pop-up basket and the first-year results

[00:23:42] The next step is the evolution of the pop-up basket. At the start it was like this. It looked ugly. First of all, the cart was an unnecessary stage of the checkout, and you had cart, information about users, pricing and done. It was four steps for checkout. Also, they had irrelevant recommendations, like a size with a cream. It was so bad, so crazy, but it worked.

[00:24:20] We also analyzed quantitative and qualitative data to overview user behavior, watched the recordings, made some decisions, made a list of hypotheses about the cart pop-up, and changed it. We launched the new cart and the old cart in an A/B test, splitting traffic 50/50. After that we had the result that the conversion rate increased by 55%, only in the A/B test, and of course they were so satisfied.

[00:25:06] It looked like this. But after these results we had a new task for optimization. The average check had increased, and if you added more than one or two items, it was terrible. They changed the policy on the bonus program, and there was a problem with choosing the size and quantity of goods. Okay, we dealt with it and went on to the next step.

[00:25:53] This is how it looks now, after the second stage of optimization. You can see that we put more items on one screen. We added some extra cross-sell blocks, and made the button on the bottom sticky. We have this result: conversion rate increased 27% on mobile and plus 14% on desktop. Proceed to checkout, which is like a micro-conversion, increased 22% on mobile and 8% on desktop. It's a really important stage in the funnel.

[00:26:41] Here are the results of the joint work of Turum-burum and Intertop for the first year. You can see the amazing numbers. Of course we did more than I thought before, but as a result, the checkout conversion rate increased plus 128%, average revenue per user plus 71.5%, and general CR plus 55%. But it's not over. We are still working, and every year we make it better. In 2019 we increased CR 55%. In 2020, the COVID year, CR was up 10.5%. In 2021, CR plus 8.7%, and last year, 2022, it increased by 12%.

How to find conversion loss points yourself

[00:27:48] Why did we do it, and why are we still doing it? To make the user experience and business goals better. All these actions are necessary to eliminate interface mistakes. When you have made the audit and understand the plan, or use an agency like us or like the host of this conference, you should draw up a plan of improvements. After that, create solutions for each stage of the plan in Figma, the real design. Optionally, you can A/B test this if you have enough traffic, or you know how to run an A/B test. After that, implement the UX solution, after or instead of A/B testing. And after that comes the main idea of the process: measuring the results. You should understand that you changed this and it influenced this metric or this user experience. That's why it's really necessary to measure the results.

[00:29:05] How do you find conversion loss points and turn them into growth points? Of course, order the services of agencies like this. But I'm joking, it's not the only way, and you can do it in your team by yourself. For this I'm going to tell you seven simple steps. First of all, follow the user's footsteps. Make a purchase as if you are the customer. Open your website to order the service, the goods, everything, whatever you want, and try to walk a mile in their shoes. It's really necessary to put yourself in the user's role, to understand what the problem is and what the users' aims are. It may not match your business goals, but your users are your god, your king.

[00:30:08] After that, analyze micro and macro conversions. Use GTM and Google Analytics for this, to see the results, to see the numbers. If you don't use Google Analytics, you're out of business. After that, conduct audience research. You should understand who your target audience is: who these people are who want to buy something in your shop, who order the service, who take some call to action on your website.

[00:30:44] Moreover, conduct technical audits. Are you sure that everything is working well on your website? Because speed really matters for the user experience. Even with a perfect UX and UI website, you can lose your money and your users with a slow website. That's why we check the technical audit.

[00:31:14] Check the heat maps and scroll maps. Connect Hotjar or something similar to understand the behavior of your users. Moreover, watch session recordings. You can see, with anonymized information of course, your users' habits, behavior and goals, and understand the user flow of your website and what kind of problems they have. And of course, analyze the feedback. For this you can also use Hotjar, or Survicate [?], another service, to understand the feedback. Based on this information you can understand what your growth points are and what you should do further.

[00:32:05] After these steps are taken, what's next? Make some hypotheses on how to improve your site, then prioritize them according to their conversion impact, with the PIE principle I talked about, a simple step. After that, start checking these hypotheses. Try to check five hypotheses on the most important things. Take a look and try to find what's going wrong with your website.

[00:32:37] Also, always measure the results after each change in the site design, and do not be influenced by other people's opinions. Effectiveness is the main criterion. We've had a lot of cases when the founder of the site said, "Oh, I really like red, and my wife really likes red. Paint it red, paint it black on the website, because I really like it." No, no, no. Effectiveness is the main criterion. You should change it for this reason: "I want to decrease the green color because it's overused. We want to focus users on something else." That's a good hypothesis idea, not the best, but a good idea. Believe only in the numbers, because without numbers we're just dealing with opinions. It's a good quote. We really like it.

[00:33:35] I think that's all for today. I'm Denys, COO at Turum-burum. Please visit our website, add me on Facebook, and of course keep up with the e-commerce trends: open our Facebook, Instagram, Behance, and try to understand everything about e-commerce trends. And of course, Slava Ukraini. I think that's all for today. Maybe somebody has questions.

Q&A

[00:34:05] Host: Excellent, thank you very much for sharing that. Some of those stats were unbelievable, like the conversion improvements. If you're a small startup, it's fine when you get those kinds of number improvements, because it's not a huge amount. But when you're talking about a large company of that size, that level of improvement really adds up.

[00:34:30] Denys: Yeah, thank you. But we deal with all companies, from the small to the enterprise. It doesn't matter. In every company, every site, we can find some growth point or something like that.

[00:34:46] Host: Excellent. We have gone a bit over time for your original session, but if anybody does have any questions, send them in quickly. I had put one down about your PIE and your potential, because you introduced that at the start, and I was saying, well, how do you validate the potential? But then you got to that just at the end, when you were talking through your heat maps and all those things.

[00:35:12] Denys: Yeah. But of course it's really necessary to have some experience for this.

[00:35:20] Host: And then, in terms of the changes that you made: there were a lot of what some people might say are just standard UI things, like let's have a sticky button, let's make it user friendly. So why do you think teams are making the mistake of building it wrong in the first place?

[00:35:45] Denys: It's a really common problem when the developers make decisions about the interface. I think you know it. They made a really fast e-commerce project, a really fast online store, with the basic things, like a template of the user experience, and it worked well. But they didn't have analytics, design or something like that. That's why they hired us. Now we are big partners, with these numbers. We change the interface every three months, some small changes, and for the year-by-year changes we also help them. But they didn't think about the interface before our collaboration. It's a typical problem of the developer-first approach, I think. But now they have their own in-house analytics and they do the basic things themselves, and when they need some extra heavy power, they add us to the project.

[00:37:08] Host: Excellent. I think that's all we have time for today. If anybody does have any questions, please do keep sending them in, and we'll pass those through to Denys through the UXDX Slack group. I'd just like to finish off by saying thank you very much for sharing that and those phenomenal conversion increases. Thank you.

[00:37:28] Denys: Thank you for involving me and adding me here.

Speaker

Denys Studennikov

Denys Studennikov

COO and the Head of UX/UI department

Turum-burum