Direct is a tool for motion designers to visually provide clear, concise motion direction to engineers. In collaboration with the Material Design team at Google, I created new features, improved the interface, and helped launch the project as open-source to the public.
In the conventional collaboration process between designers and engineers, motion designers will export video from a design tool like After Effects and send it to the engineer. With only the video, the engineer does not know any of the properties or values needed to parameterize the motion in code. With Direct, designers can share videos along with a timeline and numerical specs, which can be viewed side by side. A scrubbable playhead allows engineers to inspect the motion at each frame.
I added the scrubbable playhead and bottom player control interface which binds interaction on the timeline to actions on the video. Previously, the video was hidden in a popup modal and was completely independent of the timeline.
I implemented UX improvements to the editor, including the ability to drag to reorder timeline rows. Previously, users needed to delete rows and re-add them in the correct order.
I also implemented a tab interface to open multiple related specs at the same time, inspired by interactions in existing Material Design tools.
To propose a direction for future work, I made a prototype of Direct integrated with Lottie. Lottie is an existing open-source tool that allows designers to export from After Effects into a json file that can be directly rendered on mobile and web. In Direct, parsing Lottie files would allow automatic import of timeline layers from After Effects, and Lottie-based rendering would allow direct manipulation of individual UI elements to a greater degree than video. Possible interactions include highlighting specific elements when hovering over the timeline row, or live editing and rerendering of properties from the timeline.