Building UX Motion Design Systems
During my time at Amazon, I have been responsible for defining the motion language of 2 unique and totally different Amazon brands. The design systems that I have built are comprised of reusable motion variables that combine to create identifiable and recognizable motion patterns. These motion definitions provide a quick and responsive framework for all UX animation. This customer-centric system maintains brand and design continuity across all interactive video ad products. . By utilizing pre-defined motion tokens, this system defines a common language between design and engineering, thereby streamlining the handoff process and reducing inconsistency between design mock and final output.
Driving interactive video ad (IVA) motion on FireTV, Prime Video, and other 3rd party streaming services.
Amazon Ads UX
Element Animation Properties and Definitions
Similar to a visual design system, motion systems are made up of reusable units of animation that can be applied consistently across any individual elements. Elements are the graphical objects or pieces that will be animated. They might include a group of elements, components, icons, or even an entire screen background. Motion token categories include: easing, duration, delay values. This structure allows for a consistent, efficient, and scalable design system that maintains brand & design continuity across all ad products.
Standardized Timings and Delay Multipliers
Duration tokens are standardized, preset variables used to define and manage the timing of all animations, transitions, and micro-interactions. These tokens help maintain consistency and ensure a cohesive user experience across different components and interfaces. Furthermore, motion tokens support scalable design by providing a structured and deliberate approach to timing elements. Delay multipliers are used for staggering the animation start times of multiple elements on screen. An example would be a row of buttons appearing on screen during a transition. Instead of revealing all at once, we stagger the animation so there is a slight offset to their appearance on screen. This technique helps establish and reinforce object hierarchy.
Combining Properties to Form Complex Motion Patterns
Actions are a set of overlapping motion rules that can be applied to any element to create a recurring animation preset. They are defined when one or more of the pre-defined element animation properties work together to change an element over time. All animation properties of an element that that change over time (animate) are governed by a start & end value, an easing curve, and a duration preset. Not all animation properties of an action are the same. For example, an action’s X-position change may have a different duration and easing curve then its opacity change.