You.i Engine One: Improving Team Efficiency with Seamless Designer to Developer Hand-Off

Josh Toczko
Josh Toczko
You.i Engine One Designer Developer Efficiency with React Native Designer Workflow Systems

As anyone who’s ever worked on front-end development can attest to, the hand-off between design and development is where things break apart. Designers conceive beautiful UIs yet developers can’t fully realize that vision because they lack the proper tools, resource time, or the end platform’s capabilities aren’t up to par. This means both sides have to compromise, which sends your resources back to the drawing board.

In the streaming world, that process is repeated for every target platform (iOS, Fire TV, Roku, etc.). It’s something media providers deal with on a daily basis when architecting an OTT solution for many screens.

How can we reduce the redundancy of per-platform builds and shift resources to focus on better design and stronger features? That’s the problem we try to solve with our video app SDK, You.i Engine One. We believe the answer is separating the two disciplines so there’s less back-and-forth between designers and developers. The designer is free to act on their artistic vision. The developer can stick to implementation.

In the following video, I, a developer, demonstrate how our Adobe After Effects designer workflow successfully translates a designer’s creation into developer-ready code to simplify hand-off and improve efficiency.


Focusing on Features & Functionality

Jumping into Adobe After Effects as a developer may seem counterintuitive if the goal is to work independently. On the contrary, using You.i Engine One’s design system tooling lets me quickly build a skeleton app that I can test the functionality of. I don’t need to wait for the full UI design in order to start my work, which makes me more efficient.

You-i-Engine-One_Designer-Developer-Efficiency-React-Native-Designer-Workflow-Systems_Developer art

Developer art

It’s not pretty but that’s okay. It’s not my job to focus on art. That’s where the design team comes in. I need to make sure everything works the way it’s intended. The designer can make any and all changes to my skeleton UI without it affecting my work. As long as the naming conventions of the assets don’t change, we’re golden.

React Native & JSX

You.i Engine One supports both C++ and a modified version of React Native as development languages. As someone with a decent understanding of Javascript, this is great. I can work more efficiently when hooking up data to UI elements. I also get the added bonus of a React Native design tool within After Effects. Our Engine’s React Native solution can import files produced by After Effects. There are no added steps for the designer to cater their designs for C++ or RN. They can still create buttons, text fields, image sets, and animations the way they see fit. All I have to do on my end is reference these assets in my code via ‘Ref’ components (ButtonRef, TextRef, TimelineRef, etc.).


Adobe After Effects

We’ve spoken in-depth about our After Effects designer workflow. We encourage our customers to push the bounds of their brand and not settle for a template OTT app. After Effects is a motion graphics tool that can transform an app from good to great with custom animations. It’s also a widely known tool understood by most designers—hence the integration with our engine.

You-i-Engine-One_Designer-Developer-Efficiency-React-Native-Designer-Workflow-Systems_designer reskin

Developer art reskinned by a designer. All backend properties are still the same (Image, button, text, etc.) yet the UI is completely different.

The jump from my laughable developer art to a standard PDP page took zero code changes. Our designer has reskinned the Play, Thumbs Up, and Watchlist buttons. The main poster image is now on the left with a subtle gradient darkening the background. There’s even an in and out animation that I can import to my React Native script.

Being able to work independently and come out with a product we’re happy with is powerful. You.i Engine One aims to empower designers and developers to focus on what they know. Communication between departments is important. It’s the constant back-and-forth of what can and can’t be done that makes hand-off frustrating. When you’re working in a competitive market like streaming media, speed and efficiency is of the essence. Thank you for taking the time to read this post. If you haven’t already, please check out the video above for a visual demo. If you want an in-depth look at the relationship between designer and developer in You.i Engine One, check out our fundamentals series. My colleague, Geoff Brown pushes the limit with design and I deploy his creation on an operator set-top box, Apple TV, Android TV, Xbox One, and mobile—at the same time.

Here’s something similar we think you’ll enjoy.