Company & Sector
The Washington Post - Design Systems
Role
Lead Product Designer
Team
Brian Alfaro, Design Lead
Chelsea Brown, Design Lead
Timeline
Dec 2024 - May 2025
Tools & Skills
Figma, Dovetail, Research, Motion Design, Token Design, Documentation
Project Overview
I researched and designed a motion token system to standardize animation across digital platforms, streamline design-to-development workflows, and strengthen brand consistency.
Highlights
⟡ Conducted 40 interviews with engineering and design team members
⟡ Established first unified motion language, including 28 motion tokens
⟡ Created detailed documentation around guidance and technical specs
⟡ Streamlined collaboration between design and engineering teams
⟡ Defined a standard for motion in future component work
My Challenge
How can I better align designers and engineers when it comes to implementing animation (aka The Wild West) to make our products’ micro-animations and transitions more cohesive?
Without standardized motion guidelines, The Washington Post faced inconsistent practices and implementation around animation. Design and engineering teams implemented motion patterns independently, creating disjointed user experiences, increasing developer workload, and weakening brand identity. Developers and designers also arbitrarily assigned duration times to animations that didn't suit the experience, further compromising usability and consistency.
“I just don’t have the knowledge or bandwidth to work on animation.”
- Hani, Product Designer
“Designs are usually handed off without any motion specs.”
- Davis, Developer
“I’m often having conversations about when motion is too much and how it’s centered for user interaction. It’s hard to know if it’s worth making.”
- Matt, Newsroom Design Manager
My Vision
The Washington Post’s first motion token system to rule align them all
I envisioned a motion design framework would empower our product design and engineering teams to implement animation for an elevated user experience. 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:
⟡ Create a unified approach to animation across all our products
⟡ Give teams clear direction on how to implement motion effectively
⟡ Make our products easier to use through thoughtful animation
⟡ Express our brand personality through distinctive movement
⟡ Save time with ready-to-use, well-documented animation standards
The Process: Part I
Identifying insights around our motion implementation practices.
I conducted forty Zoom interviews with engineers and designers from product, brand and newsroom 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.
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 findings from motion design study showing use cases, implementation tools, and key pain points. The Venn diagram illustrates how animation serves both user productivity (interaction and utility) and user delight (visual appeal), with overlap between the two goals.
Research insights from 40 team interviews revealing how motion supports both user productivity and delight, with key challenges highlighted in skillset and bandwidth, collaboration, and documentation and process.
The Process: Part II
Outlining documentation before diving into details
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
A simple outline of the documentation to determine content placement for the design system site.
The Process: Part III
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.
The Result
A robust motion token library to help designers and engineers collaborate and communicate efficiently
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, our documentation has gained adoption from product designers. It provides clear guidelines, practical examples, and animation specs that are used to communicate during handoff to developers.
“The motion tokens have been a great way to communicate with engineering. For example, we used this to decide on the duration of a transition on the article page. What would have been a considerable back and forth is now an $xsm conversation”
- Holly, Design Manager
We anticipate that once the tokens have been implemented into our design system, they will reduce guesswork, minimize confusion between teams, and help with consistent and quality micro-animations and transitions that are reflective of The Washington Post as a brand.
What I Learned
Find a way to ignite thoughtful inspiration, even when you’re working with painpoints.
The research phase taught me the most. Through forty Zoom interviews, analyzing insights in Dovetail, and studying how other companies implement motion systems, I gained technical and philosophical knowledge that complemented my college animation coursework from over a decade ago.
I ended each interview by asking, "What's your favorite example of animation in the wild?" The responses ranged from film to website micro-interactions. This question encouraged engineers and designers to reflect on how they personally experience motion design beyond their work.
During the prototyping and token definition phase, massive engineering layoffs eliminated our design system developers. Working without a developer partner was challenging given my limited coding skills, but I reached out to developers I'd interviewed for any advice or help.
While this token system is still in development, I'm proud of the outcome and how it has helped my design peers in their own work.