Flip through the latest issue of your favorite magazine in print. There’s a good chance you’ll find the organization and presentation of content more interesting than on the same magazine’s website. A lot more. Print magazines simply feel curated and varied in a way their digital counterparts often don’t. But is that inevitable?
Last year, when The Nation approached my agency, Blue State Digital, about a website redesign, one of the biggest challenges we aimed to solve was elevating the user experience of content discovery and exploration. In short, we wanted the new site to feel as curated for readers as print does.
To do that, we had to empower Nation editors to decide where and how to present stories. For editors generally, these choices form an important part of an ongoing conversation with readers. The job a digital platform must do, in their eyes, is facilitate a conversation that’s meaningful.
This proved difficult on the old Nation site, because the potential for editorial choice was so limited. In the old CMS, editors could really only decide which articles to feature in the hero, while the rest of the experience on the homepage and channel fronts consisted of articles listed in reverse chronological order.
If that sounds familiar, it’s because this is how content on many editorial sites is organized. Of course, there will always be value in communicating to readers what’s important or most recent. But Nation editors simply had more to say.
Enter Modular Design
We weren’t under the illusion that a website could offer the limitless design options afforded by print and still be a scaleable, maintainable solution. Creating a million different templates for every conceivable content situation was clearly not an option. But neither was creating a few standard templates. The former route would be too costly and unruly, while the latter would merely lead to a better looking version of the previous system, locking editors into decisions on content presentation that would feel right on some news days, less so on others.
So, what to do?
Luckily, we found ourselves working through this decision at the same time as others in the design community were responding to similar challenges. Like them, we were inspired by the potential of modular design. What does that mean exactly?
Leading proponents like Brad Frost are hard at work articulating the theory and practice of modular, or in his words atomic, design, while skilled designers at The Guardian have written about their ideas in an editorial setting. Here I’ll offer my own working definition: Instead of treating the template as the sacred unit of measure for web content, modular design means thinking and building in terms of a system of smaller, reusable components that can be pieced together like building blocks to form pages.
I had never explicitly designed this way, but it made a hell of a lot of sense in theory. Modular design seemed to be the best way to solve The Nation’s need for editorial flexibility. A complete set of modules, each offering a different way to organize and present articles, would enable editors to create varied homepage and channel front schemes through a drag-and-drop experience in the CMS. What’s more, modular design suggested a way to more efficiently evolve the new platform over time — through tweaking existing modules or creating new ones, rather than redesigning the site wholesale every few years.
Designing for Content
When Blue State Digital presented the idea of taking a modular approach to our partners at The Nation, there wasn’t discussion so much as total excitement. We raised a traditional templated approach as a safe alternative, but the editors saw the potential for curation, and communicating more meaningfully with readers, afforded by modular design. Our fates were sealed — we’d be exploring uncharted waters together.
The next question was how to organize content in ways that Nation readers would find engaging. We assumed from the outset that we would want to cover some standard things — modules to highlight the latest stories and most popular articles, for instance. But we discovered other opportunities. Conversations with Nation editors taught us how important it was for the new digital platform to relate back to the print magazine. They were also keen to highlight longer features and investigative reports, as well as Nation authors. Finally, editors wanted various ways to package related articles together, so that readers could dive into specific subjects.
Other content opportunities were uncovered through conversations with readers themselves. User interviews taught us that Nation readers are loyal because the magazine not only offers great analysis and commentary, but also a way to take action on prevailing injustices. That, anyway, is the promise of The Nation — an editorial institution that uniquely blurs the line between news and activism — but it’s one readers felt the old site did not make good on.
All of these ideas were crucial inputs for designing the actual system. In a co-design workshop, our editorial partners went through the process of creating potential homepage and channel front variations by arranging lots of faux modules in the form of index cards, each representing different ways of organizing content. This exercise allowed us to prioritize what modules were more important to create than others. From there, we swiftly moved into sketching and designing.
Unleashing Editorial Creativity
Ultimately we designed and built a system made up of 24 modules — most reusable across the homepage and channel fronts — that would offer readers a textured experience, mixing fast and slow content, alternating visually rich areas with type-heavy ones, as well as full-width and half-width chunks. Through a CMS masterfully engineered by our friends at Diaspark, Nation editors would now have more freedom and flexibility than ever before.
Crucially, editors would now be able to make connections among stories for readers. In the words of executive editor Richard Kim, “Related pieces will be grouped together to help readers understand the political and historical context of today’s crises. You might find, for example, an editorial calling on candidates to refuse to accept money from fossil-fuel companies paired with groundbreaking essays by Naomi Klein and Chris Hayes, along with a petition cosponsored by our friends at 350 Action.”
In the end, a modular system offering flexibility, held together by some important guidelines to keep the experience coherent, proved to be the right approach for The Nation. The way editors present the news to readers on any given day, or at any given hour, will be how they, and not an inflexible template, think it should be.
For more on The Nation redesign, check out this article in Fast Company.