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.
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.
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.
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 of 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 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.
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.
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
