Overview
Problem
Back in 2023, Pinterest lacked a unified approach to motion design, resulting in inconsistent transitions and reduced user experience.
Challenge
Building motion system from scratch
Making motion visible as system, not decoration
Scaling across teams while staying flexible
Solution
To address this, we developed the Motion Design System and Guidelines integrated into the Gestalt Design System, providing clear principles, scalable patterns, and actionable specifications for product teams.
Design process
the key competitors
Audit
Conducted a competitive analysis of motion guidelines.
Reviewed key transitions and animations across Pinterest app.
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, 3 core principles were defined.
I participated in workshops where these principles were shaped, and later used them as a foundation for component-level motion specs.
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 and introduced to bridge the gap between design and engineering..
Prototyping in ProtoPie
ProtoPie was chosen as the prototyping tool. It allowed building shared libraries used across the organization and was already approved internally. I created interactive prototypes to validate motion behavior before implementation.
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.
Examples
Here are some before/after examples showing the direction of improvements. Many more components were refined.
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.
What I learned
Systems Are Built Together
This project reinforced the importance of collaboration between product designers, motion designers, and developers to create a scalable and cohesive design system.
Principles Before Designs
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 and System 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.
