🚀 Theming Credit Karma Tax Experience

I helped lead a system effort to allow seamless theming from the TurboTax design system to the Credit Karma tax experience. I mapped over 450 icons and creating 190+ new Credit Karma themed icons.

📅 Sep 2023 - Current

🧠 Product Design / User Research / Prototyping / Systems Thinking

🛠️ Figma, Illustrator

🏡 Background

For 64% of Americans living paycheck to paycheck, the tax refund is the biggest “windfall” of the year. For both those receiving refund and those who owe a balance on their taxes, the filing process can be perceived as overwhelming and time consuming. Credit Karma members want their biggest possible refund or their lowest possible balance due but are unsure about where to start and how to guarantee the best and easiest outcome.

My team was tasked to create a seamless tax filing experience that was run by TurboTax but displayed on Credit Karma app or website.

We expect our improvements to the Credit Karma tax experience to result in more members filing with TurboTax and more members getting their refunds earlier (through Refund Advance Deposit, 5 Days Early, and Credit Karma Money), enabling them to make progress on their other financial goals.

🤔 User Problem

Existing Credit Karma users try to file their taxes as fast and as accurately as possible with the brand they trust, but they don’t feel confident in filing because they’re unsure of what to expect and why it is themed TurboTax. They are left feeling cautious and skeptical and would rather file taxes on a tax platform instead.

💡 Hypothesis

If we theme the TurboTax experience to Credit Karma, then users will feel more confident in their decision to file in Credit Karma without having to leave to a tax platform.

🤓 User Research

Our researcher organized a qualitative research study to better understand to what extent Credit Karma theming of the tax experience builds or diminishes trust for members; understand how brand perceptions of Credit Karma and TurboTax influence members’ experience of a Credit Karma themed experience; and understand how Credit Karma members perceive the relationship between TurboTax and Credit Karma based on our new design. We ran 2 rounds of user testing: first round were Credit Karma users who were non-TurboTax users. Second round were Credit Karma users who were non-TurboTax users while also being TurboTax detractors.

🔑 Key Themes

For all participants, Credit Karma theming had a positive effect on trust in TurboTax and consideration for filing.

➡️ For those who have a positive or neutral view of TurboTax, the partnership bolstered trust in Credit Karma being able to provide a tax experience powered by TurboTax. They have strong awareness of TurboTax as an easy to use, long standing tax prep provider.

➡️ For TurboTax detractors, their positive brand perception of Credit Karma and Credit Karma theming confers some trust to TurboTax and increases willingness to trial. However, customers prefer greater transparency about TurboTax’s involvement early on.

💭 Considerations for next steps & key opportunities

For an improved seamless tax filing experience, it was concluded that we should:

  • provide a more prominent version of the tax filing experience being “powered by TurboTax” (or alternative partnership messaging)

  • clarify the relationship between Credit Karma and TurboTax early in the flow

  • illustrate the type of Credit Karma data that will be used to streamline the experience

  • be able to theme the TurboTax flow to follow Credit Karma’s design system so that users do not have a disjointed filing experience.

🚧 Constraints

I had to keep in mind the constraints and technical feasibilities of creating this experience. A constraint was that I needed to utilize or contribute to existing capabilities owned by other teams. I had to create within our design system and components in mind.

  • Leverage KDS design language and patterns to reduce the disparity between the experiences and help customers feel like they are in a native Credit Karma environment,

  • We would reskin the existing CGDS (Consumer Group Design System — design system for TurboTax) components to adopt KDS visual styling

  • Deviate from KDS due to technical feasibility, as the effort involved might not deliver the benefit,

  • Meaningfully deviate in high impact areas as patterns aren’t conducive to tax purpose,

🛤️ Theming roadmap

Theming the Credit Karma tax filing experience was a team effort as we had to work with many different TurboTax teams and developers to ensure we could theme components correctly. The major theming work I was tasked with was to map all our TurboTax icons and illustrations to a corresponding Credit Karma one. This was a big effort that we needed to deliver prior to season that we dubbed the “little, big details.” Additionally, I worked to create design specs and contribute back to CGDS by creating a comparison chart component. During peak season, I was tasked to lead our theming efforts until end of season, and I helped deliver all of our theming work ahead of schedule.

📝 Theming approach

One of the first things I had to do was chart all our CGDS icons and work with our developers to see what was feasible to theme and what wasn’t. There are three key types of icons we use in TurboTax: utility icons, primary icons, and spot illustrations. Due to technical feasibilities, we were unable to theme our utility icons, but went forward in theming our primary icons and illustrations. Spot illustrations are bigger vector illustrations that are more complex and descriptive than primary icons. Our first version of theming icons was to only theme icons that we believed we would want to use in our Credit Karma experience, but realized that because of many different tax complexities and situations in which users are off-ramped to the TurboTax product but still see Credit Karma theming, we could not foresee which icons users would see. Therefore, we had to make a high-level effort of theming all our CGDS icons.

It was important for me to understand how our developers were storing the CGDS icons and how Credit Karma theming would work in product. I learned that our CGDS systems team has a library where they have all their icons organized by semantic names. The developers also have a separate library for all KDS icons. They are able to pull the KDS icons in our Credit Karma experience if the semantic name of the KDS icon is mapped to a CGDS one. The mapping essentially looks like this:

CGDS “icon-name.svg” KDS “ck/icon-name.svg”

For any CGDS icon that isn’t mapped to a KDS one, the CGDS icon would appear in the experience. With this learning, I created an approach to mapping icons. Our approach to theming was twofold:

  1. Go through CGDS spot illustrations and primary icons and map those to a corresponding KDS icon. Due to the nature of CGDS being more complex than KDS, we would use the same KDS icons for different CGDS icons if needed and to reduce scaling effort.

  2. If a CGDS icon doesn’t have a KDS icon counterpart, we create a new Credit Karma one to map.

🗺️ Mapping Spot Illustrations

Due to the fact that there are significantly less spot illustrations than primary icons, I tackled this first. There are 47 spot illustrations in CGDS. I had to be mindful of where each illustration is used in the TurboTax experience so that the corresponding KDS illustration spoke to the same visual language. One thing to note is that there are over 100 spot illustrations in KDS, so I spent much of my time weeding through the KDS library to find illustrations that made sense.

I had established early on that I would not create any new KDS illustrations to map to a corresponding CGDS illustration. I came to this decision due to the natural complexity of illustrations (and that the design team at Credit Karma didn’t have bandwidth to assist in creating any new icons for tax filing), and we didn’t want to exert additional design time and work if it wasn’t worth it — especially because we only had about two months to work on this before shipping.

CGDS spot illustrations

KDS spot illustrations

With reviews from our design team, CGDS design systems team, and stakeholders, I was able to successfully map our CGDS spot illustrations. As you can see below, there were numerous times where we use the same KDS illustration for different CGDS illustrations. The reason for mapping the same illustration was because I thought certain KDS illustrations were best fit to describe what a CGDS illustration was describing. I QA’d with a couple designers to see where certain illustrations seemed more fitting than others. It is important to note that this process took multiple revisions to ensure we were mapping to the best of our abilities.

Final mapping of illustrations

➡️ Mapping Primary Icons

The easy part of our mapping was over. Now I had to map over 450 CGDS primary icons to KDS. I took the same approach as outlined above, but with a few minor tweaks. Due to the fact that there are significantly more primary icons to map, I broke down the process to map by icon category (finances, life, tech, security, etc). Thankfully, CGDS already categorizes their icons, so I followed that. I began by seeing how many KDS icons I would be able to map to CGDS. Then I would see what was left and how I could create a new themed icon to match CGDS.

During this part of the process, I had to keep in mind visual languages of both TurboTax and Credit Karma. If we had to compare each product, I would say that TurboTax’s visual language is serious and playful while Credit Karma is fun, imaginative, and quirky. Each product’s visual tone and voice directly correspond to their user audience. TurboTax is used more widely by many different generations, so it has to appeal to both older and younger generations. In contrast, Credit Karma has a younger user audience base, so they have a more imaginative visual playbook that appeals to younger generations. It was also important to consider that because Credit Karma is a financial product, KDS would lack many tax-related icons such as for forms, life events, etc. I was prepared that I would have to create many new KDS icons.

This part of icon mapping was more tedious and time-consuming. I was able to map around 250 existing KDS icons to CGDS (there were many KDS icons that were reused for different CGDS icons), which still left another 200 to create net new. I used both Figma and Illustrator to create new icons with continuous reviews with my team lead. Through this, I created around 200 new icons with Credit Karma’s visual voice and tone.

New themed icons

I spent about a month mapping CGDS primary icons and creating new Credit Karma themed ones. I was able to hand this off and ship it before season in January 2024.

CGDS primary icon library

All themed icons

From

To

🔔 Where we are today

We handed off this work to our developers in early January 2024, ahead of season. When we tested in our end-to-end environment, we saw a few unforeseen problems. We had believed that because we had mapped all CGDS icons, they would automatically theme to Credit Karma. However, we realized that realistically only about 40-60% of our icons were being themed. I worked closely with our systems engineers and designers to find the problem, and realized that there were old CGDS icons surfacing in product from another icon library. Currently, I have pinpointed where this library exists and have mapped all of those older icons to KDS. We are now working closely with the developers of that team to see if they can update their library to reflect these new icons. On a higher level, our systems team is working to streamline their icon library so that in the future, all icons are being referenced from one place. Hopefully through season, we will see 100% of our icons themed.

Another problem we have run into is theming animations. Every animation that exists in TurboTax is - obviously - CGDS themed. I am working closely with our motions team to see the best way we can theme these animations. Due to the level of effort and scalability, at this point we have decided not to task our motions team with creating new Credit Karma themed animations because that is beyond their scope of work and it would take an enormous effort from everyone involved to create new ones. I am working to reassess the importance of these animations, and creating a workaround by providing a static KDS illustration partnered with a KDS loading progress bar animation (we are already using this template in one part of our experience).

🪜 Next steps

Creating a Credit Karma themed tax filing experience opens doors to many possibilities in the future. As a product, we would want CGDS to be able to support a seamless, embedded tax experience with any partner company. With our learnings from this theming project, there are many things we have to flesh out in order to provide a 100% embedded experience. I am working closely with our systems and motions teams to create a compelling provocation to leadership to work more closely together and, possibly, change the way TurboTax thinks about their design system in the future.