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.
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.
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.
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.
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.
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.
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.
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).
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).
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:
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.
The Problem: Cluttered Content, Stressful Messaging and Frustrated Users
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
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.