Foundation | Motion Tokens

  • Role: Lead Product Designer

    Company: The Washington Post

    Timeframe: Dec 2024 - May 2025

  • I led the development of a comprehensive motion design system for The Washington Post that standardized animation across all digital platforms. By establishing principles, timing tokens, and easing curves, I created a unified motion language that strengthened brand identity while providing clear implementation guidelines for developers. The system improved workflow efficiency, enhanced user experience, and ensured consistent animations throughout our products.

  • Our motion token system significantly enhanced the design-to-development workflow across The Washington Post's digital platforms. By establishing standardized animation patterns, we've empowered teams to implement motion more efficiently, resulting in more consistent user experiences and a stronger expression of our brand's visual identity through purposeful movement.

The challenge with implementing animation without guidance.

Without standardized motion guidelines, The Washington Post faced inconsistent animations across its products. Teams implemented motion patterns independently, creating disjointed user experiences, increasing developer workload, and weakening brand identity. This fragmentation forced each product team to reinvent animation principles, resulting in inefficiency and inconsistent experiences. Developers and designers also arbitrarily assigned duration times to animations that didn't suit the experience, further compromising usability and consistency.

Envisioning The Washington Post’s first motion token system.

I envisioned a transformative motion design framework that would fundamentally elevate our user experience across all platforms. My vision was to create a practical token system that would serve as the foundation for our design language. This would give teams freedom to innovate within a unified framework. My approach focused on five key objectives:

  • Function as a universal design language across all our digital platforms

  • Empower both designers and developers with intuitive implementation tools

  • Transform user interactions through thoughtful, purposeful animations

  • Strengthen The Washington Post's distinct visual identity through characteristic movements

  • Accelerate development through standardized, reusable motion patterns

Identifying insights around our motion implementation practices.

I conducted forty structured interviews with designers and engineers across product teams to understand the challenges and opportunities of implementing motion in our products. These in-depth conversations revealed critical insights about workflow obstacles, technical constraints, and user experience expectations. By speaking with individual contributors and team leads, I gathered comprehensive data about:

  • Existing animation practices and implementation methods

  • Pain points in current animation development workflows

  • User feedback on current motion experiences

  • Technical constraints across platforms

These interviews revealed that teams wanted clear guidelines but needed flexibility for their unique product needs. Most importantly, they highlighted inconsistencies in timing, easing functions, and animation purposes across the organization.

Interview framework for the motion token research study showing the structured approach with 15-minute sessions across 40 engineers and designers. The right panel displays key research questions exploring how teams implement animation, whether it serves productivity or delight, common pain points, and inspiration from external examples.

Visualization of our motion token research participants organized by department, showing the distribution of interviews across The Washington Post teams. The interface displays 40 participants categorized into five key departments: Product Design (10), News Design (3), Brand & Marketing (2), Motion Graphics (1), and Engineering (7).

As I analyzed the insights from our interviews, a clear narrative emerged about the challenges teams faced with motion design implementation. Our designers and developers were essentially speaking different languages when it came to animation:

  • Insight #1: Teams lacked standardized design principles and processes, which can create gaps when cross-team collaborating.

  • Insight #2: Development of motion and animation faces tool, resource, and technical constraints including limited skillsets and knowledge about accessibility requirements.

  • Insight #3: While there are a varying range of use cases, motion and animation are being implemented for both user productivity and user delight.

  • Insight #4: Many developers are left to custom code motion/animation, but some developers do pull from preset animation code for efficiency.

Research insights from 40 team interviews showing how motion supports both user productivity and delight, with key challenges highlighted in standardization, implementation, and technical constraints.

Research insights from 40 team interviews showing how motion supports both user productivity and delight, with key challenges highlighted in skillset and bandwidth, collaboration, and documentation and process.

Outlining the system.

Drawing from research findings and team feedback, I began outlining a motion system that would authentically represent our brand identity, solve our implementation challenges, and create a cohesive standard:

  • Motion Principles: Fundamental animation philosophies guiding all movement decisions

  • Implementation Guidance: Practical examples and implementation guidelines for developers

  • Base Tokens: Primary animation properties including duration, easing, and transformation values

Crafting the token system through interactive prototyping.

I created detailed Figma prototypes to demonstrate our motion principles. These prototypes showed how duration, easing, and transformation work together across our components. Team members could see how our motion principles enhanced interactions in a way that represented The Washington Post's brand identity.

  • Duration tokens: I established a systematic set of timing values (ranging from 50ms to 1500ms) based on the complexity and significance of UI interactions. These tokens create a clear hierarchy where subtle feedback animations are quickest, while more substantial transitions use longer durations for appropriate emphasis.

  • Easing tokens: I defined a core set of easing curves correspond to different interaction patterns, such as ease-in-out, ease-in, and ease-out. Each curve was selected to reinforce natural movement principles.

  • Transformation tokens: I created standardized scale, rotation, and translation values that maintain visual harmony while providing appropriate emphasis for different interaction types. These precisely defined transformations ensure consistency across components while allowing for expressive motion where needed.

Motion token system overview showcasing animation categories including Fade, Rotate, Scale, Slide, Duration, and Easing. Each category features example tokens with visual representations that demonstrate the movement pattern when hovered.

After defining the token values, I created interactive Figma prototypes to demonstrate the motion system in action. These prototypes served as the foundation for collaborative refinement sessions with key stakeholders from product, engineering, and newsroom design teams. Through these iterative sessions, we collectively fine-tuned timing values and established the framework for our documentation.

The result was comprehensive documentation covering motion tokens and principles, with special attention to accessibility guidelines for reduced motion preferences.

Motion token system documentation showing duration, easing, fade, rotate, and slide animation categories with their corresponding values and descriptions. Each section displays token names, preview indicators, timing values, and detailed implementation guidance for consistent application across digital platforms.

Results: Streamlined Design-to-Development Collaboration

The motion token system is now fully documented, allowing me to consult with various product teams using these resources. Though this is still in development for our design systems site, our documentation has gained widespread adoption across product teams. It provides clear guidelines, practical examples, and code snippets for seamless implementation across all platforms.

Teams report that the system has streamlined the design-to-development process. Designers now communicate animation specs confidently using our standard terms, while engineers value the practical implementation guidance. The clear duration scales and easing curves have reduced guesswork, minimized discussions, and helped teams create consistent, performant animations that truly represent The Washington Post's identity.