Article Scroll on topgear.com

The world’s greatest car website

Background

Take a successful test of mobile based Article Scroll and implement for desktop/wide format users.

The Challenge

  • How to¬†accommodate the many types of ads we have
  • Optimise user experience when reading with ads
  • Pursue marketing team to reduce volume of ads

Research

What is article scroll?

  • A long scrolling page with several articles
  • This is to encourage user to consume more content beyond chosen article

Current logic and behaviour on mobile

  • Load maximum of 5 articles in each page
  • Contains latest articles from ‘First drive’, ‘News’ and ‘Reviews’

Types of ads

After several meetings with marketing team, below is the list of ad we should have on a article scroll page:

  • 1 leaderboard for each article
  • Subscribe to newsletter widget

  • 2 MPU or 1 DMPU for each article

  • Outbrain (repeated 2 times)

  • ‘Minute’ or ‘Teads’ on a news article
  • ‘Motoring’ widget
  • Related content
  • Latest content
  • Billboard

Design Process

Collaborate with developer

  • Few sit down sessions with developer to understand the behaviour of each ads, what can be changed and what cannot

  • Understand the behaviour on each type of article

Collaborate with SEO manager

  • Understand SEO strategies on the page

Event logic

  • On a rare scenario, what happens if there are only 2 articles

  • What happens for user with ad block

Wireframe

  • Wireframe with reduce ad

Prototyping (animated)

Building animated prototypes to show behaviours on transition between articles

  • With animated prototyping, it helps to gain mutual understanding with developer on the behaviour of transition
  • Ask marketing team to reduce ad again within animated prototype

Hi-fi UI

Documenting

Current project stage – awaiting final decision from commercial team

Designed during my full-time employment at BBC Studios who owns full rights to the project.