OVERVIEW

Mosaic is an interactive film experience from Academy Award-winning director Steven Soderbergh, produced in partnership with HBO and developed by PodOp. Users control how the story unfolds by choosing which character storylines they would like to follow and can navigate the overall story via a narrative interactive map, which includes supplemental material, such as drawings, news articles and documents. The experience is available as a free app for Android, iOS, and Apple TV.  View here.

The goal behind the project was to build the technology, tools and infrastructure that allows filmmakers to tell interactive stories at scale, along with an end-user experience that enables viewers to interact more directly with characters and encourages deeper exploration and engagement with the story. 

ROLE

My role as the lead UX designer at PodOp involved architecting and designing a proprietary framework and tools that allow filmmakers to craft interactive narratives at scale, along with an end-user product to experience them. This involved leading the UX in a small, highly collaborative team that consisted of a junior UI designer, art director, and three developers. I also served as a liaison between the stakeholders, creative, design and development teams to ensure we were delivering the overall creative vision of the product, along with an elegant and intuitive end user experience.  

CHALLENGES

One of the greatest challenges of the project was aligning our design and development process with that of the film production. We needed to provide the creators with enough flexibility in the shooting and editing stages for an ever-changing story structure, while maintaining a clear sense of scope for the design and development teams to work against.

DISCOVERY PHASE

During the discovery phase of the project, I conducted numerous interviews with the stakeholders and creatives to understand the goals behind the project and how we would measure success. This was followed by a deep dive into user research and analytics around interactive narrative, along with current TV viewing habits and behavior trends to gain a better understanding of the landscape. 

The lead creative technologist and myself met with the filmmakers to better understand their process and ambitions for the experience they wanted to create. Some key insights were gleaned during these meetings, one being that the creators wanted to introduce just enough interactivity to enhance the narrative without making it feel like a game.  Another was the desire to make the viewing experience more akin to that of a book— short, snackable, chapter-based content that is more in line with current smartphone viewing habits than the traditional hour-long episode. 

To better understand and visualize the narrative, the creators and our team began mapping out the branching story structure on a wall using colored index cards to represent each character storyline in the experience. We then highlighted key moments in the story where we imagined the best opportunities for user-interaction could occur. Once we had a more solid understanding of the underlying structure, our design and development teams set out to create modular screenwriting and editing tools the filmmakers could use to playback and craft together their story.

ANALYSIS PHASE

In this phase of the design process we consolidated the data that was collected during discovery phase to generate useful insights. From these insights we created user personas based on our targeted demographic and began mapping out user journeys. This allowed us to focus on anticipated user goals and needs, which were translated into tasks and user stories.  

DESIGN PHASE

Wireframing and Prototyping

At the beginning of the design phase we focused on two main user tasks we determined as being core to the experience: user choice selection and story navigation. For user choice selection, we wanted to find a solution that felt seamless and non-disruptive to the flow of the movie. I storyboarded and sketched out various approaches to the problem until we landed on a few that the creators felt worked best.  Steven then shot test footage that we used to create a few tappable prototype variations. We tested these with users at HBO's testing facility. Once we arrived on a model that felt intuitive for users and provided enough flexibility for the creators, we built out a spec template for the film production crew, design, and technical teams.   

Next, we needed to find a design solution for users to navigate this complex story that felt intuitive and supported our underlying story structure. After multiple rounds of sketching and wireframing we settled on a few different models that were translated into tappable prototypes. We then conducted an internal user test to determine which model resonated best with users.  Based on the results we settled on what we call the "story map," which is a visual representation of the story structure using a decision-tree based model. It provides a simple way for users to visualize where they are in the story, while giving them a greater sense of the larger story world.  

Now that we had solved for our two core feature sets, I took the user stories and journeys from the analysis phase and produced a list of remaining core features and functionality for the app. From there I began sketching and wireframing user task flows for each feature set and targeted platform. This process took a few iterations before landing on the most solid designs, which were then delivered to our visual designers. Once the UI was in place we created simple prototypes and tested them again on users, in both a formal testing lab environment along with a few internal tests. From the user feedback we made modifications and improvements on our designs before handing them off to the development team for implementation. 

Visual Design & Animation

We wanted the visual design of the story map to encourage exploration by evoking a sense of mystery, in addition to playing off the art themes that were threaded throughout the movie. To address this, we commissioned a handful of contemporary artists and illustrators to create original artwork for each chapter in the movie. 

Animation played a key part in our user experience, not only in bringing the interface to life and delighting our users, but by playing a functional role as well. In addition to defining spatial relationships and orienting the user, they create a continuous state of narrative flow and real-time feedback that aligned with user expectation. We spent multiple rounds in After Effects perfecting the timing, motion, and curve data of our animations and a great deal of time sitting with the development team to ensure their accuracy.  

IMPLEMENTATION

During the implementation phase, I spent countless hours QA'ing and sitting with the development team to make sure that our UI was pixel perfect and that the integrity of our designs were preserved, identifying any potential gaps and design improvements where needed.  Voice as input had been an important consideration for the Apple TV UI, but due to a few technical constraints was not fully implemented. 

END RESULT

Mosaic surpassed our user engagement and retention goals and was featured in Apple's App Store with a 4.5 star rating. In addition, it was showcased at the 2017 Future of Storytelling Conference and highlighted in a number of publications including, Variety, the Hollywood Reporter and Wired Magazine. 

'Mosaic' Is The Most Innovative TV Series Maybe Ever —Daily Beast

Steven Soderbergh's New App Will Change How You Watch TV —Wired