Design Update: Phase 2 of Testing Featured Posts Formats

Hi all, this is a follow-up to Design Update: Confirming the new post list format and launching a new featured posts test, so if you haven't read that yet, please check it out first!

Phase 1 Results

After almost a month of letting the first featured posts test run, the numbers tell a pretty compelling story: The large image slider, which is basically the old design, but full-width, is a lot more effective at getting people to click on stories when the site is at a desktop width.

Desktop Results: Slider dominates

As a reminder, here are the two versions on desktop:

Screenshots of the two versions

The original featured posts test variants on desktop. The sliding version on the left was much more likely to make people click on a story. Click to enlarge!

Note: We actually tested two different variants with sliders like the version on the left, but their numbers were so similar that it's not worth digging into the differences. The version on the left above was the most effective and also takes up less space, so we are considering it the winner.

Over 60% of the time, a viewer who saw the Image Slider version would click on a post in the slider, while less than 35% of visitors clicked on any of the posts showing in the Non-sliding grid version. That's a pretty dramatic difference! On top of this key metric, visitors who got the Image Slider version were also more likely to click on everything below and to stay on the site.

As much as I love the design on the right above, the numbers are decisive, it's not a good design for getting people to read our stories.

Mobile results: Grid is more effective

On mobile though, the story was very different. As a reminder, here's how the two versions looked on mobile:

screenshots of the same mobile site with different versions

The mobile versions are both more limited than the desktop versions, of course.

On mobile, we got opposite results: Around 50% of visitors clicked on a featured post in the Features Grid version on the right above, while only 30% clicked on the Features Slider version, and that trend matched other general metrics. Mobile users who got the version on the right were more likely to stay on the site and read more stories.

Conclusions after Phase 1

So what do I take from this? It's complicated! Clearly there's something about the slider  that is effective at desktop sizes, but it doesn't have the same charm on mobile. And clearly the grid version has something going for it, since it does well on mobile, but if nothing else, the specific layout we used on desktop just isn't a winner.

In discussing it, the Design Working Group decided that the most likely explanation was images. The sliding version on desktop had the largest image, with the huge, full resolution block of color in the slider. Compare that to the grid variant who's desktop image is less than half as big. Likewise, on mobile the grid version actually has a quite big image at the top. It's small because it's on a phone, but it's full-width and striking. Maybe its large images that draw people to click on our stories?

Phase 2: Duel of the huge images

So looking at what I'm now calling the Phase 1 results, we planned a second test that will try to confirm our suspicion: Pitting the current champion, Slider Panoramic, against a static grid layout that shares what we imagine to be the slider's main feature: A huge image.

Here are the two versions that this Phase 2 test will compare on desktop:

screenshots of the two new variants being compared

Phase 2 of this test compares the previous winner with a brand new static grid design featuring a huge image on the first post. Click to enlarge!

The new layout on the right is a variation of the old features grid, but of course with the first post showing an enormous, full-width image in a similar shape to that in the features slider.

The new layout also changes the display of the subsequent posts, showing 2 rather than 3, and using a panoramic 2:1 image format that matches the image above. By showing 2 posts instead of 3 we ensure that the featured posts don't blend together with the three Special Coverage widgets immediately below them, like they did in the Phase 1 features grid (check out the first image in this article to see what I mean).

Making the homepage as dynamic as possible

We are very curious to see how our readers interact with these two variants and which one is more effective. I keep being genuinely surprised by the results, even when I think I know how they will turn out.

Whatever happens, this work will ensure that we end up with a homepage design that makes the most of the fabulous GV stories created by our community of authors and translators!

While we wait for the numbers to come in, what do you think? Does one of these variants strike you as a natural winner?

Start the conversation

Authors, please log in »

Guidelines

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