IDA is a timeline generator for uncovering discourse around specific events that was concepted and built at VAX – Vox Media’s hack event.

MDN

Problem Space and Concepting

We assembled a team of designers, developers, art directors, and product managers to take a storytelling concept from idea to prototype in a few days. One high level problem that emerged was the amount of noise in dialog surrounding breaking events. Social media sites hold a great deal of genuine discourse between people who are the closest to events like protests, war and general web discourse. Unfortunately these things get burried under the sheer number of things that are posted recycled, and reused.

Through a series of concepting we came up with a web app to generate and visualize media from an event (around a Twitter hashtag for the prototype) in a timeline view.

Design and Prototyping

An engineer came up with code to pull, order and constrain information as JSON around a specific tag / event (in this case, protests in Baton Rouge). Simultaneously, our engineer pulled together the frontend MVC application that loaded the data. This allowed us to design with real content – especially important when most user generated content isn’t high quality or remixed. API limitations and quickly moving content forced us to think about the right design for how we pulled in and presented content early (namely around the amount of entries, types of media and the chronological granularity of the timeline itself).

MDN

Scrolling through IDA’s timeline, you can see how image frequency and amount change over time

Each row represents a slice of time and the media that was shared then. When these are stacked on top of each other, a narrative timeline showing the progression of the event appears. For the prototype, we set the time distances between rows in seconds, but ideally this could be adjusted across hours, days or a week to see how an discourse around an event evolves.

Clicking an entry switches the view to a detail view where users can read a post’s specific information and see the original source of the post. Through IDA we found several interesting examples of users remixing content, adding filters/affects (including an edited Baton Rouge photo below) or adapting photos with text.

MDN

In less then three days we were able to concept, design and build IDA which allowed us to zoom into an event and see relationships between media over the course of the event. With more time we would continue to rethink controls for how entries are dynamically pulled / categorized and integrate additional sources.