CKlogo.jpg
 

My Role(s)

As the Senior Product Designer for Credit Karma's Financial Health team, I helped our group design, build and ship several successful new features and product offerings. My additional bandwidth was spent as a Senior Visual Designer for the Credit Karma marketing team, generating a constant flow of fresh creative work including animated GIFs for social media and a total redesign of all consumer-facing email templates.


 
increase_limit.png

The Credit Score Simulator

As our team’s lead product designer, I helped our group design, build and ship the Credit Score Simulator, the most popular feature among Credit Karma’s 50M+ users.

Product Design: Jacob Wilen Product Manager: Anthony Lingen Front-End Developer: Igor Antoshevski User Research: Yasmine Khan

 
CKPersona1.jpg
CKPersona2.jpg

Step One: User Research & Persona Development

A deep understanding of users is the essential first step for any design project. I strive to maintain an empathetic focus and consistently remind my teammates that we are not designing this for ourselves (or our boss)—We are building for who our users actually are, not who we imagine them to be.

Process Note

Credit Karma’s research team spent months touring the US, conducting in-person interviews and gathering data. Over and over, interviewees voiced similar confusion about their unpredictable credit score changes. From those conversations, the score simulator concept emerged.

 
notecards.jpg
sitemap_border.jpg

Step Two: User Stories & Journey Mapping

My team began by brainstorming and sketching our ideas on how to best address our user’s confusion. This is a freeing, creative exercise where there are no bad ideas and every idea goes up on the board. We then drilled down, defined and agreed on what exactly the score simulator needed to accomplish. Engineers and developers also participated.

 
CKWires1.jpg
CKWires2.jpg

Step Three: Mobile-First Wireframes

Early wireframes are essential for gathering conceptual buy-in from across the company. These wireframes were reviewed by the creative director, my fellow product designers, copywriters, our user research department as well as the back-end engineers and front-end developer who would eventually be building the live version.

 
hifidelity.png
Simulator_Optimized_Small+(1).gif
Navigator_Final_Optimized.gif

Step 4: High Fidelity Prototyping

Personally, this is my favorite stage, where I get to design pixel-perfect screens in Sketch, Adobe XD or Invision Studio. I also animate each UI transition for a fully realized prototype experience, either with Invision or After Effects depending on the complexity required. These normally go through several rounds of feedback as the deadline approaches. If time allows, these prototypes can be presented at a user testing event to gain additional insights before launch.

 
IconSVGs.png

Step 5: Customized Icon Design

Developing a unique visual language that harmonized with Credit Karma’s existing brand style was crucial to maintaining consistency as users navigate the site as whole. Here are a few samples from the icon library I designed for the Credit Score Simulator (above).

 
Inspect_1.png
Inspect_2.png

Step 6: Developer Hand-off, QA & Launch

Working closely with developers and engineers throughout the entire design process is imperative to a product’s success. I always meet with each developer early on to clarify what kind of design assets and specifications they prefer to build from. Recently, I’ve found that Invision’s Inspect feature is the most comprehensive tool for sharing assets, hex codes, icons and padding rules with developers (see screenshot above).

 
UserTesting1.jpg
UserTesting2.jpg

Step 7: User Testing & Iteration (Ongoing)

The work is never done. Once the Score Simulator had launched, Credit Karma’s analytics team carefully monitored feature usage and identified bugs. Small updates and improvements continue to this day as we learn more about our user’s needs and preferences.

 

Results & Industry Press

Among CK’s 50M+ users, the Credit Score Simulator feature is currently the most-used feature on the site with thousands of clicks per minute. The Credit Score Simulator has also been featured in the publications below:

CKPress1.jpg
CKPress2.jpg
 

ROCKET.jpg

A Shiny, New Email System

In partnership with Credit Karma’s head of marketing, brand manager, engineer and senior copywriter, I redesigned all of Credit Karma’s consumer-facing email communications using a friendlier, simplified and more flexible series of templates.

Visual Design: Jacob Wilen Creative Director: Jamily Knight Brand Manager: Ya-Hsuan Huang Engagement Marketing Director: Ziad El Baba Copywriter: Jessica Guerin

 

The Problem: Cluttered Content, Stressful Messaging and Frustrated Users

PreDesignEmails2.jpg
PreDesignEmails1.jpg

Before our redesign began, it was pretty clear that our email strategy needed a complete overhaul. Users often felt frightened when they received alerts and notifications that read “Your Credit Score is Out of Date” or “You have become Delinquent.” Wordy, stiff sentences and multiple CTAs left users lost and frazzled. The visual style was generic and cold, lacking any connection to the Credit Karma brand philosophy.

 

The Solution: Simplified Layouts, Friendlier Copy and Delightful Visuals

The primary message and CTA are visually scannable within 1-2 seconds.

The primary message and CTA are visually scannable within 1-2 seconds.

Multiple templates allow for large or small images and various heading style options.

Multiple templates allow for large or small images and various heading style options.

Headline and body copy layout choices are flexible enough to accommodate any type of content, from longer newsletters to quick alerts.

Headline and body copy layout choices are flexible enough to accommodate any type of content, from longer newsletters to quick alerts.

GIF animations and photography add excitement, humor and brand personality to each message.

GIF animations and photography add excitement, humor and brand personality to each message.

 

Process Note

Guaranteeing that each recipient will view the email as intended is essential and the technical limitations of email design can be onerous. Careful testing across all combinations of web browsers, devices and email clients is vital, from Lotus Notes 8.5 on a Windows 10 desktop to Apple Mail’s new Dark Mode on a 2013 iPad Mini. Litmus is currently the gold standard for this kind of testing.

 

Email Redesign Results (Over Three Months)

• 50% increase in email generated revenue.

• Open and CTA click rates doubled.

• Opt-outs decreased by 25%.

• 3200% increase in page views after first newsletter was sent.