The first fold of your website is the most important section. All visitors who land on your page end up seeing that block. And this will make them continue browsing your website, scroll to know more about it, or just leave.
When we talked about heatmaps, we saw that the first fold of the web is the one that receives more relevance in most cases. In both the heatmap and the scrollmap we analyzed there, the amount of activity in the first block of the web was bigger.
Many visitors will only see the first fold and they will not scroll down the page. Optimizing what we show there is key to improve the conversion rate. That is why this month we will talk about the optimization of the first fold of a landing page of our website.
The Hypothesis: Focus on The Message
In Nelio we have two premium plugins for WordPress: Nelio Content and Nelio A/B Testing. Today we are going to focus on the second one, which is also the one we use to run the tests in this section of our website. Let’s analyze the first fold of the landing page for Nelio A/B Testing.
The goal of this page is to show the product to potential users so that they end up visiting the pricing page. The more visitors that go from this landing to the pricing page, the more possibilities that they end up purchasing the product, which is what we want.
The data we have thanks to the tool we use for web analytics tells us that this page is already performing quite nicely. To be more specific, we know that half of the visitors who visit our landing page end up visiting the pricing page. Not bad, right? Now the question is, can we improve these numbers?
The screenshot above shows what you see in the first fold of that page. Its main title is the name of the product: Nelio A/B Testing. Then we have a subtitle that tries to create a sense of urgency to users so that they start testing their sites.
However, if we rethink the text and try to change the message to arise curiosity instead of urgency, we may be able to improve these numbers that I was just presenting you. Further, to avoid distractions we can change the first block of the web so that it uses the entire first fold and thus hides the second section of the page, which does not contribute to our purpose here.
So, the hypothesis of the test that we are going to create here is that if we focus the first section of our website to send a clear message, the conversion must improve. Will we succeed? Let’s see…
Creating a Variant of The First Fold
The first thing we are going to do is go to Nelio A/B Testing in WordPress and create a new A/B test of pages. I encourage you to do the same with your landing page and share your results with us in the comments. You can do this test for free by simply installing Nelio A/B Testing from the WordPress plugin directory.
Now we have to name the test and the variant that we are going to create. The goal of the test is to visit the pricing page. Thus, we add a conversion action that track visits to the pricing page as conversions. Setting up all this test will take you less than a minute. Now we are going to edit the variant with the changes.
When editing the variant we go to the page editor that we have configured by default in WordPress. We use the Gutenberg block editor. I recommend that you use this or any other with which you feel comfortable.
In the following comparison you can see the changes we have made in the first block of our landing page. Keep in mind that if you hover the mouse over the block you can move the divider to the right or to the left to see the original version of the page that we are going to test or its variant.
In the variant we have changed the title and instead of the name of the product, which already appears in the logo, we have added a message that invites to stimulate the curiosity of the visitor. We want them to think about the changes to their website that might work best. A different color? Another shape for the buttons? An alternative location for all this?
Following this, we change the subtitle to something that indicates that we have the solution to quench your curiosity: “create and test different versions of your WordPress to discover what your audience likes most and improve your conversions.”
Creating the A/B test and editing the variant of our page is something that takes us only a few minutes. What we can get in return is much bigger than the dedicated effort.
Finally, as we have the website in Spanish and English, we do the same with the page in Spanish. You can see the changes for the variant of the Spanish page in the following comparison:
Once we have everything ready, we just need to start the two page tests, one for each language, and wait for the results to arrive. Remember that Nelio A/B Testing is responsible for splitting your traffic between the different variants under test and counting visits and conversions. You don’t need to do anything else… just wait.
Nelio A/B Testing
Native Tests for WordPress
Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.
Analyzing The Results: Did Our Changes Worked Better?
Let’s start with the results for the test of the page in English. You can see all the details in the following screenshot:
This test has been running 26 days, and almost 1000 visitors have been analyzed in total. As you can see, at this time the test has been able to identify that version B is the winner.
As we already knew, the original version has a conversion rate that in this case is 54%. This matches the data of the web analytics tool that I mentioned before. On the other hand, the variant has achieved a conversion rate greater than 60%, which represents an improvement of 12.3%.
The data is statistically significant, with a confidence value greater than 95%. Therefore, we can confirm that the variant with the new copy that uses the entire first fold of the page is better than what we had so far. Our hypothesis was right. We must be happy, then.
How to Apply The Winning Variant
Once we know that we have an alternative version of our page that is better than the current one, we have to make this variant become the one that all visitors see. To do this we must first stop the test. Then, we go to the section where we have the results of the variant and press the button to apply it.
What it does is replace the page we had with the variant we found that works best. It’s that easy, with just one click. And in case you need it, you can always reapply the original version and return to the previous state.
What About The Test for the Page in Spanish?
Well, you have the results below:
After 26 days, the test has not reached any conclusion due to the low traffic of the page under test. The number of visitors is so low that testing this page made no sense. Therefore, the only conclusion we can draw from here is that our audience in Spanish does not have much interest in doing A/B tests.
This is interesting, because it proves that on the same website we can have very different audiences. In this case, the differentiating fact is not only the language, but the fact that in English-speaking countries this type of conversion optimization techniques are more widespread and mature than in Spanish-speaking areas.
So our job here is to continue explaining the benefits of A/B testing to our Spanish audience . By doing this, we hope to get more traffic and interest on the topic.
That’s all for this month. Do not forget to stop by our website regularly in order to know the tests that we’ll analyze in the coming months.
Featured image by Matthew T Rader on Unsplash.
Leave a Reply