The New Yorker Homepage Redesign
PROJECT OVERVIEW
In April 2020, our product design team was tasked with a major pandemic project--redesigning the New Yorker’s homepage. With a limited timeline, we didn’t want to completely redesign the site, but we did want to to keep and refine what worked, and cut what didn’t. In addition to a new design, our goal was to re-platform the page onto Conde Nast’s existing design system so that we could innovate faster.
CREDITS
Senior Designer / Meredith Hattam (me). Design Lead / Joseph Bergdoll. Copy Lead / Sophie Tahran. Product Leads / Chelsea Farnham and Madeline Welsh. Research / Raquel Hamias and Isha Patnaik. Engineers / Jheanell Elliott, Aaron Zick, Yongzhi Huang, and Suneeth Levin. Creative direction / Nicholas Blechman and Aviva Michaelov.
HOMEPAGE BEFORE REDESIGN
Before its redesign, the previous homepage wasn't condensed enough for readers, especially on mobile. Note the white space between items and the use of the font Irvin without a contextual dek.
What informed our work
Problems we faced included a lack of user engagement as readers scrolled down the page, as well as not enough content density for a digital representation of a historic print magazine. As the entire homepage is thoughtfully curated by a team of editors, this meant that their hard work wasn’t as accessible as desired.
First, we worked with our research team to figure out what was working on our site and what wasn’t. The key thing we discovered was that our page was just too long for most readers, who weren’t making it further down the page (especially on mobile.) Most readers reported knowing how to find things, but there wasn’t consistent logic that helped them know when and where.
Additionally, we found readers were less likely to click on stories that didn’t provide much context or were typeset in Irvin, the New Yorker’s signature font.
We also found that things readers were looking for—like heavy-hitting contributors, cover art, and other features—were hidden further down the page, or displayed in a way that didn’t make sense. Our goals with this project were to drive more readers to stories and also spend more time scrolling through the homepage to find exactly what they were looking for.
Problems we faced included a lack of user engagement as readers scrolled down the page, as well as not enough content density for a digital representation of a historic print magazine. As the entire homepage is thoughtfully curated by a team of editors, this meant that their hard work wasn’t as accessible as desired.
First, we worked with our research team to figure out what was working on our site and what wasn’t. The key thing we discovered was that our page was just too long for most readers, who weren’t making it further down the page (especially on mobile.) Most readers reported knowing how to find things, but there wasn’t consistent logic that helped them know when and where.
Additionally, we found readers were less likely to click on stories that didn’t provide much context or were typeset in Irvin, the New Yorker’s signature font.
We also found that things readers were looking for—like heavy-hitting contributors, cover art, and other features—were hidden further down the page, or displayed in a way that didn’t make sense. Our goals with this project were to drive more readers to stories and also spend more time scrolling through the homepage to find exactly what they were looking for.
Creating a better reading experience
DRAG TO VIEW BEFORE (LEFT) / AFTER (RIGHT)
We added context for a more engaged audience
On the previous homepage, most of the New Yorker’s stories were typeset in Irvin, with additional synopsis. While this looked beautiful, it didn’t make for quick scanning on the web or an introduction to a must-read story. We introduced a typographic system that better incorporated TNY Caslon, and decided to almost always include contextual decks for a better reference point. As a result, we saw clicks go up across stories on the page.
BEFORE
Stories took up a lot of real estate when scaled down to mobile, meaning visitors were less likely to navigate through more of the site.
AFTER
We condensed all stories except for those featured at the top of the page into an easy-to-scan structure.
Density is key
Our previous homepage likely saw less clicks to stories because it lacked content density, especially on mobile. We decided to make almost everything on the page as condensed as possible to give readers the chance to choose from multiple stories at once. So far, it’s made a big difference in how many readers are making it down the page.
A focus on flexible packaging
We designed all components with multiple use cases in mind, particularly in regards to story packaging. Previously, there wasn’t a consistent design system for featuring groups of related content--important when featuring breaking news or special features. Now, editors have several options for highlighting packaged stories across the page.
DRAG TO VIEW BEFORE (LEFT) / AFTER (RIGHT)
A universal grid
Design elements did not align to a consistent grid on our previous homepage, causing it to feel cluttered as readers moved down the page. We adjusted our new site to use an 8px baseline grid and a 12-column vertical grid across all components, which made for a more streamlined experience.
Showcasing signature features
NO COVER, TYPICALLY LATER IN THE WEEK
Example of the top-of-page content on a day no cover is featured
Making it feel more like the magazine
The New Yorker’s covers are culturally iconic. One of the first major visual changes we made was moving them up to the top of our site. Previously, the cover art lived at the bottom of the page, which got almost no engagement from readers. Now, editors can choose to feature it or display more stories instead, depending on the day of the week. Additionally, a cover highlight and synopsis of this week’s magazine is featured prominently in its own section on the page.
WITH COVER HIGHLIGHTED, TYPICALLY AT BEGINNING OF WEEK
To showcase each week's cover art, editors now have the option of featuring it prominently at the top of the page.
A DEDICATED SECTION TO THIS WEEK'S ISSUE
Example of the "From This Week's Issue section" that remains persistent on the homepage, even if it's not featured at the top of the site
Contributors and Cartoons
The New Yorker is renowned for its contributors. On its previous homepage, they were featured, but not in a way that allowed for much flexibility. We decided to highlight more contributors in a more compact way so their writing could draw readers in. This section also became much more condensed on mobile to allow for featuring multiple contributors at once. And for a moment of levity in a sea of serious reads, we decided to feature a Daily Cartoon next to our contributors section. This cartoon swaps out each day and is instantly recognizable as the New Yorker.
The finished product
We launched the new website in January 2021, and have already seen readers linger longer in key areas of the site, as well as scroll further and engage with content they did not previously. Subscriptions are up as well. Additionally, we won glowing feedback from the New Yorker staff, with editor-in-chief David Remnick noting the homepage was “terrific, tighter, and more elegant--it's a fantastic step forward.”
