Condé Nast Co/Lab Design Test

by Meredith Hattam, August 30, 2017

____

Creating conversations of note.

Letters to the editor are as old as journalism itself. In the 1800s, they served as a tool for political discourse, later becoming opinion columns and editorials. Their 21st century incarnation, however, is hazy. There is, of course, the ubiquitous comments section, as well as anything the reader can like, tweet, or share. When I was presented with the design challenge of creating something the user could "interact and respond" to editorial content with, my mind immediately went to ways I could incorporate the feeling of letters to the editor for vanityfair.com in a way the user would already feel familiar with.

But who is our user, and what do they feel familiar with? What are they already engaging with, on-site and off? I decided to begin phase 1 of my research by answering this question.

____

Who would use this and why?

I began by speaking with friends within the age range of 25 - 32, whose daily sites visited include The New York Times, The New Yorker, Vanity Fair, Refinery29, and New York Magazine. I spoke with 7 people in total, many of whom worked in fast-paced creative fields with not a lot of time to engage with content.

"I actually always read the comments, but I rarely comment myself," says my friend Tessa, a 30-year-old project manager who works in media. "However, I do think they contribute to a meaningful conversation."

Many of those I spoke with did in fact report reading online comments, particularly on sites like the New York Times, well-known for its full-time team of community moderators, Slate, which incorporates an account login to comment, and Medium, whose highlight features eventually served as inspiration for my prototypes.

Recently, however, many sites such as NPR, VICE, and others, have advocated for killing the comments section, citing that they lead to flame wars and no more meaningful engagement than a few page views. I do not agree with this—in fact, The Times of London recently found commenters were their most valuable, engaged visitors. It should be noted they require a login to comment and limit this to subscribers only, providing built-in comment moderation. Their argument is that discussion is best kept to social channels, where more meaningful conversation can occur. I disagree, but do agree that users who do not comment but want a social way to engage should have the option. 

 

"I will always read comments, as I think they're interesting, but sometimes I need something quick and easy to interact with."

 

"I think comments probably draw more emotionally engaged readers, on either end of the spectrum," says my friend Kelly, a 29-year-old who works in travel marketing and is a daily reader of sites like CN Traveler. "I will always read them, as I think they're interesting, but sometimes I need something quick and easy to interact with."

Essentially, who this person is may fall into two categories: the casual reader, who has likely stumbled upon a VF story through their newsfeed or browsing the site, and the enthusiast, who follows VF's editorial staff and is excited to engage.  Obviously, I need a focus group larger than 7 people to truly explore this. I am basing my prototypes off the results of these findings and a deep competitive research dive to see what worked and what did not. 

 

____

What outcomes are you designing for?

I am designing to build a community of users who are able to interact and respond with Vanity Fair online in a memorable way, thus inspiring them to return to the site, or, at the least, share its content more readily. I designed with the goal in mind of offering two types of interactions: one for those who may be less invested/casual readers, who have stumbled upon a story that interested them via a social feed or outside channels, and one for those who read vanityfair.com more frequently and would like to engage in conversation with its editors and readers.

Success and a hopeful outcome for this feature would be two-pronged: first, by building a moderated or community-based comment board, it would lead to longer time spent on the site, and more return visits. Second, by adding a built in social feature that allowed users to use pull quotes to Tweet and post on Facebook, it would hopefully continue the conversation off-site as well and lead to more visibility. Overall success would be measured by how many users were actually engaging and commenting, followed by a boost in readership and traffic. 

 

____

Execution

I decided to call this feature "Noted" to bring to mind notes taken in a journalist's notebook and to make users feel that whatever they had to say or share was noteworthy. I began by drawing a few rough prototypes of ways different elements could react. 

 

____

Mock-Ups

To become introduced to this new tool, the user will first receive a pop-up on select stories with information.

 

____

For the Casual Reader

Designed with a busy reader in mind, the user will be able to highlight quotes they like as pull-quotes to potentially use on social media, like, or comment on. "Liking" a quote means it has the potential to stay highlighted if it surpasses a certain number of likes.

 

Once their sentence is selected, a "Noted" window will allow the user to choose from many options to share and engage with content, even if they do not wish to join the community to leave a comment. 

 

A unique feature of Noted allows users to post pull-quotes directly from the article on Twitter and Facebook, or reference them in the comments (more on that later), complete with author handle and shortened link. 

____

For the More Dedicated User

If the user clicks on the "Comments" section from the Noted bar, a comments section will slide in from the right side. This is also accessible from the addition of a comments icon at the top of the page and story.

I am not quite sure how comments will be moderated quite yet -- I think this would require discussion with the editorial and strategy teams. However, based on the success of the Times of London and Slate, I recommend limiting comments to subscribers or creating a community portal (perhaps adding onto "The Players"), so this is what I designed below. 

Editor's picks are noted with the "Of Note" icon and appropriate tab.

Non-Member Appearance

Member Appearance

____

Mobile Appearance

Larger font sizes and a "Load More Comments" button, as well as intuitive hover buttons help translate this to mobile.

 

____

Research Methods

The most useful method I found for getting to this answer was a combination of competitive research and user discussion. I would like to iterate this idea after speaking with a larger sample group of users and testing based on that.

 

____

How Would This Impact the Site Overall?

I purposefully built this as a lightweight tool to encourage interaction and conversation while not changing Vanity Fair's site experience exponentially. It lends to the experience of reading a story or engaging with content on site, rather than distracting from it. A/B testing could also be done with comments vs. social shares with pull quotes, as the outcomes I reached may not work with the site's readers.

 

____

Additional Ideas

To delight users, I would like to iterate on this further by designing special assets + easter eggs for each vertical (HWD, Vanities, The Hive.) These would be playful and sophisticated, not low-brow. Due to time constraints, I was unable to design these, but ideas I had in mind were:

Specialty icons for each vertical, such as political symbols for The Hive, Hollywood-esque elements (a camera, sunglasses) for HWD, and so on. I was inspired by Refinery29's comments section for this feature -- see example of this idea below:

 

Specialty emojis  for the comments section of each vertical, a la Hipchat and Slack. Think an orange emoji with blonde hair for Donald Trump, and so on.

These are obviously bells-and-whistles additions that are non-essential for MVP, but could provide a unique experience for the user in the end, inspiring them to return to the site or join the comments.

____

Thank you!