Redesigning top stories

Redesigning top stories

Client
The Economist
Project title
Redesigning top stories
Disciplines
Product designUXUI

I worked with The Economist to create better home experiences across web and mobile apps. In this case study I’ll focus on the redesign of the Top Stories module on the web.

The challenge

Editors wanted greater flexibility to better represent the relative importance of stories. Most notably they were lacking the ability to give really big stories the impact they needed. We also recognised the need to make several other improvements for readers, which you’ll see below.

Approach

Prior qual and quant research helped us make progress quickly. We worked in a highly collaborative manner with editors to solve their problems and enable them to present the picture of the world they wanted to each day. We launched features iteratively, measuring results as we went to increase confidence in decisions.

Layout

It was clear that we needed to improve hierarchy and layout. We wanted the lead story to be, well, the biggest. This was an issue for the previous design. It had a confused hierarchy and an arrangement that led to lots of awkward white space.

Before and after shown with a 12 column grid.
Before and after shown with a 12 column grid.

The previous layout had some articles span across several columns and in places a left/right alignment of title and image. Our new layout did away with this, instead we stacked everything in vertical columns. It made it easier to see which image was connected to which title and resulted in a more efficient use of space. This meant we were able to increase the amount of stories we could display without increasing the height of the module.

Most notably, we retained a ‘magazine-like’ feel—it looks full without being overly dense. That density is a common pattern across many daily newspapers (e.g. Wall Street Journal), this works for the publishing cadence of daily papers but not for a weekly magazine like The Economist.

The new top stories layout
The new top stories layout

Looks good on mobile 👌
Looks good on mobile 👌

Big flex

In the past, when big, world-changing stories broke, the editors felt that they weren’t able to present the stories with the necessary impact.

We devised a three layout system where the lead story could grow to command more space on the page. That’s a simplified way to describe what’s actually happening, but that’s how we pitched it initially as per the diagram below.

A rough early model for the flexible top stories layout. We used simple diagrams like this to talk about the approach and concept.
A rough early model for the flexible top stories layout. We used simple diagrams like this to talk about the approach and concept.

Anti-clockwise from top left: Regular, Plus, and Takeover layouts.
Anti-clockwise from top left: Regular, Plus, and Takeover layouts.

More than stories

Above the Top Stories module we introduced a new feature called the Discover Rail. Previously, The Economist had relied on graphic banners to promote other bits content such as podcasts, newsletters, and interactive data pieces.

Looking to our design principles we wanted to take a content-first approach to promoting either long-running content or content in other formats. The result was the discover rail, a slim but prominent module that displays the top three bits of content that aren’t top stories. Things like the popular Covid-19 podcast ‘The Jab’. It’s worth noting that this isn’t an original idea, both the New Yorker and the New York Times take this approach to promoting similar kinds of content.

The Discover Rail sits above top stories promoting selected content
The Discover Rail sits above top stories promoting selected content

The world in a sidebar

Within the top stories module we introduced a new component called ‘The world in brief’. It showcases the latest updates from the aforementioned portion of The Economist’s Daily Briefing. It’s a complement to the stories that surround it and, amongst other things, allows the editors to respond to breaking news in a light way on the homepage before full articles are published.

Though it looks like a sidebar on desktop, we designed it to be a flexible component that can be swapped out for articles as required.

‘The world in brief’ component in various widths.
‘The world in brief’ component in various widths.

Time team

It’s easy to look at a design like this and only see the simplicity of it. Behind this glossy veneer is a sea of diagrams, research, weekly update decks, conversations, stakeholder meetings, sketches, and more. All of which helped us to keep moving forward and making good decisions that resulted in a measurably better homepage.

Why am I saying this? Well, because all of this behind-the-scenes stuff that never sees the light of day takes time. I’ve seen other organisations spend years working on redesigns just like this. Whilst there is still more to be done, the majority of changes to the homepage have been conceptualised, designed, and shipped within six months.

This is the direct result of a team that is empowered by leadership to work iteratively—testing and releasing features as they go. The team and I were also fortunate to work in a highly collaborative manner with Lead Editors. The sum of that is a fast-moving team that can make considerable improvements in months not years.

Top Stories redesign: before and after
Top Stories redesign: before and after

Team

This was a team effort, lead in part by myself in the early stages and executed to perfection by the wonderful in-house product team at the Economist. The team was...

Design Sydnee Watlow · Product manager Sam Judge · Lead Designer Mark Mitchell · Lead Designer Sophie Majecki · Designer Beatrice Tamagnini · Designer Engineering Kristy Nolan · Engineering Manager Ben Paddock · Senior Engineer Matthew Couchman · Senior Engineer Dana Ciocan · Senior Engineer Leadership Adam Morris · Head of Design Holly Cook · Head of Product Deep Bagchee · CPO

More projects

Projects database