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.