Brookes Solomon
Credit Karma Hero.png

Building a Design System in Figma for Credit Karma's design team

Credit Karma

Credit Karma's marketing department creates a wide variety of emails, display ads, and social assets to enhance their brand presence.

These assets were being created from scratch each time, resulting in slow turn-around and deviations from standardized design components. I was brought in to enhance and streamline their process.

The result was a massive increase in design project turn-around, thanks to a comprehensive design system built in Figma.

Utilizing Figma’s Auto-Layout feature and standardizing design library components, the need for design edits was drastically reduced, contributing further to the speed of project completion.

The approach we settled on was to transition their designers to Figma through a combination of lessons and hands-on practice. And once they were ready, to have a design system in place for them to utilize after becoming familiar with the program. This design system became known as Karma Marketing Language (KML).

KML was built and designed solely by myself over the course of 10 Weeks, checking in weekly with Design Leadership to review direction and standardize new aspects of the library. Design assets such as icons and wordmarks were provided by Credit Karma, and ratified in Figma by myself.

Note: This page is currently under continued development, and exists currently as a brief Demo for prospective employers and interested parties.


Overview

Karma Marketing Language at a glance.

Demo-Overview.gif

How It Works

KML enables individuals to focus solely on the visual and messaging assets of a marketing design project. It accomplishes this by providing pre-built templates, that automatically align all pieces of an asset to their proper places. It compounds upon this efficiency by also providing a standardized library of type styles, a brand color palette, and grids.

An example of type styles and one the many mobile email templates.

An example of type styles and one the many mobile email templates.

Adding modules to a template and changing their icons.

Adding modules to a template and changing their icons.


Documentation & Use

While those comfortable with the design system may be able to navigate it quickly like the previous videos, there will always be new hires, and potential questions regarding functionality of the established components. To address this, comprehensive documentation was created in the form of a deck. I also provided onsite trainings in Figma focusing on use of Karma Marketing Language. These meetings were available 1 on 1, or were ran concurrently with up to 50 designers attending.

demo-documentation.gif

You can review the entire documentation deck below (Hover over it and Press Z to scale it to your screen, Navigate with Left and Right Arrow)

Created with Figma


Experience

Creating KML for Credit Karma was in short, a blast. Working collaboratively with the design leadership to sharpen the spear of their design was a challenging and iterative process that I’ll carry with me for a long time to come. This brief Demo covers just a fraction of the work that was done during the course of my time with their company. Alongside the design system KML, I built a separate design library specifically for presentations utilizing the Prototype feature in Figma to migrate their teams from Google Slides, the above deck is an example of that.

I’m very proud of what was created and am happy to converse about it further, and would readily demo it Live for those who’d like a deeper look into Karma Marketing Language.