Feature Story Template

My Role

UX Design

Team Members

Chris Combs, Tom Shafer, Manyun Zou

Challenge

There wasn’t a good way to display features stories from the magazine. Layouts for Washingtonian’s longform pieces of journalism had to be hand-coded, leading to inconsistency in design and inefficiency in production.

Process

I conducted stakeholder interviews with our editorial team and web producers to learn about the features that would help them produce beautiful stories online faster and easier. Manyun, who designed the interface, was responsible for studying case studies, evaluating competitor websites, and conducting Heuristic evaluations of the Washingtonian feature stories compared to other media publications' feature stories.

What we learned

Two "musts" from our editorial team were:

  1. Images needed to be impactful
  2. There shouldn't too many distractions from the main story text

The layout of the template needed to feel cohesive as a user scrolled through the story. And not only did the template layout need to be cohesive, it needed to give users a feeling that these stories were "big," "important," and "worth their time." Another concern was to make sure users were able to easily go back to the homepage (something that was not inherent in the design for custom,  hand-coded features in the past).

Internally, this template also needed to be something that web production staff and editors could easily build off of to create aesthetically-pleasing longform stories without relying on the digital team and developer to create custom code for every single feature story. We also needed to take into account the advertising opportunities available in this feature template. Washingtonian feature stories tend to get a lot of traffic, and as a business, we needed to make sure there was: A) space for advertising and B) a way for web producers to move advertisements if they disrupt the flow of the story.

From Manyun's research, we learned that many publications added, what we call, a time-ticker to the top or sides of stories to show a reader's progress. White space, large margins, and huge photos were also themes we wanted to keep in our design based off of Manyun's research.

Manyun's first wireframes.

Solution

We kept the design simple, with the focus on photos and text. Using the full screen was a must so that there would be plenty of white space surrounding text for easy reading. Manyun designed different ways of displaying photos and moving around advertisements so that the flow of story wouldn’t be interrupted by oddly-placed photos, section breaks, or advertisements. We worked with our developer to create the template in our CMS that producers and editorial staff could easily use to create longform stories that stood out from Washingtonian’s day-to-day content.

Results

We have yet to do formal user-testing post launch; however, the feedback from staff and stakeholders has been overwhelmingly positive. They appreciate how the images and text take center stage and producers and advertisers are thrilled about the functionality to move around advertisements so they don’t disrupt the reader. Analytics show that reader engagment on our longform stories has steadily improved, and we’re excited for the next round of research and iterations to make this template design even stronger.

Here are two recent longform stories in published in the new template: The Marriott Family's Civil War and Spies, Dossiers, and the Insane Lengths Restaurants Go to Track and Influence Food Critics

Leave a Reply