Nieman Foundation at Harvard
The Society for News Design hosted its second #SNDMakes hackathon in Boston this past weekend. The last iteration of the event was held in Indianapolis, hosted about two dozen designers, developers, and journalists, and produced a handful of ongoing projects. This fall’s event was hosted by Upstatement, the Boston-based design firm that’s worked with a number of media clients, including The Boston Globe, NPR, and Global News.
geeks gonna geek #SNDMakes pic.twitter.com/9mHsAmQJlq
— Ryan D Ghost, BOO (@sixfoot6) October 17, 2014
#SNDMakes Boston participants came from both legacy media companies — including the Globe, ESPN, The Washington Post, and The New York Times — and new media outfits like Vox Media and Slate. These attendees, around 40 in all, split into six teams, each of which would produce a prototype for a news product by the end of the weekend. The idea was to organize teams based on variation in backgrounds, in hopes that not only would a viable product be conceived, but also that participants would be exposed to skills and expertise they might not encounter regularly in the workplace.
“Within the context of the organization, #SNDMakes is one way we contribute to the industry by providing a vehicle to facilitate discussions about real problems all news organizations face,” says facilitator and SND digital director Kyle Ellis. “If you go back to our earliest days, SND was actually talking about convergence before that was a word people used. So, for us, #SNDMakes represents the desire to promote innovation and thought leadership, which are values we’ve always stood for.”Each iteration of #SNDMakes is designed to help participants answer a question. This time, the question was “How might we improve the content creation process for news?” Taking that as inspiration, each team brainstormed a narrower query, one that would hopefully be answered by their end product.
Very early brainstorming taking shape at #sndmakes! pic.twitter.com/9Pd4lgDwb2
— Kyle Ellis (@KyleEllis) October 17, 2014
Though not every team followed through on their initial plan and each team ended up at different points of functionality, the questions and themes of the event are worth documenting. And so, without further ado, let’s take a look at what each team came up with.
Meet the teams at #sndmakes! Team 1: @risatrix, @steyblind, @sixfoot6, @elainanatario, @rreibstein, @MikeACase
— Kyle Ellis (@KyleEllis) October 17, 2014
Team 1’s project took up the question of how to guide a reader’s path through a website. “On sites like Vox.com, you often find that authors manually insert links at the end of an article that end up competing with the more impersonal metric or topic-oriented next-click modules below,” says team member and Vox developer Ryan Gantz. Instead of content recommendation based on most shared or most read, Team 1 asked, why not recommendations based on the reader’s personal interests, or an author they like? These could be algorithmically generated or executed by a person, as long as they target the user.
Gawker already uses a system something like this — when you read a story by an author, a left sidebar offers other headlines recommended by that author.
To build out their concept, Team 1 used Vox as a model (two of its members were Vox employees, and Vox was the best-represented company at #SNDMakes, but they said this didn’t influence their decision). For the prototype, they experimented with a variety of possibilities for what recommendation generators could be — an individual, a content theme, a brand, or a team. The design was inspired by Yo.
Team1 at #SNDMakes: How might we encourage publishers to be better curators of next click? Chaperones w/ personality. pic.twitter.com/4u7KEUdyLG
— Ryan D Ghost, BOO (@sixfoot6) October 19, 2014
There are also multiple navigation modes in consideration. One metaphor the team built around was the DJ. “After reading an article or watching a video, a user chooses a DJ that suits the mood or authority they seek in a next read, rather than a topic or headline,” says Gantz. Another mode of consumption the team thought about was the newsletter or daily brief. For example, Ezra Klein fans who don’t want to read all of Vox could flip through Ezra’s 10 recommended stories on an Ezra Klein playlist screen.
Writes Lisa Williams, who participated in and kept notes on #SNDMakes: “This reminds me of those little handwritten shelf tags in independent bookstores, written by staffers recommending a particular book.”
The idea is interesting both from an editorial perspective, in terms of serving readers the content they want, and from a business perspective, in that it could, if successful, increase time-on-site, an increasingly important metric for advertisers.
Team 2 at #SNDMakes: @whichlight, @natronic, @dheerja, @FinkTweets, @christhorman
— Kyle Ellis (@KyleEllis) October 17, 2014
Team 2 wanted to tackle the problem of why content creators often make design decisions that might work for their own site, but don’t look as good or work as well when viewed natively on social media platforms. Facebook and Twitter offer services where users can paste a link and see how it will look when posted, but the Pre-Post team wanted to centralize those features for multiple social platforms in one place.
“For example, a Vox.com editor would create a story in their CMS with a headline, images, etc. that would look great on the Vox homepage, but may be over the character limit or missing an image on Facebook/Twitter. Checking their content on every single platform after publishing is simply a lot to ask of individual content creators, especially when they’re focused on timeliness of content,” says ESPN’s Dheerja Kaur, who product managed the Pre-Post team.
Hacking w/ #SNDMakes team 2. We're creating solutions for editors to visualize their content on social media. pic.twitter.com/PVOgkAwh0n
— dheerja (@dheerja) October 18, 2014
A special blend of skills made Pre-Post come together smoothly. For example, team member Kawandeep Virdee brought data parsing skills from his job at Embedly to the table that allowed Pre-Post to be more universally functional. Virdee says the team is working to make the product available as a standalone tool for anyone to use.
“PrePost is ideal for integration directly into a CMS,” says Kaur, “but it’s also great for independent creators to check on their content to figure out why it might not be performing as well on certain platforms.”
Team2 at #SNDMakes: preview how any story URL will look across social services to encourage copy, crops, optimization pic.twitter.com/zX7yEJQu2M
— Ryan D Ghost, BOO (@sixfoot6) October 19, 2014
Team 3 at #SNDMakes: @stevechiagozie, @dharris, @steveclancy, @lisawilliams, @theresourceress, @putneydm, @seandillingham
— Kyle Ellis (@KyleEllis) October 17, 2014
Featuring teammates from Vox, Slate, INN, Upstatement, KPCC, and beyond, Team 3 wanted to tackle a hot-button issue around content creation — verification. Their project, Legit, looks at how fact-checking processes can be fused more seamlessly into a journalist’s workflow.
“Early in our process, Sean Dillingham pointed out that when there’s breaking news people turn to social media because it’s fast and they care more about the speed of the news than the legitimacy,” writes team member and Slate staffer Doug Harris in an email. “At the same time, professional news organizations can seem to be slow because we must care about the legitimacy of news.”
The goal of Legit is to help reporters keep track of tweets as they verify them, whether via geolocation or traditional reporting. Journalists can search tweets around a theme — for example, tweets that mentioned @BarackObama and include the hashtag #EPA — and give them a thumbs up or thumbs down. (You can demo that process here.)
Team3 at #SNDMakes – Legit is a tool for journalists to identify and verify sources on Twitter across followed topics pic.twitter.com/toDXeRkj8l
— Ryan D Ghost, BOO (@sixfoot6) October 19, 2014
The Legit team has other ideas about the process of fact-checking. Could a bot be used to raise awareness of hoaxes by tweeting at people who retweet false information? Could users become part of the process? And what about platforms beyond Twitter, like Reddit or Instagram? Harris writes that, down the line, a comment box could provide reporters with a place to explain why they approved or rejected a tweet.
Team 4 at #SNDMakes: @jmfbrooks, @cj_ballard, @gcstaublin, @MichaelWorkman, @alishalisha, @IntrusionSignal, @jaredNova
— Kyle Ellis (@KyleEllis) October 17, 2014
Team 4’s project is focused on helping journalists quickly and efficiently find a perspective on a breaking news story that competitor outlets might not have thought of yet. (My name suggestion, Take Machine, came too late, after the name Anglr had been decided upon, alas.)
“The question we tackled was how might we help journalists bring a unique perspective on a story to reach the target audience?,” says team member and Hacks/Hackers executive director Jeanne Brooks. “Enter Anglr, a search tool for journalists that helps you quickly identify a unique perspective to your story. You can search keywords to see the top stories on Google News, social ranking of each result based on Twitter and Facebook shares, and related keywords.”
Team 4 at #SNDMakes : a search tool for journalists looking for fresh angles on their story… "Anglr" pic.twitter.com/nXOm40n3HA
— Christopher Ballard (@cj_ballard) October 19, 2014
Lots of companies, including Twitter and Facebook, are thinking about ways to visualize what’s trending. Anglr would be a tool that does that, but with a very specific user in mind — a blogger or journalist under pressure to produce a lot of content quickly. “As we iterated on the idea, we identified a number of pain points for journalists. We felt the social data as part of the search was important because frequently editors and reporters need to make decisions not just on the story angle but on the story template as well,” says Brooks. “We thought if they were able to quickly see where information was spreading across social on their topic, they could use that to inform story format and distribution.”
Brooks says the idea was intriguing enough that participants plan to keep working on finessing it.
@gcstaublin @cj_ballard @MichaelWorkman @IntrusionSignal @jaredNova @jmfbrooks can we get Anglr up on github.io? would love to keep fiddling
— Alisha Ramos (@alishalisha) October 20, 2014
Team 5 at #SNDMakes: @mclaughlin, Rob Martinez, @t1to98, @SquirrelSheryl, @kaeti, @kamal_ay, @chrismchaines
— Kyle Ellis (@KyleEllis) October 17, 2014
After some deliberating, Team 5 decided to tackle homepage optimization. Hmpgr is supposed to allow producers more flexibility when it comes to things like story hierarchy, image size, and headline placement. The idea, teammates told me, was to give designers back some of the control they had in the days of print.
.@kamal_ay working out user flows at #sndmakes this morning. #nerdherd #team5 pic.twitter.com/nkxlbtMDpJ
— Sheryl Sulistiawan (@SquirrelSheryl) October 18, 2014
“Usability is not a core tenant for most CMSes,” says participant Kamal Grey of ESPN. “I thought it was an isolated issue, but it seemed as though a lot of my peers face the same issues with their respective editorial tools. While there are a number of third-party tools in the market, there still seemed to be a large opportunity to improve the user experience for content creators and develop tools that make their jobs easier.”
hmpgr: get a handle on your homepage. https://t.co/vXmawXlFMd #sndmakes pic.twitter.com/ZuhfTyTPiN
— Kaeti (@kaeti) October 19, 2014
The team prototyped the idea using The Verge’s homepage as a model. The challenges they ran into in conceptualizing the project are common ones: Would it be responsive? Would it work with different CMSes? They also asked more philosophical questions: What does a homepage mean, and who should have control over it? Throughout the process, Team 5 was concerned with questions of context, and how a homepage should be organized to best serve the audience.
Reactions to Hmpgr were very positive, though the idea does seem best optimized to a rectangle-based web. The team managed to get a sleek demo up and running; documentation of their brainstorming and building process are available on GitHub.
Team 6 at #SNDMakes: @jmm, @aschweig, @ramoved, @komickiller, @durple, @ej_baker
— Kyle Ellis (@KyleEllis) October 17, 2014
Finally we come to Team 6, which concerned itself with improving — if the name didn’t make it clear — the audio content experience. Specifically, the team was interested in thinking about how listening to a podcast or audio story could be more visually stimulating.
“Audio is extremely hard to make pretty.” @komickiller on our visually-skimming-audio idea & multimedia annotations for listening. #SNDMakes
— miranda mulligan (@jmm) October 19, 2014
“For example, wouldn’t it be great if you could see the photo while listening to an NPR Fresh Air personality who was describing that photo?” writes participant and Knight Lab executive director Miranda Mulligan. “In our prototype, we tried to answer: How might we more seamlessly show citations or annotations mentioned in an audio story. Attenborough tries satisfies that need by reducing the friction of connecting audio moments to web content.”
The Attenborough user would be able to access photos, contextual links, or videos via mobile or desktop browser while in-audio, listening left undisrupted. Via the audio visualization, listeners are supposed to easily be able to tell how far along they are in a story and navigate the experience.
Team6: Attenborough: a system to annotate audio w/ notes & media, offer richer browser playback experience #SNDMakes pic.twitter.com/lS36QbYfgg
— Ryan D Ghost, BOO (@sixfoot6) October 19, 2014
There are some specific, technical challenges to what Attenborough wants to accomplish. MP3s are dumb vessels, and the information inside them is hard to access, which could make creating a generalizable product hard. “We looked at the work being done by PopUp Archive, HyperAud.io, Popcorn and Kettlecorn, and a few other projects that are all chipping a way similar-ish questions in different ways…And, well, we learned that there is still a lot of work left to be done,” writes Mulligan. Next steps after resolving those issues would be for the team to dive into how Attenborough would operate from the content creator’s perspective.
SNDMakes was more designathon than hackathon, meaning there’s less pressure for these ideas to become workable products or salable companies any time soon. Though some might have life after Boston, the idea of the event was to help spark new ideas in the minds of those who work on news design everyday.
“As SND’s digital director, it’s really important to me to provide opportunities for SND members and non-members alike to come together, talk about the problems we’re facing in digital journalism, and then build solutions that we can share within our individual news organizations as the industry as a whole,” says Ellis. “SND aims to be a facilitator of important industry discussion, and now what you’re seeing with #SNDMakes is how we’re doing that for digital journalism.
