Logo BlueChat bubble saying hi there
AboutworkContact
Improving collaboration between design and engineering
Mode
Overview

With a background in development, I quickly realized that what seems obvious to designers can be anything but for developers. Take animations, for instance. For designers, creating a smooth transition in After Effects or a detailed prototype in Figma is straightforward. However, handing that prototype off to a developer often leads to a lengthy back-and-forth as we try to convey the nuances of how the animation should function in the app. This gap in understanding highlights the unique challenges in bridging the worlds of design and development and creates unnecessary back and fourth for pieces of work that often get deprioritised but are a huge part of the user experience.

My Contribution

Product Design, Motion Design

The Team

1x Product Designer, 2x Engineers

Motion Specs Project
First Steps

When planning motion for a UI design, I often start with pen and paper to sketch out my initial concepts. This approach lets me quickly visualize and iterate on ideas without the constraints of digital tools. I draw storyboards to map out the flow of transitions, noting how elements will move, change, and interact. By sketching keyframes, I can outline the sequence of actions and define the timing for each motion. These hand-drawn plans provide a clear, tangible reference that captures my vision for the animation, ensuring that the dynamic aspects of the interface are thoughtfully considered and well-documented before moving to digital prototyping tools.

Motion Specs Project
Process

After that, one would typically create a prototype in After Effects or Figma and send it to the engineers, expecting to see the same result implemented. This process however is broken, leaving the engineers doing a lot of guess work which in turn creates more round of lengthy reviews. After extensive research, I found a solution from a keynote by a major tech company facing the same problem: motion specs. I redefined all the dashboard animations using graphs to specify the duration, transitions, and changes for each element. This fascinating process taught me how to translate movement into precise, actionable terms.

Motion Specs Project
Outcome

Developers were thrilled to finally have precise values to work with. This approach significantly reduced development time and nearly eliminated the need for extensive reviews, as they could clearly understand my exact vision. Most importantly, the initial results closely matched my prototype, allowing us to move forward swiftly and focus on other tasks. This newfound efficiency streamlined our workflow and brought my designs to life with remarkable accuracy.

Motion Specs Project
Thanks for reading :)