Intro
As the films and TV shows in the Marvel Cinematic Universe (MCU) continue to evolve into a complicated web of interconnected narratives, there’s a need to make sense of the many pieces that compose this dense story world. United Universe is a second screen experience for both casual viewers and avid fans of the MCU, providing context on the narrative elements referenced across the transmedia storylines. Although the prototype was focused on the MCU, it was structured to be compatible with any cinematic universe or long-form narrative.
The Research
In the early stages of development, we sent out an online survey to over 90 participants with a wide range of exposure to the MCU. This gave better context on viewers' television habits and concurrent second screen behavior, as well as their exposure to MCU films or TV shows. Below are some stats that stood out the most:
These findings plus additional feedback from the survey became the basis for 3 primary research questions we used to establish the core design:
Design Phase 1 - Building the Foundation
After defining these research questions, we developed an Information Architecture that identified four main narrative components to link the films and TV shows together (we called them Blips):
Although blips vary in type, they all share interconnected relationships with one another across the same timeline. This led to two primary views in the interface: Connections and Chronology (later changed to History). The second screen was also intended to synchronize with the TV screen for contextual blip information, so we color coded blips as a way to subtly notify users of important references during their TV experience.
Initial Wireframes
One of the main objectives for the tablet experience was enabling users to quickly view the Connections or History of a blip without much thought. This was solved by placing "buckets" for each view on the edges of the tablet screen so the user could quickly drag and drop a blip into them to pull up the specified view.
User Testing
Using an early-stage prototype based on these wireframes, we conducted a thinkaloud walkthrough with 7 MCU viewers and got some useful feedback that informed the direction of future updates:
- Five participants thought the Connections and Chronology drop zones were actually buttons that you could tap (rather than the intended drop zones for blips to be placed)
- The terms “Chronology” and “Done” weren’t clear labels for their intended purpose
Design Phase 2 - Prototype Polish
The next phase focused on refining the experience based on the user testing session. The interface was given an overhaul to indicate interactions more clearly, which in turn gave the UI some much-needed personality.
The final prototype was built with NodeJS/Javascript and HTML/CSS. Although the TV Screen was technically a full screen browser window connected to a TV, the second screen UI was fully running with touch controls on the tablet and synchronized with the TV content.
TV-Triggered Context
As relevant story elements are referenced during the show or film the user is watching on their TV, the tablet will contextually populate with relevant information on the tablet screen.
Details on Demand
In response to user feedback about unclear interactions, buckets were re-styled to appear more like basketball hoops to reinforce the drag and drop capability. When dropping a blip into the History bucket, its timeline throughout the narrative is visualized with any associated event blips.
On the other hand, if a blip is dropped into the Connections bucket, its close relationships to other blips are displayed instead. Future work for this view would include elaborating on the specific relationships between these blips (hm… maybe IBM Graph would come in handy).
Usage May Vary
To accommodate users who take a more passive approach to second screen experiences, we provided a Save for Later bucket for blips users may care about, but don’t want to interrupt their program to research.
To further address the drag and drop functionality not being completely clear in user testing, a Help overlay was also added as a built-in way to guide those unfamiliar with the interface.
Conclusion
With the rising popularity of cinematic universes in the entertainment industry, there's an increasing need to curate this content into a contextualized format. United Universe addresses the challenge of maintaining coherence while encouraging exploration of densely interconnected narrative worlds.