Motion for Design System
2019 — 2020
My role
— Motion design lead
— Research
— Demo animations
— Documentation
Project background
Design systems have been a top priority for many UX teams for the past few years. As product designers, we appreciate the benefits of a design system:
— Consistent design across all platforms.
— Faster releases without quality loss.
— Improved efficiency: designers and developers don’t waste time on repetitive work.
— Faster and more efficient scalability of the company products.
Bringing motion into our platforms
The strategy
I conducted a competitive analysis of design systems. Despite in-depth research, I found very few details about motion. But, I used my knowledge of animation principles and physics laws to create design system-appropriate components.
Audit (list of components that needed animation)
I also developed consistent motion guidelines and principles for our core products (Mobile app, Web site, and Kiosk).
Finally, I defined timing curves, choreography patterns, and effects to improve the products’ usability.
Transition anatomy
Our principles: Functional and expressive
Solution
“Functional animation fills the comprehension gaps.” Kit Oliynyk
Motion is an excellent instrument to delight customers, but I had to first think about a functional approach.
My main goal was to use motion as the connection to enhance usability and improve the lack of clear communication in some areas of our products.
Animation is all about timing
I also defined the right timing curves and duration for each transition and component. And, I designed choreographies for more complex components. Finally, I executed demo animations based on animations’ best practices.
I listed the components that needed animation and made sure those animations had a clear purpose.
Natural motion (selecting the right curves)
Choreography (accordion)
Choreography (motion specs)
