Failure to success: A step-by-step case study on 50% growth
•
0 likes•17 views
Slides from the presentation that Rio spoke at the Conversion Conference 2023 in Las Vegas. ---Description of the talk--- Share in Rio’s experience in optimizing Faber’s website’s CVR from 6% to 9%. CRO and UX optimization is not about how many techniques you know or how many tools you use, but it’s all about how deep you can go to dig up your users’ insights. It all starts with knowing what your users want and what they are particularly looking for in your websites. But how? First, analyze your website heuristically (visibility, information clarity, etc.). Second, know what particular keywords they searched to reach your websites or how they come to your websites (know what they are looking for and their stage of interest). Third, test test test. Testing is everything to success with less damage. Participants will learn: The key tip to maximize your websites conversion rate What you should not do in CRO and why (from Rio’s failure) A case study on how Rio managed to enhance the CVR
Recommended
Recommended
More Related Content
Similar to Failure to success: A step-by-step case study on 50% growth
Similar to Failure to success: A step-by-step case study on 50% growth (20)
Recently uploaded
Recently uploaded (20)
Failure to success: A step-by-step case study on 50% growth
- 1. @RiRiIchikawa FAILURE TO SUCCESS: A STEP-BY-STEP CASE STUDY ON 50% GROWTH Rio Ichikawa Product Manager - Faber Company
- 3. @RiRiIchikawa which has higher CVR? 1 2
- 4. @RiRiIchikawa BEFORE AFTER Replaced the form with demo gif
- 7. @RiRiIchikawa again... which has higher CVR? 1 2
- 10. @RiRiIchikawa Mieruca Heatmap free heatmap heatmap tools main search queries User intent = immediate use
- 11. @RiRiIchikawa BEFORE AFTER put the form back
- 14. @RiRiIchikawa relying on technique is risky
- 15. @RiRiIchikawa user intent is hard to understand
- 16. @RiRiIchikawa Step by Step Guide to Understand the True User Intent
- 17. @RiRiIchikawa Step by Step Guide to Understand the True User Intent & How to Levarage Them
- 18. @RiRiIchikawa CRO - steps Audit above the fold Investigate the high-exit section Leverage high-attention section Optimize low-attention section
- 19. @RiRiIchikawa Audit above the fold STEP 1
- 20. @RiRiIchikawa CRO - steps Audit above the fold Investigate the high-exit section Leverage high-attention section Optimize low-attention section
- 21. @RiRiIchikawa What is above the fold? Above the fold Below the fold
- 22. @RiRiIchikawa Why is above the fold important? it’s a key factor of the user behavior Effective ATF
- 23. @RiRiIchikawa Why is above the fold important? it’s a key factor of the user behavior Weak ATF
- 24. @RiRiIchikawa initiate CRO by optimizing above the fold
- 26. @RiRiIchikawa Use a scroll map how deep they scrolled
- 27. @RiRiIchikawa check how many dropped in the first scroll
- 28. @RiRiIchikawa First scroll drop benchmark Investigate if the first scroll drop is over... Organic AD 40pt 30pt
- 30. @RiRiIchikawa Example 1 ranked 1st for the keyword “LP” ”What is Landing Page” but only few conversions...
- 33. @RiRiIchikawa something must be wrong with Above the Fold
- 34. @RiRiIchikawa What to suspect? Does the page meet the user’s pre- and post-visit intent? 1 🍎 1 🍎 🍌
- 35. @RiRiIchikawa What to suspect? 1. Is the hero image relevant to the title? 2. Is the title and main copy clear and concise? 3. Does the ad target match the content?
- 37. @RiRiIchikawa “What is Landing Page”
- 38. @RiRiIchikawa “What is Landing Page”
- 39. @RiRiIchikawa What to suspect? 1. Is the hero image relevant to the title? 2. Is the title and main copy clear and concise? 3. Does the ad target match the content?
- 40. @RiRiIchikawa
- 41. @RiRiIchikawa
- 45. @RiRiIchikawa 1 fixed CTA on top img + copy detailed description
- 46. @RiRiIchikawa 2 fixed CTA on bottom white bg + copy no description
- 49. @RiRiIchikawa What to suspect? 1. Is the hero image relevant to the title? 2. Is the title and main copy clear and concise? 3. Does the ad target match the content?
- 59. @RiRiIchikawa Step1 - takeaway match users pre- and post-visit intent place actionable item into ATF
- 61. @RiRiIchikawa CRO - steps Audit above the fold Investigate the high-exit section Leverage high-attention section Optimize low-attention section
- 62. @RiRiIchikawa
- 63. @RiRiIchikawa what’s the biggest issue on the page?
- 64. @RiRiIchikawa Use a scroll map how deep they scrolled
- 65. @RiRiIchikawa scroll drop benchmark investigate when it’s more than 20pt in 2~3 scrolls
- 71. @RiRiIchikawa Step2 - takeaway find the obstacle in the page don’t make users bored
- 73. @RiRiIchikawa CRO - steps Audit above the fold Investigate the high-exit section Leverage high-attention section Optimize low-attention section
- 74. @RiRiIchikawa After fixing page exit causes....
- 76. @RiRiIchikawa first of all why they convert?
- 77. @RiRiIchikawa Understand what attracts your users
- 79. @RiRiIchikawa use a read heatmap Read
- 80. @RiRiIchikawa or check session recordings
- 81. @RiRiIchikawa
- 82. @RiRiIchikawa How to reverage them 1. Bring to top 2. Add CTA right below 3. Expand the content
- 84. @RiRiIchikawa Hair remover lotion landing page
- 86. @RiRiIchikawa How to reverage them 1. Bring to top 2. Add CTA right below 3. Expand the content
- 87. @RiRiIchikawa How to reverage them 1. Bring to top 2. Add CTA right below 3. Expand the content
- 88. @RiRiIchikawa
- 91. @RiRiIchikawa Gym AD landing page
- 93. @RiRiIchikawa
- 95. @RiRiIchikawa Step3 - takeaway find the appealing points in the page and leverage them
- 97. @RiRiIchikawa CRO - steps Audit above the fold Investigate the high-exit section Leverage high-attention section Optimize low-attention section
- 98. @RiRiIchikawa what is low-attention section?
- 99. @RiRiIchikawa what is low-attention section? unappealing
- 101. @RiRiIchikawa use a read heatmap Read
- 102. @RiRiIchikawa less attention (in cool colors)
- 103. @RiRiIchikawa or check session recordings
- 104. @RiRiIchikawa What is low-attention section? doesn’t necessarily mean BAD content
- 106. @RiRiIchikawa How?
- 107. @RiRiIchikawa How to optimize them 1. remove 2. move to bottom 3. shorten 4. add visual contents
- 109. @RiRiIchikawa SEO article “How to Use Guasha?”
- 112. @RiRiIchikawa read
- 113. @RiRiIchikawa read “how to use guasha” with images
- 114. @RiRiIchikawa user intent read with images “how to use guasha” ignored “history of guasha”
- 115. @RiRiIchikawa user intent doesn’t really care the history looking for the usage
- 116. @RiRiIchikawa How to optimize them 1. remove 2. send to bottom 3. shorten 4. add visual contents
- 117. @RiRiIchikawa How to optimize them 1. remove 2. send to bottom 3. shorten 4. add visual contents
- 118. @RiRiIchikawa what we did history do’s & dont’s usage benefits history do’s & dont’s usage benefits
- 119. @RiRiIchikawa “how to use guasha” monthly vol. 3039 #30 #10
- 120. @RiRiIchikawa “benefits of guasha” monthly vol. 7038 #22 #9
- 126. @RiRiIchikawa Blog article ”What is Above the Fold”
- 129. @RiRiIchikawa read
- 131. @RiRiIchikawa User Intent read ignored Examples of ATF Tips for effective ATF
- 132. @RiRiIchikawa User Intent looking for more practical and effective design for ATF
- 134. @RiRiIchikawa “above the fold” monthly vol. 1900 #28 #1 28 1
- 135. @RiRiIchikawa Step4 - takeaway find the unappealing points in the page remove them
- 137. @RiRiIchikawa start by nipping the buds
- 139. @RiRiIchikawa Find the cause of exits (hole) Fix them Levarage the appealing points Remove the unappealing points
- 142. @RiRiIchikawa mieru-ca.com/heatmap/en Forever Free - 5 URLs - 10,000 monthly PV
Editor's Notes
- Hi, everyone! Today, I'm going to talk about how to improve website conversions, step by step. I brought 9 case studies - some are about success, and some are about learning from mistakes. I hope these will give you good insights. Now, let's get started!
- Alright, let me start off with a little interaction.
- This is our service website. So we offer a heatmap tool which you can start from free, and these are the two versions - one before we made changes, and one after. Can you guess which one led to more conversions? Let me give you the details.
- The key difference between them is that the 'before' version had a sign-up form above the fold, while the 'after' version had a demo video in its place. Here's a hint before you make your guess: We replaced the sign-up form with a demo video because we knew of a company that saw a huge boost in conversions when they added the short video on above the fold.
- In fact, they increased their conversion rate 25-fold, a truly impressive leap.
- So we thought, why not try it ourselves, right? Copy and paste - easy peasy.
- Now, which version do you think had a higher conversion rate? Let me ask some of you. Was it number 1, with the free sign-up form? Or was it number 2, featuring the demo video, a technique we borrowed from a successful case? And the winner is...
- surprise, it's number 1, the original version with the free sign-up form!
- In fact, copying and pasting someone else's successful technique led to a slight dip in our conversion rate by about 0.9 times. Quite unexpected, right? I didn't see this coming. But everything happens for a reason. I’m gonna explain to you what I’ve found out.
- When I looked at the keywords bringing traffic to the page on Google SC, I realized that most of the keywords were our own service name and tool names, or just things related to obvious needs. It was like they were looking for a heatmap tool and wanted it immediately, but we had nothing that could easily help them take action in the first impression. So, what do you think I did?
- I put the sign-up form back
- at the same time, I made the copy text larger and more clear. And replaced the demo video with simply captured image which is more simple. And because of this modification
- CVR went up
- What I wanna say from this is that relying solely on technique is very risky. Even though it helped boosting the CVR on other website, that doesn’t neccessarily mean it’s always effective. Like I looked into the keywords bringing traffic to our site, and figured out what they were looking for, learning the user intent is most important.
- But I know, it’s very hard. If it’s easy no one would struggle from optimizing the websites.
- So for the rest, I’ll share the tips to learn the user intent effectively
- and the measure to levarage them
- For the effective CRO, you should do it step by step starting from the top of the page.
- which is called above the fold of the page
- I’m gonna explain you why
- What is above the fold? Above the fold content is the part of a web page shown before scrolling. Any content you'd need to scroll down to see, would be considered 'below the fold'. The 'fold' is where the browser window ends. so why above the fold so important?
- Bc it’s a face of the page. It’s a key factor of users to determine whether they keep scrolling and reading the page or not. when it’s effective they get interested in and keep scrolling to look for more information.
- But what if it’s not effective or attractive? in the worst case cinario, they just make an immediate leave without scrolling or reaching to the below contents and not reading any.
- so, to make them stay on your page, scroll down and reach to the lower content, above the fold must be optimized. and before start optimzing, first you gotta check the current situation of the above the fold, if it is effective or not.
- but how?? there are few ways, ask your users, implementing scroll tracking via Google Tag Manager, and so on. What I always do is using the heatmaps.
- By using the scroll map, you can learn how deep your users scrolled your page visually. The longer they stay on the page, the less likely the number to drop. Scroll map is easy and simple so I’m gonna explain based on this.
- The first thing to keep an eye on is if there's a big drop in numbers in the first scroll. If lots of users leave the page right away, that's a red flag. Especially, if there's a big drop.
- and by 'big', I mean over 30pt for pages where most traffic is organic, and over 40pt for ad traffic. Why is this percentage lower for organic traffic than for ad traffic? Well, it's mainly because accidental clicks happen more often with ads. From what I've seen, some of the really successful pages have just about a 10% drop at the first scroll. So, think of 30% and 40% as your warning signs.
- Let's start with our blog content as an example. We wrote an article about landing pages, and it ranked top for the keyword 'LP' in Japan. But, despite being number one, we were getting very few conversions from this page. So, I decided to dig a little deeper and checked the scroll map for the page.
- What I found was a bit shocking
- 53% of the users were leaving the page as soon as they landed on it.
- of course something must be wrong with above the fold.
- most times, users leave right away because the page doesn't match their expectations. Let's say a user clicks on a page expecting to read about apples. They get there, can't find anything about apples straight away, and think, 'Oh, this page doesn't have what I'm looking for.' So, they leave, without even scrolling down.
- So, there are three main reasons that might cause this. First, the main image, or 'hero image', doesn't go with the page title. Second, the title and main copy are hard to understand. Third, the content doesn't match the target of the advertisement.
- Let's go back to our example. Remember, the page is about 'landing pages'.
- The title is 'What is a landing page', so it's obvious that it's going to explain what a landing page is. But when you look at the main image, it's a different story.
- The title is there, but it's hard to read. Worse, the image itself doesn't fit the content at all.
- So, I had a hunch that the problem was with the hero image.
- To fix this, I changed the image. I added an illustration of a webpage and made the text easy to read.
- Our conversion rate went up for 258%! All I did was just replacing the main image to make it more suitable to the content. so, matching the users expectation is very important.
- This one's a landing page for a Korean language school in Japan which is our client. Either is before we made changes, and the other is after the modification. And either of them had more click-through rate for the CTA button by 166%. I wanna ask some of you which one had higher CTR, but before that, let me break down the differences.
- Let's start with the first version. The Call-to-Action (CTA) button was fixed at the top of the page, and the main text was overlaid on a background image. There's a very detailed description explaining why this language school is great
- Now, let's look at the second version. The main text is on a white background, with no detailed description. The CTA button is still fixed, but now it's at the bottom of the screen
- So, which one do you think had more people clicking the CTA button?
- The answer is no2. the first one is before the modification and the second one is after. What I saw in the original version was a bit of information overload - too many words, a bit chaotic. So, my aim was to clean it up and make it more straightforward.
- following the rule number2
- As I mentioned, the original version was bit wordy and the text was tough to read.
- So, first things first, I removed the detailed description. Then, I switched the background to white to help the words stand out more.
- Another important point was moving the CTA button to the bottom of the screen. Think about how you use your phone - you scroll down, right? And as you do, your eyes naturally move downwards. Having the button at the bottom makes it easy to spot and easy for your thumb to reach, which, in turn, leads to more clicks."
- I've just shared three key principles to help make your 'above the fold' more effective and increase conversions. But there's one more tip I want to introduce.
- I’ll show you one example for this
- It's a before and after of the landing page for a skin lotion. and the images are the above the fold of each version.
- The main difference between the two versions is the presence of a CTA button, and one of them had 1.6 times more conversions.
- Can you guess which one?
- Yeah, that was an easy one, wasn't it? Of course, the one with the CTA button above the fold had more conversions.
- So, what I really want to emphasize here is that having a clear 'above the fold' that meets users' expectations both before and after they visit your site, and placing actionable item, like a CTA button, into the above the fold is a crucial principle you should keep in mind.
- Once you've modified 'above the fold' and reduced those immediate exits, it's time to find and fix the other parts of your page where users tend to leave.
- Let’s say you’ve found out that the page has 90% of the bounce rate when you looked at Google Analytics. If you're not sure why this is happening, it'll be hard to get more conversions. So, your job is to figure out why people are leaving and fix those issues to keep more of them around.
- In other words, find the problem and nip it in the bud.
- Scroll map is useful here too
- Here's a tip when using a scroll map: for below the fold content, if the number of users drops by more than 20 points in just 2-3 scrolls, that's a section of your page that needs some work."
- I’ll show you one example for this
- There’s this one post on our blog, which was very wordy and there were no visual content at all.
- you might have already spotted it, but there's a big drop after a few scrolls. It seems like most users lose interest by the time they reach this section and just left the page.
- I suspected that too wordy content is the cause of exit so, I decided to add some visual elements, like images, to make it more engaging.
- And guess what? Just by adding a few pictures, our conversion rate went up by 1.5 times!
- The main lesson here is to identify any content that might be causing users to lose interest. And once you’ve identified it, modify it.
- Now that you’ve modified the obstacles on your page, the next step is to highlight the parts that are already catching your users' attention
- Steps one and two were all about fixing things that made users leave, helping them stick around longer and scroll deeper
- So, the next move is turning those visitors into converters.
- Let's think for a second: why do users convert? It's because they're drawn in by your content. They start to think or feel that your service, your product, or whatever you're promoting on your website is pretty awesome.
- So, to boost your conversion rates even more, it’s important to understand what's attracting your users - in other words, what they're interested in.
- And how do we find that out?
- I always use read heatmap. It shows you exactly where on the page most users are reading. The redder it gets, the more users are reading it. In other words, the more users halt the scroll and stay on that section, the redder it will be.
- You can also use session recordings, but keep in mind that you need to check hundreds of recordings to get a handle on the behavior of most users. Nonetheless, it's another way to see which content users are spending the most time on.
- Okay, once you've figured out which parts of your page are the biggest crowd-pleasers, it's time to leverage them.
- I mainly use these three strategies: 1: Move the most popular content to the top of the page. Since this content resonates with user intent, placing it up top makes sure more users see it. 2: Add a CTA button just below these sections. The most popular content is where users are spending a lot of time, so they're likely to notice a button placed here. 3: Expand on these sections. Since users are interested in this content, adding more related information can further fulfill their intent.
- Here’s the example for it.
- It’s a hair removal lotion landing page, which is our client’s.
- When we looked at the reading heatmap data of this page, the users voice section, which was located in the middle of the page, was attracting the most.
- What I did here
- I added the CTA button
- right below the highly engaging part.
- because of this change, the CTR boosted for 4.3 times. This one is very easy, yet very effective.
- And next example is
- A landing page for a gym, which is also one of our clients.
- In this example, the 'plan' section was a real attention grabber. About 20% of users were spending time there
- But it didn't have a CTA button, so we decided to add one just below this section.
- And guess what? This simple move boosted the conversion rate by 1.8 times!
- So to wrap it up, find those sections that really attracts your users and keep them engaged. Then, use those sections to boost your conversion and click-through rates.
- Finaly, the last step is to optimize the low attention section.
- Let's talk about 'low attention sections'.
- These are the spots on your site where users are engaging the least, meaning they're not finding it interesting that much.
- And how can we identify these?
- The read heatmap is our friend again. This time, instead of looking for hot colors,
- we're searching for the cool colors.
- Of course, session recordings can also be useful for this.
- But, before we rush into fixing these sections, let's take a moment. Low attention doesn't always mean 'bad'. It's crucial to understand why users are not engaging with that section. Is it irrelevant or just non-readable? So, once you've identified these less engaging sections, give them a good, careful look.
- Now, if you decide an area needs improvement, start optimizing them.
- 1: Remove it. If it's not relevant and won't affect SEO, this is the simplest solution. 2: Move it to the bottom. If you are uncertain about SEO impact, just move it to the bottom of the page. 3: If the section is just too long, try shortening it. 4: If you can't remove or shorten the section, add some visual content to grab users' attention.
- Here’s an example.
- It’s a blog article about Guasha. Have you ever heard of it? Gua sha is a traditional Chinese medicine technique that uses a flat tool to massage the skin and improve circulation.
- Back to the point, when we looked at the read heatmap data of the page, we found out that the section right below the fold, was totally ignored.
- This section was about “history of guasha”
- On the other hand, there were some section that were turing red
- and those were written about the usage of the tool with couple of images.
- to sum this up, the section about the history of the tool was being ignored, and the section about the usage was captivating the users interests.
- Users were looking for the usage “how to use the guasha” and didn’t really care about the history.
- What we did here
- We decided to move a section to the bottom of the page instead of removing it. This page was important for SEO, so we didn't want to risk affecting that by deleting content.
- Initially, the 'history' section was at the top, and the 'usage' section was past halfway down the page. We switched them around, moving the 'history' to the bottom of the page so that the "usage" section would be pushed up.
- As a result, the content rose to the 10th spot on Japanese search results for 'how to use guasha'
- and the 9th spot for 'benefits of guasha'."
- Let’s move on to the next one.
- We had an advertisement landing page, but forgive me, I can't share the specifics because it's confidential. The read heatmap showed that the section just below the fold was being ignored.
- SEO wasn't a big concern for this page, so we removed that section.
- This reduced our bounce rate by 35%. So, if SEO isn't a crucial factor, getting rid of less interesting content can be a useful approach.
- Here’s the last example.
- We have a blog post titled "What is above the fold".
- Upon reviewing the read heatmap, I found out that a section with a low read rate was located higher up on the page.
- This section was providing examples of 'above the fold'. Like, what above the fold looks like for the blog content, and what it looks like for ad landing pages and so on.
- On the other hand, the section that generated high user engagement
- contained tips for creating an effective 'above the fold' design.
- Essentially, the 'examples' section was being overlooked, while the 'tips' section was gaining user interest.
- This suggested that users were seeking more practical information on effective 'above the fold' design.
- So, what we did was move the less attractive 'examples' section lower on the page and bring the high-engagement 'tips' section higher up.
- As a result, our blog post became the number one search result for the keyword 'above the fold' in Japanese.
- The key takeaway from this step is to identify and eliminate less appealing sections in your page. Doing so allows you to highlight and maximize the impact of sections that engage users more effectively.
- Here’s the summary of my talk today.
- When working on Conversion Rate Optimization (CRO), begin by identifying and addressing the main issues first. Start by investigating if users are scrolling down your page. If they aren't, this is your first area to tackle.
- Imagine, you pouring a lot of money and effort to drive more traffic into your website without knowing the fact that a significant number of the users are leaving your page without even scrolling down. This is like pouring water into a basket full of holes - it's a massive waste of resources.
- So, begin by identifying the causes of these exits - the 'holes' in your 'bucket'. Address these issues to keep your users engaged and scrolling through your page. Once you've achieved this, you can start optimizing the content on your page.
- I always emphasize this point: don't adopt techniques blindly. As I highlighted earlier, just because a technique worked well on other pages doesn't mean it's universally effective. Understanding your users' intent is always crucial in CRO. I hope that my talk today will assist you in better understanding your users' intentions, making it easier to optimize your website for conversions.
- for those who are interested in the heatmap tool I showed in my talk, here’s the link to it. It’s free forever for 5URLs and 10,000 monthly page views. If you seek for more information, please come say hi to me