Designing the Story for our Readers
We stripped down our digital story page to a blank canvas. Then we put only the important parts back.
What makes a good story?
The writer George Saunders explores this question in his excellent book, “A Swim in a Pond in the Rain: In Which Four Russians Give a Master Class on Writing, Reading, and Life.” Saunders recalls asking a stoic New Yorker editor what it was that made a story of his successful.
“Well, I read a line. And I like it…enough to read the next.”
We at The Atlantic just launched a new story page that aims to deliver an undistracted, engaging story experience that showcases our award-winning journalism. An experience that carries readers to the next line. The next story. And then, connecting deeply with the authors who wrote the story and connecting them with bold, new ideas.
These principles — removing obstructions, presenting ideas clearly, and delivering a premium, reader-first article experience — powered the new design. It’s built on a state-of-the-art foundation and allows our engineers to quickly adopt new features based on what our readers and editors love.
How did we get here?
It all started with a hunch. We knew that our story page — the central place where subscribers and first-time readers alike interact with our journalism — needed to do more work for us. It was an inflexible system that couldn’t respond well enough to our editorial ambition and business goals. We had a dated two-column layout that reserved one column for the story, and another fixed “right rail” column that housed ads and a module to promote stories. While a mainstay in the news industry, there’s long been a problem with this approach: these two columns had little to do with each other, and were completely inflexible. Due to the never-changing placement, readers became conditioned to ignore ads in that area. And because we promoted stories near the top of the page, readers weren’t interested in clicking off the story they were already on. It was also becoming incredibly difficult to develop new features in this system. What could a more integrated and reader-aware experience look like?
So we listened. Where was the page falling short for our readers? What were others in the industry particularly excited about? What ideas were we excited about, but limited in executing by our current tech stack? The team embarked on a discovery process that included readers, media and tech organizations, and a host of internal team members.
The feedback from these sources was clear: our readers wanted a better understanding of our journalism, and more opportunities to connect with our stories. This includes understanding when writers have a particular expertise or bring unique background to a story, and adding levers beyond headlines to understand what they might gain from spending time with a story.
We heard from readers that The Atlantic revealed itself to them over time; while beautiful in sentiment, we knew we needed to create a powerful first impression with new web and mobile visitors.
Interviews with peers at other media organizations revealed a similar ambition across news and product departments. We heard about modular architecture that would allow customization, facilitate testing, and unlock a faster engineering cycle.
We adopted these patterns to allow more creativity for our editorial teams and give our subscriptions teams more chances to experiment and adopt successful patterns. We sought the experiences of more than 50 stakeholders on our internal teams, and heard that they craved more flexible visual storytelling opportunities and testing opportunities for editors, readers, and advertisers.
Our small, cross-functional team of product, design, research, engineering, and editorial colleagues took this intel and crafted a strategy to solve our most pressing reader, editorial, and business challenges. We workshopped a variety of approaches, prototyping quickly and mobile-first to stay rooted in how our readers most often read our articles.
Emphasize who we are
Our new article styles reflect what readers tell us they love about us, and what we want to emphasize. The styles introduce an elegant treatment for headlines, including a generous amount of focus space to keep readers hooked, contrasted against a more modern-feeling monospace look. The combination of these elements results in something distinctly Atlantic: evoking classicism while highlighting radical moments, including with our art. We work to be respectful of readers’ limited reading time and emphasize the beautiful illustration style that our design team is known for. This enables us to put more emphasis on the visuals and make our stories feel more uniquely “us.” Communicating to our readers what we already know about our editorial team: every story is and should feel premium.
And through clear and structured hierarchy of information, color contrast and consistent labeling, we’ve ensured that our stories are accessible for all readers of The Atlantic.
Building a system
The solution we landed on was to move away from the idea of “templates” and toward a system of components that can be curated at will. Templates can work well because they limit decision fatigue for designers and editors, but ours were too limiting: We had long been constrained to one standard template and one feature template, with two separate stylesheets and different functionality for each. This is common across publishers — to create a fixed treatment for a particular format, but it’s incredibly cumbersome to develop new features and make them available to editors.
That’s why we created a singular, flexible, modular page that is easy to adapt to the story an editor wants to tell. Instead of creating artificial distinctions and gating features, all our storytelling tools are accessible to our editorial teams with every story.
With this unified, component-based system, our editors can “tune up” individual sections of the page. Now, editors can swap in header treatments to signal an in-depth feature, a cover story, a photo essay or a poem and improve stickiness with our readers. We can tell bolder, more visual stories and better signal to readers the diversity of stories we tell. And we can learn from new components that our experimental storytelling team dreams up and accommodate those back into our core storytelling tools.
It’s not just a win for our editors — our engineering and growth teams can test and evolve more easily in this system. When we make a change, that’s applied to every story, and doesn’t need to be rebuilt multiple times. Testing subscription messaging and visual treatments for our consumer revenue business is drastically streamlined.
A cleaner reading experience
During the discovery process, we interviewed Harald Dunnink, the creative director and founder of the design agency Momkai. The design philosophy behind his Amsterdam-based firm is to create “good distraction.” That is, in a world filled with things competing with your attention — a news alert, an Instagram mention, a sale on those sneakers you’ve been thinking about for weeks — how can we distract readers from the noise and focus their attention on the story?
His philosophy of cultivating calm and visual respite stuck with me because it’s core to how we approach storytelling at The Atlantic. We present stories in a simple and elegant way, we’re intelligent yet approachable, we want to provide a focused and captivating reading experience.
To accomplish this, we’ve implemented a single-column article body to present those ideas undistracted. Nixing the fixed right rail also integrates advertising in a more reader-friendly way — no longer will two competing ads clash as you’re deep into an Ed Yong article.
We’ve also carved out spaces in the margin and throughout the article to serendipitously present readers with new and engaging stories. We’ve given our subscription teams more tools to test newsletter module design and placement.
All of this also gives us more flexibility to integrate photo treatments and other future tools we haven’t dreamt up yet.
And there’s much more to come. In the coming months, we’re introducing more tools for our newsroom and rolling out new features. If this sounds exciting to you, consider joining us!
This project was not possible without: Ana Carano, Sarah Yager, Emily Goligoski, Mollie Leavitt, Chris Chester, Ellie Budzinski, Greg Emerson, Andrew Phelps, Jim Quindlen, Ellen Cushing, Caroline Smith, Peter Mendelsund, Melissa DePuydt, Erica Irving, Tolu Edionwe, Gerald Rich, Frankie Dintino, Sebastian Podesta, and I see the lights turning on in the distance during this speech, there are so many people still left to thank! It might be quicker to name folks at The Atlantic who weren’t involved. Also to the organizations that lent their valuable time & expertise to our interview questions: ProPublica, The New York Times, The Washington Post, NPR, Politico, Bloomberg, The Marshall Project, Upstatement, The Wall Street Journal, The Correspondent. Special thanks to all!
