Epic Games / Unreal Engine
I brought many years of broadcast design and technical experience to Epic Games with the goal of building a real-time system that could rival any tool on the market and add the rendering power of the Unreal Engine to the mix. This system required retooling on pretty much all fronts and, with the helpful feedback of an enthusiastic industry and community, we launched the production ready version in Unreal 5.7 in addition to a massive and well-received sample project that I directed that was designed to test the limits of the product.
Motion Design Interface
Designed many elements of the general interface of the Motion Design toolset. This final UI was refined over several iterations based on my history in the Unreal Engine and broadcast use cases as well as critical industry feedback from our beta testers and broadcast partners. All imagery is from the sample project that I worked on with Capacity Studios, an external partner that was new to the toolset. All feedback from their designers was extremely valuable because they were the exact type of customer that would be using the toolset - seasoned design veterans who were previously focused on using tools like Cinema4D and the Adobe Suite.
Outliner Rework
The way that you nest your level in Unreal, prior to Motion Design, was oriented to be what was seen as best for video game development. This was done in what is called the “World Outliner.” There were inherent issues with it. Doing things that designers are used to, like nesting elements under a single positional transform was simply not possible. Just to pick on one more core element to the design industry is the ability to filter out elements to reduce the noise to only the specific thing you are working on - Unreal didn’t really have that.
Motion Design solved all of this to the point where many members of the larger Epic team were wondering why the engine didn’t shift to this model entirely.
Filtering, nesting, basing visibility on inheritance, color coding groups (similar to After Effects). This is really just the beginning of what was done to enhance the UE workflow.
Before Rework
After
Material Designer
Many of our clients are were a combination of Adobe and real-time software designers. Both of those workflows catered to designer-friendly UX as opposed to the more tech-art focus of Unreal Engine. The Material Designer tool that I built the UX for intentionally takes inspiration from tools that our userbase would understand immediately. This greatly simplifies the act of building customizable materials for designers familiar with layer-based systems like Photoshop. The top 4 images are the UX focused improvements that Material Designer brings. There were several iterations explored before landing here, but the most comfortable workflow was the vertical layer style that users have been trained on for their entire career.
The node graph seen below is how someone would traditionally build this exact element using the old material system before this improved workflow was designed.
Motion Design Rundown
The Rundown is where the live operator can call up any of the designed levels, call up the properties that are remote controllable, and build up their show.
This was a key bit of the interface design to nail down, so I took great care to make sure that it was familiar for existing broadcast operators to dive into and, just in case they needed to, render out graphics instead of of playing them out in real-time.
The user is also able to set up their output channels in a custom broadcast setting panel. All of these features were expected by clients and the industry at large, so getting this right and ensuring that it also had a matching API was mandatory.
Remote Control
Remote Control allows for any property in a level to be exposed to the artist/graphics operator in order to easily customize the design content without the ability to break the core systems under the hood. This is one of the final steps to rig a level for on-air playout.
What you’re seeing on the right is the same graphic stylized depending on those exposed properties. Each property is defined with a Controller number (in the 2nd column) and can use a variety of behaviors to expand what the controller influences.
Remote Control Web
Web based Remote Control utilizes the same property exposure but allows for elements to be controlled wherever a web browser can be found. We specifically did a lot of work on iPads and primarily for linear content such as films. The control panels to the right here handle two major features requested by a major production. They needed a panel that handled color correction for specific areas in the environment as well as the ability to control “Light Cards.” So two different panels, with similar design direction, needed to be designed and built. I handled the design side and we had a software team that handled coding it.
In addition to pre-structured panels, users are also able to create bespoke layouts based on properties that were exposed in-engine.
Scene State
The demand for broadcast graphics to have an “always live” nature is a huge part of the workflow. Unreal simply did not have a built-in solution for that, so I took my prior broadcast knowledge and drove the effort to get a system constructed that would be both familiar and a giant upgrade to existing products in the marketplace.
What you are seeing on the right is the state machine that was designed to give users an easily testable set of tools, written out plainly. Want to play one of the sequences that you have in your level? Look no further than the “Play Sequence” node. Once we had the ability to control delay, data sources, and the sequence list to the bottom right of this frame, you could control which of those animations could play.
