In October 2013, I was invited to participate on a team of three with Mark Barilla and Curt Merrill at a hackathon in lovely Sunnyvale, CA. The weekend was sponsored by Yahoo! and run by the Global Editors Network with the goal of fostering innovation in digital news.
The weekend we flew in coincided with a shooting at LAX. Curt flew through LAX on his way up to Sunnyvale, arriving about an hour after the conclusion of the shooting. Finding relevant news and up-to-date status of the event proved exceedingly difficult. Comparing articles and writeups from disparate locations, social media accounts, and headlines was a heavy task to accomplish on a mobile phone while moving through a terminal. We took this use-case as our primary challenge in developing CNN Storyline.
Over two days, we prototyped a system that surfaced CNN editorial, live blog posts, and social posts surrounding a breaking news event in a timely and evolving manner. On first visit (above), the app features a story summary and some of the latest news bullets, while allowing readers to dive deeper into op. ed. pieces, background research, videos, and related social media posts.
On subsequent visits, the app highlights any new and updated items since the user's last visit. This allows for quick scanning to see how a story has evolved.
Over the weekend, I played the part of front-end developer and interaction designer, hand-coding the prototype using Node.js, HTML, CSS, and some client-side JS (jQuery and Handlebars). In the airport on my way out of town, I rewrote the CSS to make the site responsive.
At a hackathon, immediate and decisive action is crucial. Iteration can't be drawn out- it has to be a part of team conversations. Distilling a design down to its most crucial elements is a powerful exercise in identifying constraints and focusing on the essentials.