Case Study – TV News.png

Internet Archive: TV News

Digital prototype overview for Internet Archive TV News – a search, clip, and share interface.

TV NEWS ARCHIVE

Designing the digital research library of television news to inspire future hosts of The Daily Show.

I worked as an interaction designer and prototype developer on the design of the Internet Archive’s TV News feature.

I collaborated with a creative director, UI designer, and the Internet Archive’s internal TV News archive team to help ship the transcript search and video editing experience for the TV News feature, which consisted of a transcript search and video editing experience.

The redesigned TV News launched in beta in October 2013, and officially released in April 2014. Search the TV News archive and create your own clips on the Internet Archive today.

Internet Archive's TV News feature

BACKGROUND

The Internet Archive is a library of Internet sites and other cultural artifacts in digital form.  They have achieved success in making past versions of web sites, texts, and audio files freely available to the public. One feature that had not gained a lot of traction was their collection of TV news broadcasts. I was approached to assist with the redesign of that interface with the goal of making the 500,000+ broadcasts more accessible, and to enable users to search, quote, and borrow from the Archive.


PROCESS

I came into the project after concept wireframes were drafted. My team gathered to discuss direction and talk about the proposed application flow. We were also tasked with solving the problems the wireframes didn’t address. That meant iterating on the existing flow to strengthen users' ability to search, edit, and share news clips.

archive_wireframe

PROTOTYPING

I developed time-based prototypes for each of the service's key interactions. To refine the appearance of the individual screens, I collaborated with the UI designer, and subsequently built out the pages into a browser with HTML, CSS, and JavaScript. For the interactions, I used jQuery as a base and fine-tuned in JavaScript for customized functionality.


THE TRANSCRIPT EDITOR

The team understood that getting the transcript editor right was going to be a key component of project success. We were familiar with the concept model present in existing broadcast editing, and played with it by expressing the 'in' and 'out' times along with big pink brackets (an expression of brand).

A second iteration of the editor focused more directly on the news transcript itself. We gained an understanding of user behavior that searches and edits would be based around keywords, rather than time. Given that information, I moved the pink brackets into the text and allowed users to slide the brackets around, highlighting the text that would be quoted.

The third iteration replace the brackets with stylized quote icons on pins. The interaction model stayed the same, but the branding became more eloquently expressed. This can be seen in the live version of TV News.


FINAL IMPLEMENTATION

The creative director, UI designer, and the rest of the Internet Archive team incorporated the interactions and flows, refined the visual appearance, and developed the product that is featured on the Archive today.