Among the many degradations magazines have endured during the digital revolution, few are as heartbreaking as the erosion of the magazine design experience.
Digital platforms are designed by engineers for engineers. The web browser shows little respect for any standardized flow and sequencing, immersion, typeface, white space—the very essence of the magazine experience.
Nevertheless, some of the brands we celebrate for their print experiences are looking for ways to extend that legacy into screens that are unreliable in shape and size. These environments have been polluted by ad clutter, time-stamped feeds, endless scrolls and other interface features that constitute “design.” But in speaking with The Atlantic, National Geographic and New York magazine, we’ve learned that it’s possible to translate old print values into a digital world, and develop internal processes to solve for the digital UX conundrum.
Experience as a product
Traditional print magazines and mobile screens have more in common than one might think.
“The big part of the user experience is how things feel and how you make people feel,” says Ian Adelman, chief creative officer at New York magazine. “The thing that magazines have always had, as much as any product, is a very personal relationship with their audience. [Magazines] are a part of their self-identity, because they want to be associated with something or feel a particular way.”
A positive change to come in the digital era are collaborations across editorial, business and design groups that in the past were traditionally siloed.
“The whole opportunity is to invent things, and that needs to be collaborative,” he says, pointing to the New York Times’ cooking app as an example (Adelman was previously on the Times‘ design and UX team before returning to New York Media in 2016).
Another recent example of this collaboration at New York Media is The Strategist, a buying guide site. The essence of the experience is rooted in why people are coming in, Adelman suggests. The Strategist is a “hybrid of reading and shopping.” There is affiliate commerce at the heart of the business model, but the site has an editorial point of view that Adelman suggests attracts as many readers as it does shoppers.
“People go to see what’s new,” he says. “We want to satisfy that return visitor but also service the needs of someone who just comes across it. You start to thinking what is the best way to sequence our materials to meet those diverse needs.”
Adelman uses large and small screens in parallel, with the “logical or functional design on the small screen.”
“You want mobile to be driven by function,” Adelman says. “It’s easy to take a logical design from mobile to the larger screen. But I think it is important in a lot of creative endeavors to think expansively first and then close doors to narrow down and edit.”
In the case of The Strategist‘s design, Adelman contrasts its experience to The New York Times Co.’s Wirecutter, which he likens to Consumer Reports for having a reputation with readers who trust it to guide their purchasing decisions. The Strategist‘s pieces take many forms, including fun reads.
“The really big design decisions were distinguishing between products and articles,” Adelman says. “A story may have between one and 100 products. So a lot of decisions on the home screen were about elevating and distinguishing products from article collections.”
Underscoring the magazine-to-mobile connection, the small screen is an opportunity to marry text, plus image in deliberate ways. Finding that horizontal aspect ratios are less satisfying on mobile, The Strategist aims for square renderings that Instagram institutionalized because it feels more balanced within the scrolling experience.
“Images on mobile are an interesting thing,” Adelman says. “When we worked on The Cut, we were struck by how all the images were going to full bleed. So we made a real effort with white space and air. If you want to create a premium experience, that is one of the most valuable things you can do—frame things and play with space.”
PX, not UX
The Atlantic’s design team is training itself to break a decades-old habit of referring to digital audiences as “users.”
“It’s a little thing, but we refer to ‘people’ interacting with our product,” says Emily Goligoski, senior director of audience research.
Not so small a thing, really, since it reflects a human-first regimen to building out the UX at The Atlantic. User testing occurs among the design, product and research teams at all stages of a design and after launch. User interviews are done before a project starts. Beta versions and mockups are shared with small groups initially and then widened during development.
All of this is critical to getting “outside the building and outside your team,” Goligoski says. “Any time we can talk to between seven and 12 people, we recognize patterns where we can ID pain points.”
The Atlantic saw the value of this early prototype testing during a recent site redesign. “We had a hunch there were fundamental challenges with navigation,” says Jim Quindlen, senior director of product design, adding that although many of the labels the site was using to categorize and distinguish content sections “were clear to us, users didn’t see the difference.”
This lesson came through in basic card sorting exercises with test groups. “We saw separate categories that our readers grouped into one category,” he says. “We thought they wanted to see more options up front, but that created a lot of ambiguity.”
The Atlantic’s human-centered approach is not just applied to testing but to the experience of the brand. In redesigning the app, for instance, the design, research, editorial and data science teams formed an interdisciplinary group that met for hours a day. The team also watched interviews with beta testers in order to test, learn and iterate.
The point was to put The Atlantic’s own human imprint on a mobile experience that had otherwise standardized on the time-stamped scroll.
“We intended it not to be a feed,” says Goligoski.
Instead, it editorially guides the reader through the ideas of the day. Still, some readers since expressed a preference for a scrolling feed interface, and so an upcoming update will add a tab that organizes the “latest” content.
The principle of the brand’s human-based approach is not just to hear feedback, but to interact with it.
“The intention is leading people to something they may not know they want,” says Quindlen. “Our job is not just to ask people what they want, but to ask questions to provoke a need they may not have anticipated. We want to provide a user experience without friction but also represent new and delightful experiences they couldn’t predict.”
One size doesn’t fit all
Given National Geographic‘s long legacy of stunning photojournalism, it is not surprising that its team puts a lot of effort into determining “how a reader wants to ingest a visual story,” as Kennedy Elliott, director of interactive storytelling, puts it. The best user experience for every story is a bit different, and so considerations of flow and feel form an early part of the creative process and are brainstormed throughout.
“We have a culture of critique at Nat Geo,” Elliott says. “Visual stories undergo several rounds of review by peers and [creative director Emmet Smith].”
In fact, it’s formalized into “Open Hours” sessions twice a week, where graphics editors sign up for 15-minute slots in which they present either a new concepts or progress on existing projects in front of Elliott, Smith and others.
“The environment is an opportunity to get feedback right away at every step. Having other people look at your work outside of your expertise does wonders for our storytelling,” Elliott says.
Over past six months, all the design pitches start with the small screen. “We have moved to strict mobile-first storytelling,” Elliot adds.
Although the pitch mock-ups start with screens as small as 320 pixels wide, Elliott warns against dividing the world too simply into mobile and desktop.
“I don’t look at things as two screens,” she says. “I look at it as thousands of different screen sizes and ratios.”
