Mapping How Movies Get Made

• Role: UX Team-of-one
• Time frame: 6 months

Stop-motion animation production processes are incredibly complex and rely on many interrelated team and department dependencies. Studio leadership needed a way to capture and these document workflow processes and make them visible to all members of the studio. I lead the research, design, and development of a webapp that displayed hierarchical workflow charts that could be navigated simply and intuitively.

Problem Space

Studio artists and managers had spent 10 years honing their craft and making top quality stop-motion films. The processes for puppet and set fabrication, scheduling and filming, and VFX post-production overlays evolved greatly over that time.

So much of the knowledge was institutional and not codified at all, which made it difficult to onboard new team members as well as strategize on how to scale teams to meet growing production needs.

The project had two phases:

1. Understanding the individual workflows and recording them consistently, i.e. generating content
2. Presenting the workflows and their relationship to each other in an intuitive way, i.e. developing the app
   

Research - Process Mapping

I began a series of meetings with department heads, managers, and other key stakeholders to understand the scope of their production processes and understand how all of the pieces from across the studio fit together.

I created lo-fi process maps from some of the initial meetings, and from them I distilled a unified shape language that could be used across the studio. I documented the shape language and flowchart creation method, and a production assistant used the system to create charts for departments across the studio.

Research - User Interviews

During the process mapping meetings, I also asked questions to understand how people hoped to use the body of workflow data as a whole. Two primary use-cases emerged:

1. People who wanted to understand how their individual tasks fit into the larger production process (a 'bottom-up' approach)
2. Managers who needed to understand larger-scale department dependencies for resource planning (a 'top-down' approach)

Design - Information Architecture

To design the app, the first step was to understand the hierarchy of the underlying data structure.

At the top level, I created a relational chart for all of the departments in the production pipeline and their high­-level deliverables. Each department's rectangle would then flow to a midlevel department page showing all of the shops, and then each shop would have its own workflow chart.

Design - UI Wireflows

The key stakeholders bought off on the hierarchy. With the scope of the app's data requirements set, I began to design the user interface.

The flowcharts were the focus of the app, so most of the screen real estate is dedicated to a viewing pane that allows pan/zoom interaction. A toolbar displays information about the chart and allows breadcrumb-style hierarchical navigation, and also toggles a few informational overlay panels.

I created UI wireframes in Sketch based on the lo-fi drawings. I used the SemanticUI design system componentry which was already in use at the studio, and optimized the layout for iPad Pro which was our hardware of choice- though the app would also be used on desktop browsers as well.

Prototyping - Interactive Prototype Development

Using everything I learned in the research and design phases, I began development of an interactive prototype using JavaScript/React. I've created GIFs of a demo version of the prototype with abstracted data:

Chart pan/zoom interaction

The landing page is the studio overview chart. The user can interact with the SVG intuitively with click-and-grab panning and middle-mouse or two-finger zoom control.

Sidebar open/close

A sidebar with a chart legend and user action buttons can be toggled from the toolbar. The toolbar also displays the current department and the name of the workflow.

Jump from department-level chart to another department

Department-level charts are linked based on their upstream and downstream deliverables. The toolbar also has a department dropdown list that allows navigation between departments.

Testing - Usability Testing

I ran lean user feedback sessions with 4 users- two fabrication employees who represented the 'bottom-up' task-centric approach, and two managers who represented the 'top-down' department-centric approach. The tests were informal task-based assessments which took the following structure:

• Introduce the project goal and prototype
• Describe a scenario in which they might use the app, setting up context relevant to their role at the studio
• Observe users interacting with the prototype and thinking out loud
• Ask followup questions

Feedback was very positive overall, and all 4 users were able to use the prototype to gather data relevant to their scenario. From observations, I added a search function so that 'bottom-up' users were better accommodated to access the information they wanted more quickly.

Results

I built out the app for production based on everything I learned in the prototype phase, and it was rolled out to beta release inside the studio a few months later. Reactions were overwhelmingly positive- a tool like this had never existed before, and studio employees were happy to get a visual understanding of how their contributions fit into the overall production process. Additionally, department heads and production managers found it easier to onboard new employees into their specific department's processes. The workflow charts were also frequently used in meetings to center conversations around cross-department collaboration and process refinements.