top of page
Conde Nast

Ad Ratio on Gallery Page

My Role

I led the user experience and interface designs of this project.

During this project, I joined as a solo product designer in a small multidisciplinary agile team.  I not only worked closely with the product manager, developers, and data analyst but also collaborated with editors, marketing teams, design system team, and advertising team.

Background

Since 2017, Conde Nast has been launching the new design on Vogue and GQ across the global markets. There was only one gallery template and the advertising consumption, unfortunately, did not perform as expected. It critically impacted the business revenue. ​

The Challenge

Various stakeholders from the different markets, audiences and editors

Since Conde Nast is a global company that operates in 31 markets. It is impossible to find one perfect solution and make everyone happy. We were facing so many stakeholders from different markets and different users which was a significant challenge to make decisions.

Empathise and understand

What is the problem ?

In order to understand more context and get overall business objectives aligned, I started multiple conversations with the design system team, the previous design team, various marketing teams (Britain, Spain, Italy, and India), the advertising team, and editors.

My learnings

User Experience 
  • Users didn't notice the pagination - 31% of users bounce before they scroll over the bottom advert to see the pagination

  • Users didn't want to click

  • Users got confused after clicking to the next page since it directed to the top of the page to load

  • First time visitors have low content view-ability because of the cookies message and huge top banner

Data Team
  • The introduction is hidden after 3 lines which is a negative impact to SEO

Advertising team & Dev team
  • The ad tool generates up to 35 adverts which was the key reason it was first designed as pagination. 

  • Users don't click to the second page which made the ad rate performed poor

Editors & Marketing teams
  • Britain & Japan teams tend to have long copies in the introduction and image description. 

  • Italy market tends to create big galleries which may have more than 100 images in one collection

  • Some editors misuse the internal platform

  • The featured image is too big which readers have low content viewability

  • Almost every market has feedback that they need more than one template to support different types of storytelling

Ideate and Design

The potential solutions

After analysing these insights, I came up with three design directions.

1.   Improve the existing paginated template 
  • Reduce the height of the gallery topper so the user can see more content when landing on the page

  • Add in body copy section to encourage editors to use gallery template in long story scenarios 

  • Redirect to the gallery level on the next page to improve user experience and avoid the confusion

2.  An infinite-scrolling template

I created an infinite-scrolling template by removing pagination from the existing template. Also worked with the advertising team to configure the new advert ratio logic

Infinite-scrolling template with grid view

I also design a grid view feature for larger album scenarios

Gallery Last Page (Small)-1.jpg
Gallery Last Page (Small)-2.jpg
3.   Create more template alternatives with advert positions

​

Frame 3.2.png
m_V-article + lightbox 2.8.png
Validate the designs

Would it work ?

A/B testing of Infinite-scrolling template

Considering the resource and efforts it may take, we decided to start with the second proposal - removing the pagination. 

​

We converted 3 galleries including different lengths of the post (different numbers of images) on Britain GQ to infinite-scrolling and compared the performance to the paginated layout.

Highly positive result

When analyzing the 3 galleries we can see image views are up 257%. When analyzing a single 30-image infinite gallery, we can see 51% of users reach the end of the gallery - compared to 31% when it was paginated.

Final outcome

The impact

Encouraging other markets to use the template

Given the positive result of the A/B testing, many other markets were also interested in the infinite-scrolling template.  British Vogue, British GQ, and Vogue Spain had a selection of galleries to test with their audience first.

+225%

Images view increased from 8 to 26

+84%

Ad ratio (impressions per gallery) increased from 3.2 to 5.8

+3%

Viewability increased from 63% to 66%

The performance was extremely positive as expected.

​

The infinite-scrolling template was then rolled out globally and became the most used gallery template in Conde Nast.

View More Projects

  • Instagram
  • Twitter
  • LinkedIn

© 2022 Anny Chien

bottom of page