GV design updates and new homepage A/B test

What's up GV? I am Jer, the “Tech Lead” for the project, and my main job is building and updating the WordPress sites that make up GV. This post is about a variety of design changes that I deployed over the last couple of weeks, as well as a new “A/B” test that I'm launching today, which will mean the homepage shows different designs for the next little while while we experiment to see which is most effective.

The return to rounded corners

The most noticeable change is a pretty small one: All the “featured images” from posts that we use on the archive screens now have rounded corners.

screenshots of images with and without rounded corners

These screenshots show both the rounded corners, and the new default shape for featured images, as described below.

This is a look that goes in and out of style as time goes on, and around 2010, GV had lots of rounded corners like this, but we went square at some point in between. Well, it seems 2022 will be the year GV goes convex again!

We haven't made everything round yet, and specifically images and other stuff inside posts still have square corners. We'll be updating those elements soon to make sure the whole site has a matching rounded feel.

Thanks to Filip N., our Managing Editor for pushing the idea, I agree with him that it gives a delightful feeling like you're looking at an old Polaroid photo, or a vintage TV!

“GV Promo Cards”: Clean new design for listing posts and categories

A more fundamental change is the switch to a completely new HTML+CSS (behind-the-scenes code) system for displaying the post “promo cards” that you see on the homepage and category/author archives. Basically all the places where there's an image, headline, and excerpt for a post. Mostly they still function the same as before, but look better, especially at different tablet and mobile sizes.

screenshots of the two design versions, old and new

Screenshots of the two versions. The differences are subtle, but aside from the rounded corners and shape of the images, you can also notice the wide, even space between each post and its image.

There are several subtle design changes that came with this switch:

  • More space between elements, and more consistent spacing all around images and text.
  • If the image is taller than the text it's next to, the text will now be centred vertically next to the image. If the text is taller, the image is aligned to the top of the text.
  • Images are now 4:3 format for desktop size, and square for mobile size, rather than being variable and changing their shape depending on the exact shape of the window.

I think it gives GV a breath of fresh are with the added space and clean, reliably-cropped images. We hope you enjoy it too!

A/B testing the homepage post archive format

What is “A/B” testing?

“A/B” testing means serving two different versions of your website randomly (an “A” version and a “B” version) to collect data and compare the two.

GV is using A/B testing more and more to assess new design ideas and evaluate how they impact visitor engagement and overall traffic, as tracked by Google Analytics.

Finally we have one more change you're likely to notice on the site, an A/B test of three different variants of the homepage design.

For the next little while, visitors to the GV English homepage will randomly be shown one of three versions: “Default”, “List Wide”, or “Grid”.

  • Default: This is the old design, with the posts on the left, and the “sidebar widgets” (Advox, Rising Voices, and The Bridge) on the right.
  • List Wide: This design removes the sidebar, and shows the main widgets in a grid above the posts instead. The main post list looks the same, but is centred in a wide, open space.
  • Grid: This design is like List Wide in terms of the widgets showing above the posts, but the posts themselves are shown as a grid as well, with larger images and three per row.

To see each of them in action on the GV English homepage, use the following links:

Screenshots of the three variants being tested.

Screenshots of the three versions we're testing. Click to enlarge!

Why these changes?

Our main intention with these ideas is to get rid of the sidebar on the homepage, because it gives the site a cluttered look, and we feel it makes it harder to focus on the list of stories.

Our suspicion is that List Wide and Grid will both perform better, and result in more engagement and traffic than the old design, in which case this test will confirm our ideas and let us know which of the two is most effective, at least from a traffic standpoint. If Default gets the most engagement, we'll know that we need to go back to the drawing board and reconsider our assumptions!

For what it's worth, our next target will be to update the space above the widgets and main posts, which currently has the “Featured posts slider” next to a widget. Once we've settled the main posts list, we'll be cleaning up the upper part in a similar way.

Which variant do you like best?

While we're definitely going to pay attention to the stats that come from the test, we're also eager to hear what the community thinks! Do you have a favorite out of Default, List Wide, and Grid? Add your thoughts in the comments below!

7 comments

Cancel this reply

Join the conversation -> Jer Clarke

Authors, please log in »

Guidelines

  • Please treat others with respect. Comments containing hate speech, obscenity, and personal attacks will not be approved.