主播大秀

The News front page is one of the 主播大秀’s most popular digital products. Senior Product Manager Holly Cook explains the recent upgrade of the page and assesses how well it’s achieved the project goals.

The News front page is something of a behemoth, frequently receiving well in excess of 100m page views from 18m browsers each week. Making significant changes to a product that popular is always challenging, and one of our main challenges as we undertook an overhaul of the page was to ensure we caused as little disruption to users’ news experience as possible. Over the past year, we’ve completely redesigned and rebuilt this page to achieve a set of user experience, editorial and technical ambitions. We’ve made the page much faster, clearer and more visual for millions of readers across the world.

What we wanted to achieve

The reasons for rebuilding the News front page can be split into three categories: technical, editorial, and user experience. On the technical side, we wanted to move the page to the Cloud to ensure scalability and to reduce our reliance on ageing in-house servers. We also wanted to build the page from components that could be shared across the 主播大秀, whether that be in News or from other products such as Sport or iPlayer, for efficiency and to work towards a ‘one 主播大秀’ technical goal. And we wanted to improve the page’s technical performance so that it is both faster and lighter.

Editorially, the goal was to enable our front-page editors to curate and present news content along thematic lines rather than in ways that correspond to the individual sections that the newsroom is structured around. We wanted to enable our editors to be able to mix and match stories from all over the newsroom when they were curating the page. In addition, we aimed to improve editorial’s ability to change the layout during major news events, and to more clearly promote the different types of content on offer such as our and Live coverage.

For the audience, who in contrast to typical News site usage are primarily viewing this front page on desktop devices (60% of page views), it was important to make better use of on-screen real estate by enlarging the page to full width on a 1280px display. For all users, the design goal was to make the page more visually engaging with better-quality images and clearer signposting, while driving users into content journeys and encouraging repeat visits. For mobile visitors in particular, we wanted to deliver faster load times.

The bottom line is we wanted to create a faster, cleaner, simpler, more flexible and more interesting page.

How we’ve gone about it

• Slice design

The new front page is based around repeated usage of several new ‘slices’: containers that house either 5, 7 or 13 stories. They run horizontally across the full width of the screen. When there are 13 stories present, editors can switch between four modes to dial up the volume and provide more coherent curation during major news developments. These slices are built in a way that ensures other teams can easily add them to their products and plug in their own content to quickly create a new module. For example, the General Election team were able to include four new slices on their Elections 2017 index to give equal promotion to top political news from each of the UK nations.

On the front page, we’ve configured our slices with an eye on balance and rhythm, to make sure more users find stories they’re interested in, and to keep people scrolling further down the page. The main news agenda is juxtaposed against the ‘Must see’ content, which is typically broader in focus and which in turn contrasts with the more weighty content of ‘Full story’ that follows.

• Promo design

Within each slice, story presentation differs depending on the type of content. We initially launched with just one method: an image, headline and optional summary text. Since launch, we’ve added a feature promo that has a stronger visual impact for in-depth analysis of stories, and a live promo that shows the latest updates on the ensuing live page. These different promo styles make it even easier for the audience to identify different types of content, and by setting expectations about each piece of content we are making it easier to decide what you want to read. We have more promo styles in the pipeline for other content types, as well as plans to multi-variant test (MVT) iterations of our existing promos. 

Other design tests carried out on users included multiple variations of font size on our top stories during the rollout of the 13-slice module. We found that during exceptional news events font size makes very little difference to engagement, but on more ‘normal’ news days a larger font on the main news story more clearly communicates the hierarchy of the page and thus attracts more users to that news and its related stories.

• Further personalisation

Frequent users of the page will note we also added a second component of personalised news. In addition to the old page’s local news, which presented three top local stories to those users who set their location in the page, the new page also offers regional news based on your selection of UK nation: England, Scotland, Northern Ireland or Wales. So for those wanting a more representative overview of news affecting them, the new page now offers a wider range of global, national, regional, local and broader interest news.

• The rollout

In order to minimise disruption to users, we steered well clear of a big bang release and instead opted to make many incremental changes to the previous front page. We gradually replaced multiple old modules with single new slices starting from the top of the page, until such time that it was agreed we should start migrating our domestic and international audiences from their old page to a new page where the new slices were already in place alongside further visual and technical upgrades. The migration itself involved redirecting audiences in steps, starting with 1% of the audience, then 5%, 10% and so on. Users were automatically redirected to the new page with no possibility to opt out as the old page needed to be deprecated.

What impact it’s had

It’s good news. The front page is now better at getting people to content: bounce rate (the proportion of visits that result in a user leaving the 主播大秀 News site without visiting any other News page) is down 2% and overall 26% of all article views in News are now driven by the front page, up from 22% on the old page. The page also does a much better job of getting people to video content, with 32% of video page views coming from the front page versus 10% previously. It is also making people come back more often: front page users now come back on average 9% more often during a week than they did with the old page design.

Regarding our technical goals, the new page is much faster and lighter. The first meaningful load on mobile devices happens up to 50% faster, lazy-loaded images load twice as quickly on mobile and 70% faster on desktop, and the total bytes downloaded onto users’ devices has been halved on mobile and cut 75% on desktop. All this while adding bigger and improved-quality images. Our lead engineer Joseph has written in more detail about this in .

What next?

We are continually striving to improve the page for our audiences to ensure that as well as understanding the day’s news agenda, our users are also finding content that is important and relevant to them, and their satisfaction with that experience encourages them to keep returning and consuming more content. We have various projects and plans underway:

• We are starting to experiment with pre-loading onward journeys so that people who click on a story have the gratification of it loading instantly;
• We have further multi-variant testing plans aimed at identifying additional incremental improvements to our promo strategy;
• A new type of slice is currently in development that will provide clear information and links for other ways to access and contact 主播大秀 news – via the app, newsletters and social media;
• Recent accessibility testing of the front page highlighted additional steps we would like to take to improve page navigation and content signposting.

As well as these next steps, the strong performance of the new News front page implies it makes sense to use it in more places across the 主播大秀, so we are working with other teams to explore what that might look like.