Homepage Battle 2018: Which Homepage Do You Think Will Win?


By Web Designers Academy

Think you can predict the future? Let’s see how good you are…

We just relaunched the Web Designers Academy with a greater focus on consistently producing more useful / interesting content, easier menu navigation and an overall more modern design. A large part of this new design effort is the design of the homepage and… well… we both had different ideas as to what it should look like.

So how do you solve the problem of two married web designers that have drastically different ideas as to what the new homepage design should look like?

The answer: A/B Testing

Wait a minute, what is A/B Testing? A/B testing (also called split testing) is when you compare two versions of a web page to see which one performs better. You show the variations (let’s call them A and B) to similar visitors at the same time. The one that hits the “goal” more is the winner (more on the “goal” in a bit).

The Four Homepages

We each created two versions of the homepage for this test and below is a description and a screenshot of each one.  Since we are running Google Experiments and tracking visits we can’t give you an actual link to see the design (cuz we don’t want to screw up the results).

NOTE 1: These screenshots were taken when the homepages were about 97% complete so a few final tweaks still needed to be made.

NOTE 2: My full length screenshot tool got a little weird, so disregard those horizontal bars you see on a few of these screenshots.

Homepage #1 (Amy)

This homepage has a full width animated banner (computer related photos fading in the background) with our logo on top of it. There is a subscribe form then featured posts, the latest posts and a light colored sidebar with some tools we highly recommend.  In the footer is the subscribe bar again then a few links.

Homepage #2 (Amy)

Starting with a dark navigation bar at the top the logo then appears on a white background row followed by the subscribe form. Once again a featured image block appears then a recent posts section. A similar sidebar appears except this one has blocks of color with white headings. In the footer is the subscribe bar again then a few links.

Homepage #3 (Ian)

Starting with a blue to green gradient row with the logo, menu and tagline in white over it.  The subscribe form has a unique dark pattern and an orange button. Below that is a masonry grid with about 12 of the recent posts on it. Below that are the recommended tools and a large footer with a search bar and columns of useful links.

Homepage #4 (Ian)

At the top is a logo and navigation over a dark bar, followed a the same blue/green gradient row with a tagline and a button that links down to the subscribe form. Below that are the featured posts, recent posts and a sidebar with a dark background that includes a search and our recommended tools. Then a gradient row with our subscribe form and then a large footer with a search bar and columns of useful links.

Now What?

Well now we are going to be running this A/B test (I guess it’s really A/B/C/D/ Test) until May 15, 2018 using Google Experiments and we will crown the winner based on these two specific criteria:

  1. Number of new email subscriber signups (the more the better)
  2. Bounce rate (the lower the better)

Which ever one has the most email signups and the lowest bounce rate is going to be the NEW Web Designers Academy homepage. After the test is over we’ll publish a followup to this post with the analytics results of this new homepage test and show you all the data.

So what do you think? Respond in the comments below with your prediction as to which homepage will win and why.  

BONUS POINTS: Let’s make this more interesting… if you have a great idea as to what the winner should also get add that to your comment… No dishes for a month? Back rubs for a week? No cooking duties for the year? What should a wife get for totally kicking her husbands ass at designing a new homepage?