United Universe

A second-screen transmedia experience for use while watching media set in the Marvel Cinematic Universe.

Contributions
Skills
Tools

Merely a snippet of a timeline representing major events that take place within the Marvel Cinematic Universe and some of the characters affected. (Source: eatingcroutons.tumblr.com)

Background

If you've ever watched a Marvel movie or TV series, you probably caught on that there's a ton of crossover happening from one film or show to the next. In the Experimental Television Lab at Georgia Tech, we were tasked with coming up with a problem that TV viewers may have that could be solved by researching and developing a functional solution.

The initial idea was simply "something to help people keep track of connections and references in complex story worlds." A few examples included the expansive Marvel Cinematic Universe (aka the MCU), Back to the Future's split timelines, and Once Upon a Time's mixed-up fairy tales.

Over the course of two semesters, our team developed a working prototype of a second-screen transmedia experience for use while watching movies or TV shows. Through user research, prototyping, and testing, we developed two examples: The functional prototype for The Marvel Universe (initially including movies and TV shows, with the idea to add comics later), and – to show the concept's versatility – a secondary example for Once Upon a Time.

Survey and interviews informed our goals, priorities, and functionality.

Research

To identify the user's goals and needs, we conducted both qualitative and quantitative research with a wide range of people who identified themselves as fans of Marvel's Agents of S.H.I.E.L.D., the TV series. We asked about their habits while watching the show, such as if they multi-task, if they binge watch or take their time, and if they tend to pause to look things up if they cannot remember a backstory. Next, we asked about their ideal second-screen companion, if such an app existed, and what features they'd most like to see. Additionally, we performed competitive analyses to identify any related tools performing similar jobs, from wikis to apps to infographics.

A few examples of the way we organized and visualized the content we used for prototyping.

AnaLysis

Using the results of our research, we prioritized features for our prototype: The second-screen app would play along with the media, popping up information as related people, items, places, and events appeared on screen. From there, users can interact with "blips" of data to dig deeper for more details, connections, context, and history. We gathered content to populate these blips and sorted the data into these categories, timing out a sample for user testing.

Design and interaction elements.

Design

From our findings and goals came wireframes of the app interface, followed by comps, and finally interactive prototypes, with the aesthetic evolving along the way to be as clean as possible. We aimed to provide sufficient background information and connections for noobs and veterans alike, while keeping the second-screen experience unobtrusive and passive. When an important character, event, location, or item is present or referenced, a “blip” alert shows on the TV screen, alerting the viewer that there is important background information available in the app. From there, the veiwer can interact with the blip, save it for later, or "toss" it if they don't need to be refreshed on that particular bit of information.

A video demo of the experience can be seen here.

The project was accepted into TVX2015.

Evaluation

We user tested, observed, and iterated on our design through two semesters, presenting numerous versions of the prototype to our lab. We added more features, imported extended data to display, and refined the interface from week to week. The project and corresponding research paper were accepted into the TVX 2015 conference in Brussels, Belgium, where I presented the project and participated in a poster session. The publication can be found in the ACM Digital Library, and can be read in full here.