Overview
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.
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.
Navigation & Transitions
Utilizing the ease-in-out-brand token to create smooth, spatial transitions between high-level navigation tabs.
Widgets: Real-time weather feedback with dynamic gradients.
Micro-interactions: "Spring" physics applied to buttons for tactile satisfaction.