Building UX Motion Design Systems
At Amazon, I’ve developed motion languages for two very different brands—defining systems of reusable motion variables that combine to create recognizable, consistent motion patterns. These systems give us a fast, responsive framework for all UX animations, while ensuring brand and design continuity across every interactive video ad product.
By using pre-defined motion tokens, I help bridge design and engineering. This makes handoffs smoother and reduces discrepancies between mockups and final output.
Today, these systems drive interactive video ad motion across Fire TV, Prime Video, and various third-party streaming platforms under Amazon Ads.
Element Animation Properties & Definitions
A motion system works a lot like a visual design system. It’s made of reusable units or elements like icons, screen backgrounds, grouped components—that animate according to certain rules. Motion tokens include easing, duration, and delay values.
This structure supports consistency, efficiency, and scalability. Once you’ve defined the tokens, every animation has a shared language and behavior.
Standardized Timings and Delay Multipliers
I establish consistent duration tokens to control all animation timings from transitions to micro-interactions. These make sure everything “feels” like it belongs together.
We also use delay multipliers for staggering animations. For example: when a row of buttons appears, each one shows up with just a slight delay from the last. That subtle staggering helps establish hierarchy and improves the overall perception of movement.
Combining Properties to Form Complex Motion Patterns
Multiple motion properties combine to form actions—preset animations that can be reused. Each property that changes over time (position, opacity, etc.) follows rules: a start and end value, an easing curve, and a duration. Different properties of the same action might use different durations or easings.