Credit Karma
Motion design system
Using movement to guide users through their financial journey
Principles of motion
Our job wasn’t just to add animation to Credit Karma products and destinations. We had to use motion with intent to enhance the user experience and make the user journey more seamless. We also had to educate internal teams on mechanical usage, as well as establish principles that would guide the use of motion with purpose.
Depth
Direction
Speed
Patterns
When building systems and corresponding guidance, finding patterns is key. Our first step in determining scope and direction was to explore the relevant experiences holistically and map all the opportunities for motion. Patterns also played a part in articulating the physics behind the motion elements to ground all motion-related brand experiences and components in consistency.
Easing vs. linear
Spring animation
Governance
Systems are really effective for consistency in application, but when merging a brand’s visual identity with an entirely new system, governance is key. So we built companion usage guidelines that outlined pillars and principles of usage, as well as guidance on component-level implementation. We married the physiological with the mechanical to articulate system use that could be understood and effectively utilized.
Depth and sequencing
Crafting a motion ruleset also means establishing physical environments, characteristics, and relationships to create the most natural experience possible.
Motion in practice
Once we established the high-level systems, we needed to demonstrate their implementation in practice. Our guidelines included relevant component-level examples that lived alongside the mechanical details. They provided real-world context to those designing and developing new components and features for Credit Karma products and experiences moving forward.
Credit score dial
Full takeover
Meter
Router