Motion Design & Micro Interactions

Scroll to the bottom to read about my process for developing a Motion Design Language.

I love well-crafted, informative interaction design. Humans are hard-wired to respond to motion. It’s one of our most basic survival instincts.

Good interaction design is about communication (what just happened and what should happen next) and delight (those moments of joy simple animation can deliver). Different animation can make people feel a certain way or respond a certain way.

As DirecTV Now started picking up steam, I leaned into my passion of combining my animation experience with product design. I took on the responsibility of prototyping some early interactions and transitions — ultimately building a small team of designer/animators to build out the motion design system across all platforms. Our work included animating the transitions in After Effects, or building a Principle prototype, to share with engineers so they could replicate the motion design.

So instead of just popping on, how UI elements appear can convey excitement or sophistication or ease. The speed in which things appear can convey urgency. The order in which things appear can draw your eye to the most important element (the element that’s the last to settle into place is what users will see).

Motion Design System

For this project, we had the luxury of having a few months to develop a strong point of view for our design language. I collaborated with the Creative Director on our visual design language, and developed my own Motion Design language. Below are a few pages from the deck.

To develop the design language, I plotted out multiple points along various properties of motion design. I then found examples that expressed each of these properties, placed them along the different spectrums (ex. when looking at the property of Speed, I found examples that embodied Slow at one end of the spectrum, and fast at the other end.)

I then took the entire team through each example, in groups of two so people’s opinions weren’t heavily influenced by other people. I showed each example, asked them what feeling they got from each example, and then asked them where they would plot different parts of our product experience along each spectrum.

It was one of my favorite experiences in my career. The team was heavily engaged and thoughtful. It raised new ideas we hadn’t considered. And by taking each member of the team through it, and sharing the final synthesis with everyone, every team member felt invested in the motion design language, whether or not they had any previous motion design experience.