CHRIS Z YU
 

Content Layout Planner

Realistic Retina Macbook Pro Mockup Vol.2 - Anthony Boyd.jpg
 
 

The Challenge

Designing Every Configuration

Animating content for a single video-wall is challenging, but animating content for every video-wall in every Microsoft Store configuration borders on insanity. How can we help Synect’s animation studio produce content for every unique Microsoft Store?

Role: Product Manager & UX Designer

The Solution

Only Design What is Necessary

We developed a desktop application that allowed Synect’s animators to visualize multiple video-walls, and multiple Microsoft Store layouts. This enabled the animation studio to work in a modular manner thereby reducing the amount of content that needed to be created.

sydneyFlagship.jpg

The Result

Easier, Better, Faster, Stronger

The introduction of Content Layout Planner accelerated the workflow of Synect’s animation studio enabling their small team to produce large volumes of content for every unique Microsoft Stores. With this new workflow, Synect’s animation studio was able to facilitate some of Microsoft’s largest in-store marketing campaigns.

Microsoft and Synect have developed a very complex environment, and a very complex set of capabilities, to enable our billion pixel canvas. All of this technology exists for one reason: to give our customers an amazing in-store experience
— ARTURO GARZA · MICROSOFT STORES USER EXPERIENCE DESIGNER, MICROSOFT

After implementation, Synect was able to reduce render times by 50% and increase content production speed by 30%. Consequently this led to more team happy hours.

 
 
 

What We Learned

Rendering Ain’t Easy

To display content on physical video-walls required Synect’s solutions department to render, split, and sequence the video content; this process could take hours, resulting in several working days lost between design iterations.

flow2.jpg

Designing for Modularity

We discovered from our interviews, that Synect’s animation studio was already designing in a modular fashion, we just needed to take their workflow and translate it into our application.Their biggest pain-point with a modular workflow was that they had no quick way to preview their design configurations.

Early sketches of common video-wall content configurations

Early sketches of common video-wall content configurations


What We Built

Render Farm Integration

We designed a desktop application that allowed Synect’s designers to drag and drop animated content for every video-wall configuration and preview the animation. After the designers are finished, they could export their designs to a .json file that tells downstream systems what to render, where the rendered content should go, and what order they should play in.

clipSequence.gif

Quality Assurance

Animators now had the ability to preview their designs quickly, which allowed art directors to host another round of design critique and feedback. Quantity vs quality, why not both?

IMG_20180213_161138.jpg

A New Workflow

Instead of rendering full sized videos, our animation studio rendered quarter scale compositions and imported into our tool. This allowed them to visualize content quickly and cut render times in half which resulted in faster production times with less render time overall.

Blocks.jpg

A Loading Animation

Of course, we have a loading screen. What application is complete without a nifty loading animation? Long load times would occur on larger projects, so I designed a little something in Maya to help distract the animators.

loading_optimized2.gif
 
 
whiteBG.jpg