Motion Design System
Credit karma
People of all walks entrust their financial well-being with Credit Karma. Part of their duty to their customers is to securely manage sensitive data, but security takes time. Their app had long load times that were causing a general sense of sluggishness for users. Designit was brought in to streamline the perceived responsiveness of the app through a new motion design system to be implemented within their existing UI across mobile and web platforms. I had the privilege of leading the motion design work and establishing the patterns and rulesets for the system.
Roles
Lead Motion Designer
Credits
Agency
Designit
GCD
Stefan Hajek
CD
Patrick Halferty
Designer
Ellen Hafer
Designer
Eric Bird
Our first step in determining scope and direction was to explore the app holistically and map all the opportunities for motion. We also grouped and classified these opportunities early on to establish patterns for elements that should behave similarly.
For instance, smaller elements like buttons and dials would use bezier easing functions, while larger elements like overlays and page transitions would use more sophisticated spring physics algorithms to drive speed and easing.
Systems and patterns are effective for consistency in application, but we needed to integrate with the existing design system and align with Credit Karma's visual identity. So we built companion usage guidelines that provided a clear implementation reference for existing components of their design system, as well as a rationale and guidance on how to implement motion as new components were created.
