Dataclay QUE
Dataclay QUE is SaaS based rendering management system that integrates with Adobe After Effects® to optimize and automate video re-versioning workflows. It's designed to work in tandem with Dataclay's Templater, a tool for automating video production by dynamically inserting data into After Effects projects.
As Dataclay's founder and CEO, I spearheaded the development of QUE, orchestrating the product's lifecycle from conceptualization to market release. My roles encompassed UX design, solution architecture, software development, and leading our branding and marketing strategies.
QUE is an outgrowth of a bespoke solution that Dataclay delivered to the National Football League that streamlined the workflow between the marketing and production departments. It is now used by enterprises such as Amazon, Warner Bros. Discovery, Hogarth Worldwide, and other agencies and production studios around the world.
The following represents work that I either crafted, implemented, or directed. Development of QUE took place over the course of two years and is currently maintained by Dataclay.
Teaser video
Dataclay's customers were itching to get their hands on QUE. While we wrapped up development on the beta release, we made this teaser video to keep our customers interested in the big reveal. I worked as a producer with a studio in Cape Town, South Africa to nail down product branding and to create this video.
Explainer Video
After releasing QUE, I acted as producer for this explainer video. Working with my team at Dataclay, I collaborated in writing the script and guided design, animation, and audio professionals towards the completion.
Landing Page
I designed and implemented QUE's landing page that appears on Dataclay's website. As a SaaS offering, I positioned it in a way that current Dataclay customer would understand and immediately grasp. The target audience were motion graphics designers and post production professionals.
Documentation Site
I wrote all technical documentation for QUE's application programming interface. Creating an API is almost exclusively an exercise in information design. It requires a person to break down what a product can do in a logical manner such that a third-party software developer can build something with it. This site uses the Postman content management system for publishing and easy maintenance.
QUE Component Diagram
I created this diagram to illustrate the four main components of QUE. The goal was to ensure users could grasp general concepts quickly and efficiently. It shows how all QUE's components work together to create a larger system for video re-versioning.
Dashboard Screenshots
These are screenshots of QUE's live dashboard. End-users work with this interface daily and manage data for automating the re-versioning and rendering of thousands of videos. The design required a consideration of vast amount of data to display as well as the real-time changing data. It provides an overview of users' automated video rendering systems.
In addition, I had to consider the types of interactions that a "data wrangler" might have within this interface. It turns out that managing and working with thousands of data points within an interface requires unique interactions. We customized interaction that shipped with the UI toolkits that we embedded into the dashboard.
High Fidelity Interface Design
These mockups take the wireframes a step further to get closer to actual implementation. During the code implementation phase it was more economical to incorporate pre-built user UI toolkits which ended up defining much of the visual style of the interface. However, this was a critical step in making the experience using the dashboard simpler and more intuitive.
Wireframes & Information Design — Stage 2
During the second stage of wireframing, I guided an information designer towards cleaning up the first set of wireframes along with elaborating on possible screens. By this stage, it became evident that the success of QUE would largely be in the careful design of information.
Wireframes & Info. Design — Stage 1
These were the earliest wireframes of QUE. I created these in Adobe XD. Designing these was imperative to communicate my ideas about QUE's components with other team members to move the project forward. A majority of this exercise centered around information design principles.
See it in action!
I produced an instructional video showcasing how QUE easily integrates data with Dataclay Templater running within Adobe After Effects. Click play to watch!
