How can web designers, from A/B testing, increase conversion rates above 52% for their customers?

Learn what they are and how to perform a/b tests to improve the quality of your projects.

You professional web, freelancer or not, say to yourself: how does it feel to receive good feedback from a client for a job well performed?

Imagine what it would be like to listen to your customer reporting numbers such as 134% growth in your conversions?

What is the importance of always being requested until it is indicated by this client to others? How would you feel if these good sensations repeated regularly?

happy

At the very least you'd be happy. No?

If the answers to these questions are positive, OK. However if the answers go down to something great it may be that your projects are not winners. They are rather projects to "meet table".

meet-table

Projects to fulfill table are delivered works and "Goodbye"! The client only returns to you to demand boring maintenance and that meet his vanity. And with that you do not grow, the customer does not grow and many opportunities and money are thrown into the waste basket.

waste of money

You may not realize it, but this may be happening all the time with everyone involved and automatically. It is a general and conformist "anesthetizing". This scenario prevents you from retaining customers.

Is that what you want for your professional career?

anesthesia

What if you knew that by donating a little more you can provide for you, your company and your customers higher incomes than those achieved today?

And what does all this have to do with A/B testing and conversions? A lot of things!

I'm Ed Francisco and I've been called up for the mission of writing about our experiences with A/B testing and conversion while David Arty is super busy preparing a nifty material exclusive to you.

david-working

I hope you enjoy and feel free to supplement this article in the comments section with your experiences. After all the followers of the Chief are the coolest readers of the web, who leave comments, who like, who share, who send chocolates, etc.

Without further ado, know what you'll see in this article:

When we are unaware of our technical inability

modern times

As the David Arty always remembers, he went through companies where the goal was to deliver the projects as soon as possible and "Goodbye". A production line with little time to analyze if the customer was satisfied, because he already had another project at the "end of the treadmill". How destimulating is that?

But then he would have his first experiences as a freelancer and could have more creative independence to worry more about the quality and satisfaction of his clients.

But the vices acquired in the old jobs materialized when communication was not good with the client and when the bills to be paid were eroding their pockets.

empty pockets

All this because he did not know that there were other possibilities to retain his customers. This is the stage that you do not know that there is something important that you could master, that is, an unconsciousness of your technical and operational incapacity (in this case, lack of domain Design applied to conversion).

However, one day David, when hired by a company firmly concerned with results, went from the "From unconscious of his technical and operational incapacity" to the "From aware of his technical and operational incapacity" phase.

Aware of his technical inability David woke up and ran behind to learn how to get results through conversion-focused processes. This enabled a giant leap of professional growth by getting him into the "Conscious of his technical ability" phase of design mastery applied to conversion.

And you can dominate, too. But for you who do not know what you need to also have a leap in professional performance that helps to retain your customers we will then present the formats and tests that you can offer to the market.

What is A/B Test?

test-off

An A/B test is the basis for web-applied marketing optimization. It is a quantitative test that consists of showing different versions of an online media format for different slices of the audience of an online business and thus being able to test which page has the best performance. In it we use numbers as allies.

According to the website Stelhouse, conversion rates typically range from 1 to 3 percent. A low value. To improve it is necessary to invest in improved conversion optimization practices. And it is in this scenario that A/B tests can be a good one.

Stelhouse states that using targeting methods correctly in tests can increase the conversion rates of a site by 300% or more. A/B testing is the most widely used test method to improve conversion rates.

Just so you have an idea, in 2011 Google held more than 7,000 A/B tests. Companies like Amazon.com and eBay often feature slightly altered versions of their websites for testing.

Too bad there are few in this immensity who have adhered to the improvement of their conversions without relying on achismos.

Exemplifying the A/B test

Let's go to a hypothetical example: Test two similar sales pages with a capture form where the few differences between the pages are the color of the submit button and 0 font type used Verdana.

As for the source we can even rely on the case studies found in the article "How to use Typography to improve the Conversion of your projects?".

On version A, the old page has the button to make the purchase in green. in version B the page has the button in red color.

During the test, 10,000 visitors are sent to each page. Page A was responsible for 200 sales, resulting in a conversion rate of 2%. The variation, page B, 300 sales, with a conversion rate of 3%. That is, a percentage point that can make a lot of difference. See:

Assuming that the product sold on both pages costs R$ 50,00. It took this small design change so that the winning page B get a conversion rate 50% more than the old page and monetize R$ 15,000, i.e.five thousand reais more in relation to page A.

Note: If this is a hypothetical example, there is no definition of the Design decisions on page B that influenced its success. However, we can estimate that the decision to choose the red color could have caused a greater contrast in relation to the layout by drawing the user's attention and the stimulus to the click, or even the warm characteristic of the color itself could reinforce this attention.

How Obama raised $60 million with A/B testing and rate optimization and conversion

For U.S. President Barack Obama's 2008 campaign, a simple experiment was started a year earlier through website optimization and A/B testing to raise tens of millions of dollars.

The best version of the test achieved an improvement of 40,6% registration fee. What made it possible to capture 2.880.000 more email addresses than if you had kept the campaign with the original version.

squezepage Obama

Obama campaign page 2008 A/B test winner - Source article: Optimizely Blog

This capture of 2,880,000 addresses resulted in an additional $60 million in donations.

Do you realize how these techniques you use in your projects and your clients' projects can bring benefits and make you an authority before them?

What are A/B tests for web professionals?

It serves to constantly test ads on social networks, landing pages, email marketing campaigns and other formats to ensure that your business is getting the highest possible return on investment.

The great benefit of using A/B tests is to validate your decisions by avoiding taking arbitrary action and collecting arguments to present to your customers.

Note: We must not forget that in addition to A/B tests other user tests such as classic usability tests exist and are indicated (if time and budget permit) for decision making.

The expected path of a test to ensure return passes through conversion. But what is conversion?

What is conversion?

Conversion is an online event defined by a company that occurs when a user interacts with a website or other type of online format of that company.

This interaction can stem from one click, subscription to a newsletter, purchase a product, a phone call (why not?), among others.

It is up to the company to measure the results of conversions achieved in its campaigns, marketing strategies and optimization with A/B tests.

A format widely used by online marketing that enables conversions are landing pages.

Types of landing pages?

landinpage-squeeze

You can see in the article about design for conversionwhat are landing pages. We emphasize here that they are landing pages or if you prefer landing.

They take this denomination because they are where users are intended when they click on a sponsored ad from a search engine or social network or when they click on a search result.

Thinking this way any page of a site is a landing page?

You may not even agree with me. And I imagine that the overwhelming majority of entrepreneurs, internet marketers and experts in general do not either, but I say that any page that "land" visitors are landing pages. Logical as long as it contains in its interface some defined strategy that makes the user interact leading to conversion.

What they say is that landing pages have a format determined so that the user does not disperse and also a rule so that these pages are outside the normal flow of the site. This I believe is the definition of Squeeze Page that I will talk about in the next topic.

However I determine my landing pages according to the goal outlined. Imagine the following situation:

You check in your Google Analytics that an article has a growing increase in visits coming from organic traffic because of the subject matter and with good time to stay on the page. You can choose to turn this article into a Landig (Squeeze) Page. Or choose and take advantage of the quality of the article to insert a capture form at the end of the article with a call to action and a unique proposal to sell irresistible so that it receives more related content.

I prefer the second option and you?

The second option is still a landing page. There are visitors landing, the article has elements of persuasion and a form to capture emails. A lot of people have always done that.

landing-page-article

Article of live from blog that invites the user to receive infographics in the VIP content block.

So we can conclude that a squeeze page, your blog post, a sales page, a contact page, or even the home page can be a kind of landing page. That's right, your home page.

With the advent of SEO, internal pages can have more visits than home. But she still has a lot of potential. And there are smart people who don't dismiss it as a functional landing page. See:

home landing page

Home of Chris Duckers

Chris Duckers' homepage has common elements on any landing page. A headline, a subtitle describing the free offer, a list of benefits, a simple form, a call-to-action button, and an image of the author that brings proximity. Content after the first fold features social approval and blog-related content.

Another case:

Wedbuddy had a 73% increase in subscriptions making some changes to your homepage.

home landing page 2

To get to this result the most prominent change was to change the old text "Start Your Free Trial" from the pink call to action button to "I want to try it out".

But not all pages that receive visits can be considered landing page. Examples:

  • A very simple "About" page that does not provide any interaction element, is not landingpage even if it receives visits;
  • A blog page that does not have a redirect button, capture form, or other interaction goal at the end of the article cannot be considered a landing page.

So you can conclude (if so) that any page inside or outside the stream of a site that directs user and has (I said "have") a goal to be measured is a landing page.

However, regardless of the objective, the most indicated way to optimize any format is to use A/B testing.

Now when the goal is to potentially capture emails nothing is more effective than squeeze pages.

The power of the Squeeze Pages

Squeeze page is a specific and more powerful and powerful type of landing page for conversion, mainly for capturing emails or some other user data. It's the famous catch page.

Squeeze means squeeze, compression. Squeeze pages "compress" visitors from their traffic into the sales funnel. Later it is possible to turn them into qualified leads through relationship to make them able to receive offers.

For the conversion to happen it is indicated that traffic is segmented and that some incentives are offered in exchange for capturing data, such as:

  • Consultation for professional services;
  • Discount coupon;
  • e-Books;
  • Webinar registration;
  • Free trial of some tool;
  • Notification of a future product release, among others.

The following example of squeeze page that offers an incentive and calls for action through the yellow button:

squeeze page law busines mentors

By clicking the button a window opens for the user to fill in their details so that they can receive the incentive in their inbox via a marketing email message.

law-business-mentors-2

It is possible that the user, if he does not want to remain in the list, descadastre. A serious work of email marketing cannot allow space for spam practice.

Respect the privacy of if user. Collect email in a segmented way and create a good relationship with the user who subscribes to a newsletter.

A Squeeze page is a landing page, however not every landing page is a Squeeze page

There's a lot of confusion out there. A Squeeze page is a landing page, however not every landing page is a Squeeze page. Landing pages have comprehensive functions according to the strategy outlined. And that goes from a click with targeting, a record, a sale, and even is the capture of email.

And as the subject is e-mail capture it is indicated that squeeze pages stay out of the common flow of the site. To enhance the conversion of all the elements of the page that need to focus your reader's attention on the offer and only the offer.

Elements that cause distraction should be avoided. Links are not included that allow the user to leave the page. Because, of course, you don't want the user to leave the page.

Now let's talk about Design applied to conversion.

Design applied to Conversion

design applied to conversion

David Arty explained in the article Design for conversion on techniques that enhance the purchasing decision-making power of a "targeted audience" and conversion.

These include encapsulation, contrast, direction, use of white space, minimalism and the use of mental triggers. All this combined with the eternized concepts of Web design contribute to achieving the goals set.

Now take all of this and leverage with segmentation, testing, and continuous improvement of design decisions. It's a real "Kaizen" applied to Design avoiding waste of opportunities through continuous improvement.

And we come up with that issue addressed at the beginning of the article about the anesthetized professional who plays to meet the table. Do you know the difference between this trained professional for the one who executes champion projects?

It's just that those who design winning sites focus on optimizing conversion rates with continuous improvement of design decisions and go even further: they test versions of their interfaces to validate which achieves the best results.

Then run tests.

"Being able to quickly figure out what works and what doesn't can mean the difference between survival and extinction."

Hal Varian, Google's chief economist

When you test you can keep what is working and change what is ineffective in an interface by applying continuous improvement until you prove the growth of the enterprise. This goes against the concepts of the Scientific Web Design nailed by Convertion Rate Experts.

Advantages of using A/B tests

  • They are practical;
  • They can achieve higher conversion rates;
  • Requires less traffic;
  • The result gets faster,

There is also another version called Multivariate Testing.

Multivariate tests use the same mechanism of comparison and measurement of elements of the tested interface, but it has greater complexity, because it uses a much larger number of versions of elements to be tested and how they influence others.

It is indicated when you have a lot of traffic and a strategy of refining pages that already perform well.

Procedure of an A/B Test

A/B testing can be used in email marketing tools to define which email has the most openness or clicks, in sponsored ad campaigns and mostly on pages.

To exemplify we will describe how to proceed on a squeeze page that is the most used format for capturing user data.

First thing is to build a control page, the template page (A) that will serve as the basis for pages with variations.

From the control page you build an identical clone that will be the variation page (B). What will change on this page will be the item you will choose to be changed and confronted with the control page. You have many things to test, but you will choose one variation per test.

Start with an element that is highlighted in the interface, or an element in which the user interacts, (such as the color of a button, for example) a visual aspect or text that stimulates some emotion in the user.

What to test?

Generally the variations tested are as follows (Not necessarily in this order):

  • Titles;
  • Subtitles;
  • Descriptions;
  • Calls to action;
  • Images;
  • Video;
  • Interface colors;
  • Layout style;
  • Forms;
  • Social proof.

Once the two pages are defined and which interface element will test, the test starts using the tool that best appropriates your need (See next topic).

You must stipulate the final parameters that will determine the winning version. Among them is:

  • Generate traffic from at least 100 to 200 unique visitors for each page version. Ideal number above 1000;
  • Ensure the duration of the test for at least one to two weeks;
  • Ensure a confidence level of at least 95%. Talking about trust level requires an entire article. I suggest that read this article and also use this tool that assists in the calculation http://drpete.co/split-test-calculator. Until the confidence level is not reached it is not indicated to determine a winning version.

And when a version wins?

It's time for continuous improvement. Choose another type of variation to test and from the winning version that will now be the control page. Build a new variation page and restart a new test.

And you can test a lot more things.  There is an article by a great blogger named Neil Patel where he describes about 50 a/b test ideas [click here to see]. I suggest you also read this article after you finish reading this Chief article.

Testing Tools

They exist dozens of tools for tests with different costs. For some it can be very expensive, for others it is not. It also depends on who will assume the cost of the tool.

However for you who work independently and want to test your first interfaces before going to a more robust tool, I suggest a free tool, but that fulfills the task.

It is the experiment tool of the Google Analytics.

google analytics experiments

With this free tool you can create experiences. By setting a goal to "destination" you can evenly distribute traffic between two landing pages to be tested, the original and the variation. You can also determine the duration of the test and the confidence level.

The path within the interface to perform the tests is to go to the "Behavior" side tab, then "Experiments", and then click the "Create experiment" button. Just follow the interface guidelines.

Resistance to running tests

According to Conversion Rate Experts, there are three reasons why some professionals don't run tests:

  1. Avoid accountability;
  2. People who work for agencies may not want their performance to be measured frequently;
  3. For first-time customers, design focused only on aesthetics is easier to sell.

I would include one more:

The unconsciousness of technical and operational disability. Do you remember that? In this case, the Design applied to the conversion.

Case study

In the course of this article we show some cases of conversion optimization through A/B tests. Cases with different values of increments in the conversion rate. As an example, to remember, the case of U.S. President Barack Obama's campaign with 40,6% increase in the conversion rate.

These studies show that you can also achieve an improvement in conversion rates for your customers and also for your company, why not?

In the title of this article I speak of increasing its rate above 52% which is perfectly possible. You might get more or even less. But one thing you can be sure of:

If you never test variations of your layouts you will never know if you could increase your conversion rates.
And even an increase of only 1% can represent a great result when it comes to a site with high traffic.

I want to show you now one of the experiences we've had over the course of this year using Conversion Design. It is important to note that we use important design concepts such as Segregation (shape) and Contrast (Color Theory).

solidarity ebook case study

This year the Chief of Design had the opportunity to launch and market an e-book called E-book Solidarity of Fluency in HTML & CSS. This material consists of helping those interested in learning Front-End to take the first steps in building web pages, through HTML and CSS. It also has the intention, and will always have Chief of Design exist, to raise funds to be 100% reverted to GRAAC.

The launch went well and with good repercussion and nothing more obvious than optimizing our ads and our capture and sales pages. That's why in the first few weeks of release we tested two email capture page versions of people interested in the product. These pages in addition to capturing emails directed interested parties to the sales page.

Because the action call submit button is an important point and usually a starting point that we make in the Chief of Design it was chosen to be tested.

O the color of the button on the original page (we will call VERSION A) itself is already a highlighter. We segregate this element using the green color to arouse the user's attention.

Note the following figure that even obeying the standard palette of the visual identity of the e-book we believed that its the contrast along with the other elements of the page could contribute to calling the user the action.

landing page-A

But we didn't see a problem using another color outside the identity pattern on the button if it increased the conversion. Therefore we project the variation of the page (VERSION B) with the orange button, which in addition to maintaining contrast directs even more user attention to call of action thanks to the segregation of the element (A principle of Gestalt) through color.

See in the following image how the button stands out even more:

landing page B

Thanks to this outstanding effect it was proven through A/B test that the orange button was more effective. And it provided an increase in 52% conversion rate more than green.

Conclusion

An important observation before proceeding with the conclusion.

Everything that was written above I considered that at first the content of your client, and even yours (why not?), should be of high quality for conversions not to be in vain.

Proceeding:

You may find that this wave of Landing pages can be an obsession or fashion. I understand that's what we have for today.

We survive sites with endless flash introductions, site in tables and other waves to reach the expected audience. But currently working with content marketing and using design applied to conversions has proven very efficient to attract followers. However this requires testing, observation, adjustments and developing such Landing pages.

I tried to show through published studies that it is possible to improve results through A/B tests. If not, maybe you can do some experiments. If the customer does not want to test use, in addition to their conceptual argumentation, numbers.

Working with conversion optimization is a great way to get numbers.

Now tell me: Have you performed or ever performed tests on customer sites to optimize conversion?

Leave your comment, compliments, criticism sands and curses Right below. And if you liked the article, share it with friends!

I also accept chocolates!

Big hug!

References:

https://www.idealmarketing.com.br/blog/teste-ab/

http://arquiteturadeinformacao.com/pesquisa-com-usuarios-2/tipos-de-teste-com-usuarios-explicados-em-gifs/

https://blog.optimizely.com/2010/11/29/how-obama-raised-60-million-by-running-a-simple-experiment/

https://www.chiefofdesign.com.br/design-para-conversao/

https://www.chiefofdesign.com.br/gestalt/

https://www.chiefofdesign.com.br/teoria-das-cores/#subtitulo06

http://www.conrado.com.br/lista-de-ferramentas-para-testes-multivariaveis-e-testes-ab/

http://www.conversion-rate-experts.com/design/

http://www.hytrade.com.br/qual-versao-ganhou-entendendo-o-nivel-de-confianca-do-teste-ab-de-e-mails/

http://marketingland.com/your-homepage-is-the-landing-page-65502

http://neilpatel.com/2015/02/24/the-definitive-guide-to-creating-high-converting-landing-pages/

http://www.pardot.com/blog/abcs-ab-testing/

http://www.steelhouse.com/blog/campaigns/do-your-campaign-tests-pass-the-test/

Ed Francisco

hello! This is Ed Francisco, a Chief of Design since its first lines of content and codes.

Speaking of code, I believe HTML is the most remarkable web technology that has allowed me to get to where I am, and also write these lines about me for you.

I have a degree in Production Technology (this is where I got to know HTML) and a Technician in Digital Production, Web and Multimedia (where I improved my knowledge of HTML).

I'm from São Paulo from the East Zone. I ventured trying to unravel the mysteries of the web since 2008.