Credit Karma — Bhawna's Portfolio

Credit Karma Motion Design System

Project background:

Problem statement:

Goal/objective:

Define, create Motion design system for Credit Karma app that fit within the brand guidelines. Create and design data visualization that best described the brand’s identity.

At first glance, we noticed that the information on the micro site was text heavy and therefore did not engage the users. We also noticed that there were infographics that were ineffective at communicating data.

Our goal was to create a system for motion design that can be utilized by the brand to develop their guidelines.

Where we started:
project journey

Define principles

Source inspirations

Audit systems

Build/conduct workshop

Assess competitors

Synthesize findings

Surface opportunities

Map opportunities

Sourced inspirations

During the exploratory phase, classic tiles, ring/circle and bar graphs were explored. Different color palettes as well as gradient options were worked with. The scope was to explore ideas that would communicate the story well, were clear and concise, and complemented the brand guidelines.

Opportunity exploration

During the exploratory phase, classic tiles, ring/circle and bar graphs were explored. Different color palettes as well as gradient options were worked with. The scope was to explore ideas that would communicate the story well, were clear and concise, and complemented the brand guidelines.

Data visualization

Opportunities to explore areas to make data viz more fun, encouraging and easy to follow.

Button presses

Add motion systems design to button presses in order to drive user engagement.

Defined the path

After several iterations of our design processes, we began to upload them into the microsite’s layout. We also created mockups to get a real feel of how these infographics would live on the page within the microsite. We chose infographics that were effectively communicating the story around the data while making it an engaging experience for the users.

CK motion systems should feel: Direct, Intentional, Simple, Alive, Functional, Easy & Familiar — CK motion systems should feel:
Direct, Intentional, Simple, Alive, Functional, Easy & Familiar

CK motion systems should not feel: Inconsistent, Editorial, irrelevant, Slow, Dizzy, Inhibiting and Hip/artistic — CK motion systems should not feel:
Inconsistent, Editorial, irrelevant, Slow, Dizzy, Hip/artistic

What’s coming up