If you don’t know what to change, try changing the colors of your website

One of the biggest problems when it comes to improving the performance of your website is not knowing what changes to make. This has happened to all of us at some point in time. In such cases, the right thing to do is to focus on those parts of the web that are most critical. By this I mean the sections of your page that get the most attention or are most important to your business model.

For example, if your goal is that those who visit your website end up filling out a form, focus on the form itself: make it more prominent and simplify it as much as possible so that it is easy to fill and submit. As I’ve said before, look first for the elements that, when changed, might have a greater impact on your visitors, as this you will get interesting results faster.

If you still don’t know what to change, something that never disappoints and that is very easy to try is to apply changes to the colors of your web page. Without any intention of leaving aside the visually impaired, it is clear that the colors of your website are very important. Much more than you can imagine.

There are several studies on color theory and the way we humans perceive it. What may seem just an interpretation of different wavelengths captured by our visual system (eyes, optic nerve, and brain), hides a huge psychological background.

For this reason, I encourage you to try changing the colors of your web page (or of some high-impact elements within it) and study how the interaction of your visitors evolves in the face of these changes. This is just what I am going to explain you today with a complete and real example that we have tested on this website.

Definition of the A/B test

To test any changes on your website you should use an A/B test. By doing this you can guarantee with real data and following the scientific method that the applied changes work better (or not) than your current version.

In today’s example, what we are going to do is test a change in the colors of the first fold of Nelio A/B Testing’s pricing page. This first fold has a great impact on our business, since it is in charge of displaying the price table through which our visitors end up becoming customers when purchasing the plugin.

In the following comparison you can see the original version of the first fold (on the left) and the alternative version (on the right) with the different colors of buttons and margins, and a new background image:

To test the changes, we used Nelio A/B Testing as our reference A/B testing plugin. The first thing we are going to do is create a new A/B test of pages, which is the element that we are going to test.

We do this because we can change the colors through the WordPress page editor itself. If we couldn’t do it like that because the colors come through a theme template or in some other less orthodox way –experience tells us that color styles can be defined in several ways in WordPress–, another option that would always work would be to use an A/B test of CSS styles, where we could apply the new colors by adding new CSS style rules in the variant.

In the edit screen of the A/B test, we select the base page that we want to test (our pricing page) and create a new variant, which we’ll edit later:

Another important aspect to highlight is to define which metrics we want the A/B testing tool to track to later find out which of the two versions worked better. We define this in the conversion goals and actions section, as you can see in the screenshot above.

In our case, we defined five goals, which will give us five different results for the same A/B test. First we define the goal that measures the amount of clicks on the purchase buttons of any of the plans that are in the price table. Then we have 3 additional goals that measure clicks for each plan individually. And finally we have a goal that measures the actual number of purchases being made after seeing each version of the page under test.

Finally, we edit the alternative version of the page. This takes us to the WordPress page editor that we are using (in our case, the block editor), as you can see in the following screenshot:

Here we only have to change the colors of the action buttons of each of the three columns and of the element that we use to create the top margin. And we also changed the background image for another one that we have uploaded to our WordPress media library.

Once the alternative page with the changes we want to test is ready, it’s time to go back to the A/B test edit screen and start it. This will automatically split the traffic to our pricing page in two. Half our visitors will interact with the original version, the other half will see the variant.

In this way, we can check which version of the page works better against the five conversion goals. Now we only need to wait for the results to give us the information we seek.

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.

More Info

Analysis of the test results

Eventually, if one variant is better than the other, the A/B test tool itself will tell us so. In the A/B test that we have described before, the results have been clear. The version with the new colors is worse than what we already had. You can see the detail of the results for each of the five goals defined in the test in the following gallery:

Not only did the variant get fewer clicks on the action buttons, but it also resulted in fewer sales (almost 22% less).

This may seem silly, but if instead of testing the changes with an A/B test you change them directly on your website without testing them before, you have the risk of introducing changes that may work worse. This could have been our case, since the changes we wanted to make have not worked as well as we thought they would.

You may find that changing the colors at any given time is a good solution, because you just like the new ones better. You have found a new color palette that you think is much better from a stylistic point of view and choose to use it directly. But this is a big mistake. The fact that you like one color more than another is not important. The important thing is to check carefully if this is really the case for your audience and your visitors. And you can do so in a controlled environment through an A/B test.

Featured image by Jeremy Thomas on Unsplash.