What Colors Should You Use to Increase Sales?

Published in Online Marketing.

Watch our video

There is a better version of your web

Comparison of two variants of the same page using A/B testing

Share this post

Once again, the A/B tests have shown us that our tastes and color preferences are not always aligned with those of our visitors. Or rather, the colors that you show on your website, although they may be attractive, are not necessarily the ones that will bring you the most sales. In fact, you will find many articles on the psychology of color that study how each color provokes a different emotional response and how these can persuade your audience differently.

Guide to the emotions conveyed by colors and the brands that use them in their logos
Guide to the emotions conveyed by colors, and the brands that use them in their logos (source: The Logo Company).

This month, as we recently changed our Nelio Content product plans and pricing page design, we thought it was a perfect opportunity to analyze which colors should be shown in each of our plans to get more sales.

In the design of the original page, being a fan of the color blue, we proposed the following design of the Nelio Content plans page:

Screenshot of the plans and prices page of Nelio Content before creating the A/B test for it
Screenshot of the Nelio Content plans and pricing page before creating the A/B test for it.

Cool, right? But if you’ve been reading about our experience running a test every month, you know that, when it comes to making business decisions, you should not focus on your taste solely, but get real data instead, as that’s what’s really gonna tell you what impacts your bottom line the most.

So, this month’s test with Nelio A/B Testing analyzes which color scheme on our pricing page will generate more income.

Screenshot of Nelio Content plans displayed in blue color variations
Original version of our A/B test: Nelio Content plans shown in blue color variations.

Create a Test of The Pricing Page

Before creating an A/B test of any element of a website, we always recommend you perform an analysis of what is working on your website, where you have more friction and problems, and generate hypotheses about what you could improve. From the list of hypotheses that you have generated, prioritize those that will have the most impact on your objectives. That is, landing pages and pricing pages will probably have much more impact on increasing sales than a blog post.

In this case, our main motivation for creating this test was: since we are changing the Nelio Content plans and have redesigned the entire pricing page, we took the opportunity to make sure that the new design uses the best color scheme possible.

We decided to create, in addition to the original version, two other variants with these color combinations:

Screenshot of the Nelio Content plans shown in the first variant of an A/B test
Screenshot of the Nelio Content plans shown in the first variant of the A/B test.

In the first variant, we decided to show the plans with a selection of pastel colors that are very fashionable this year.

Screenshot of Nelio Content's plans for the second variant of an A/B test
Screenshot of the Nelio Content plans shown in the second variant of the A/B test.

And we created a second variant, as you can see in the image above, in which we only wanted to highlight with fuchsia color the Standard plan, and the other two plans to show them with a darkest blue background and green buttons.

In general, we could have selected other colors, or even created other color scheme, but the problem with creating many alternatives is that, to get results that are statistically significant, you need to have many more visits.

Creating The A/B Test

To create the A/B test, as always, we use our own plugin, Nelio A/B Testing. Just download it from the official WordPress plugin directory and install it on your website to be able to create a test like this one. And if you still have doubts about which A/B test plugin to use to create your tests on your website, I recommend that you read our comparison of A/B test plugins for WordPress.

Nelio A/B Testing is very versatile as it allows you to create A/B tests of any WordPress element. In this case we create an A/B test of pages. This type of tests lets you create new variants by duplicating the original page into new, alternatives pages. In our test, we simply changed the background colors of each plan, as described above. If you want to change something that’s part of the page template you use, you can do so by creating an alternative template and running an A/B test of page templates instead.

In the following screenshot you can see the definition of the test:

Screenshot of the definition of an A/B test of the Nelio Content plans
Screenshot of the definition of the A/B test on the Nelio Content plans page.

Next, when creating any A/B test, you must set the goals you want to measure in the test to decide what works best. In this case we defined 4 goals to be measured within the test:

  • Clicks on the buttons of any plan
  • Clicks on the Basic plan buttons
  • Clicks on the Standard plan buttons
  • Clicks on the buttons of the Plus plan

With all this created, all we had to do was start the test and wait for the results to come. Nelio A/B Testing is in charge of dividing the traffic into three random groups so that each of them sees only one of the defined variants, and keeps track of the conversions each variant and goal get.

Analysis of The A/B Test Results

After one month and nine days of running this test, we achieved statistically significant results with almost 100% confidence. Let’s look at an analysis of each of the objectives in detail and the conclusions that we were able to draw from the test.

The first objective was to measure clicks on any of the pricing table plan buttons (the table is displayed twice on the page).

Analysis of the results of the first objective of the A/B test performed
Analysis of the results of the first objective of the A/B test performed.

In this case, the results show that the second variant, alternative C, is the one that gets almost 130% (129.6%, to be exact) more clicks than the original version. In contrast, the variant showing the plans in pastel colors is 25.5% worse. If we had only had this objective of the test, alternative C would have achieved overwhelming results.

Our second goal focused on the clicks the Basic plan buttons received. Let’s see how the results vary:

Screenshot of the analysis of the results of the second objective of the A/B test performed
Analysis of the results of the second objective of the A/B test performed.

Note that if we only focus on clicks to the Basic plan, the difference between the third variant and the original version, although still considerable, that is, an improvement of 73.7%, is not as much as if we analyze all clicks. And in the case of the pastel color variant, as in the previous case, it is also worse than the original but the difference is 12.3%. If you think about it, it may make some sense since the variants don’t focus on particularly highlighting the Basic plan.

Let’s now see the results we have obtained in the one we wanted to measure the clicks of the Standard plan.

Screenshot of the analysis of the results of the third objective of the A/B test performed
Analysis of the results of the third objective of the A/B test performed.

In this case, the improvement of the third variant, which is precisely the one that stands out with a more eye-catching color in the plan, even achieves 228.1% more clicks than the original version. So, if you had any doubts about whether highlighting any of the plans has any impact, it is clear from this test that people are attracted to the most eye-catching elements.

Finally, let’s see what happens with the latest plan:

Screenshot of the analysis of the results of the fourth objective of the A/B test performed
Analysis of the results of the fourth objective of the A/B test performed.

In this case, the improvement of alternative C compared to the original is almost 3% with 95.7% confidence. And in any case, there is little conversion of the Plus plan in all the alternatives. In fact, most of our customers prefer to opt for a lower plan at the outset and then switch to a different plan later on.

Conclusions

Considering the results we have obtained from the A/B test, we come to the conclusion that the version in which the Standard plan stands out with a fuchsia color has worked much better than any other variant. Therefore, it is best to apply it as the final version on our website.

Screenshot of applying the winning variant of an A/B test
Screenshot of applying the winning variant of an A/B test as final.

As you can see, with just one click, the final version of the Nelio Content pricing page becomes the one that has won the test. Sure, we may have thought that the blue color scheme was a good option at first, but our preferences and tastes are of little use to increase sales. A/B tests are those that, with real data, prove us what really works. What are you waiting for to create your A/B test to increase conversion on your website?

Featured image by Baher Khairy on Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.