Motion Guidelines
Developing a unified motion design system to improve product consistency and user experience at Pinterest.
Role
Product Designer
Team
Gestalt Team
Motion Team
Year
2024
Tools
Overview
Problem
Back in 2023, Pinterest lacked a unified approach to motion design, resulting in inconsistent transitions and reduced user experience.
To address this, we developed the Motion Guidelines integrated into the Gestalt Design System, providing clear principles, scalable patterns, and actionable specifications for product teams.
Challenge
Lack of a a cohesive motion framework caused inconsistencies in user interactions.
Need to align motion across diverse teams and use cases while maintaining flexibility and scalability.
Design process
To establish a solid foundation for Motion Guidelines, we started with a comprehensive audit of the existing motion patterns in Pinterest’s app.
Audit and research
Reviewed key transitions and animations across Pinterest app.
Conducted a competitive analysis of motion guidelines.
Created database and documented every UI element with motion and without.
Following the audit, we created an inventory of which components had motion and which didn’t to ensure a clear starting point for defining motion principles.
Looking back, I would recommend documenting every single UI element that incorporates motion, not just key transitions. Having a centralized reference would have streamlined future iterations and made it easier to locate specific components during research and implementation.
Motion Principles
To ensure a consistent and meaningful motion experience, we established three core Motion Principles that guided all decisions.
Set Easing and Timing values
We defined a set of universal easing curves and timing values to create a seamless and cohesive experience across different transitions.
As part of this effort, motion tokens were implementing to standardise these values across the design system.
Prototyping in ProtoPie
To validate our motion guidelines, we created interactive prototypes in ProtoPie, simulating real-use scenarios.
These prototypes helped us refine easing, timing, and behavior, allowing us to gather stakeholder feedback and iterate quickly before system-wide implementation.
Documentation and system integration
Once finalized, 9 motion components were uploaded to Gestalt Design System.
Also, detailed specifications were written and examples for developers and designers.
Motion accesibility
Considered providing options to disable or adjust the Motion.
Ensured that Motion does not interfere with the user’s ability to use the product.
Learnings
This project reinforced the importance of collaboration between product designers, motion designers, and developers to create a scalable and cohesive design system.
It also highlighted the value of well-defined principles. I learned to balance the technical and creative aspects of motion design, ensuring that each transition felt natural, intuitive, and aligned with Pinterest’s design principles.
Ongoing Work
The development of Motion Guidelines is an ongoing process. We continue refining transitions and incorporating new micro-interactions to enhance usability and engagement. This iterative approach ensures that motion design evolves alongside product updates.
Thank you for reading.
