Credit Karma

Using movement thoughtfully to guide users through their financial journey

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 and establish principles that would guide the use of motion with purpose.

A grid of five squares labeled "DEPTH" (green square), "DIRECTION" (overlapping blue triangles), "SPEED" (pink circle), "NATIVE" (yellow bars decreasing in height), and "EXPECTED" (blue sphere with shadow).

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, mapping 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.

The images depict pink 3D rectangular shapes viewed from different angles, a blue circle with sliders labeled "Stiffness" and "Damping," and two graphs comparing "Linear" and "Easing" motion.

Governance

Systems are 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 utilised.

Diagonal mockups representing different image features pink 3D rectangular shapes viewed from different angles, a blue circle with sliders labeled "Stiffness" and "Damping," and two graphs comparing "Linear" and "Easing" motion.

Once we established the high-level systems, we needed to demonstrate their implementation across all the core components.

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.

Video presenting the credit karma app featuring real-world context of the features for Credit Karma products and experiences.

Details

Client

Credit Karma

Industry

Finance

Studio

Seattle

Project team

Stefan Hajek

Patrick Halferty

David Walsen

Ellen Hafer

Eric Bird

Bryant Little

Becca Rice

Sydney Fullerton

Stephanie Darcy

Offerings

UX Design

Digital Design

View more

Credit Karma

Get in touch

Erik Wagner

Executive Client Director, Brand & Core Growth,
New York

LinkedIn