PING AN MOTION SYSTEM
Building a unified, engineered motion language for a 100M+ user ecosystem.
As Ping An Jin Guan Jia (Ping An Life App) scaled to serve over 100 million users, the user experience faced a critical challenge: fragmentation. Without a standardized motion system, our diverse product lines suffered from inconsistent visual styles and redundant development efforts. Engineers were manually recreating animations, leading to high implementation costs and compromised performance.
My Role
I led the initiative to build the Ping An Motion System, transforming a chaotic workflow into a streamlined, efficient 'design → code' pipeline.
Physics & Tokens
We moved away from linear motion by defining 6 core easing curves. These were packaged as Design Tokens (e.g., ease-in-out brand), allowing developers to implement natural motion with a single line of code.
Visualizing the "Invisible": Standardizing Easing Curves
Motion physics is often the first detail to fall in development. Engineers tend to default to linear easing — making animations feel mechanical and flat. To bridge this gap, I created visual interaction guides and crafted a standardized Demo (After Effects). These side-by-side visualizations achieved a key goal — making abstract timing functions (like cubic-bezier) intuitive and codifiable while empowering developers to confidently use basic transitions.
Quantifying the Feel: The Cubic-Bezier Standards
To eliminate the 'guesswork' in implementation, I codified the motion curves into precise cubic-bezier specifications and timing standards. I pinned each Token's cubic-bezier coordinates and defined detailed duration values. These were packaged as design tokens.
Standardized Motion Components
I applied the codified physics tokens to a library of standardized UI components, including Modals, Toasts, and Cta. This ensured consistent motion behavior across the ecosystem, eliminating the "fragmented feel" of the previous version.
The "Periodic Table" of Motion
Unlike static design components, I systematically traced custom branded Motion Types — from simple tangible to complex — to compare and classify animations into standard, reusable "motion atoms", ensuring a seamless handoff to engineering.
Delight & Micro interactions
Financial apps don't have to be boring. We introduced "Emotional Design" through functional widgets and micro-interactions.
Widgets: Real-time weather feedback with dynamic gradients.
Micro-interactions: "Spring" physics applied to buttons for tactile satisfaction.
Impact & Results
Faster Development
Reduced time to implement animated features across the product ecosystem
Smaller Assets
Asset size reduction through code-based Lottie implementation
Products Unified
Standardized motion system applied across B-end product lines
UX Consistency
Unified motion language ensuring seamless user experiences