Pink Flower
Pink Flower
Pink Flower

-87%

Funding source related CS tickets

Funding source related CS tickets

12%

Decrease in failed payments

Decrease in failed payments

60+

Comms using the new component

Comms using the new component

1. Problem Framing

Once a customer uses Klarna, they enter a relationship with us that can last for months or even years. But our communications about their payment plans weren't living up to our "smoooth" promise.

The User Problem: Users felt anxious and out of control. They told us: "I have multiple payment plans and I don't have a single place to see how they're being paid. I worry that I'll miss a payment because I don't know if you are charging me from the right account." This anxiety was caused by very specific flaws in our design system.

The Systemic Pain Points: Through a deep audit, I identified the following core issues:

  1. It Wasn't Scalable: Our components used hardcoded labels like "card used" or "bank account." This was incredibly brittle and meant we had to create a new, custom design every time a new funding source was added.

  2. Lack of Alignment: We had a critical terminology problem. The term "payment method" meant one thing in our purchase flow, another in the app, and something else entirely in our emails. This inconsistency eroded user trust and comprehension.

  3. Poor Recognition: We relied heavily on bank and card logos for identification. When these logos were missing or failed to load, the experience broke, leaving users unsure of which account would be charged.

These weren't just design issues; they were causing a 32% contact rate from users asking basic questions about their primary funding source and backup cards, leading to significant business costs.

2. Research & Discovery

To understand the scale of the problem, I initiated a comprehensive audit and research phase.

  • Communications Audit: I collected every single email, push notification, and SMS message related to payments. I found over 60 different templates, each with slight variations in layout, terminology, and design. There was no single source of truth.

  • Journey Mapping: I mapped the end-to-end user journey for a 6-months financing plan, highlighting every single communication touchpoint and the user's emotional state at each stage.

  • Customer Support Deep Dive: I aligned with our customer service agents, listening to calls and reading chat logs. This gave us raw, unfiltered insight into our users' frustrations and the exact questions they were asking.

The key insight was clear: We weren't designing individual communications, we were designing a fragmented and confusing conversation. Users didn't need another email template, they needed a consistent, predictable component that they could understand at a glance, no matter where they saw it.

3. The Solution & Process

To solve this, I proposed a comprehensive, systems-first strategy. It wasn't about putting a band-aid on 60+ email templates; it was about fixing the foundation. The proposal had three pillars:

  1. Terminology Update & Alignment: First, we had to agree on a shared language. I drove alignment across Product, App team and Engineering to standardize our terms. "Payment Plan" would now exclusively refer to the Klarna product (e.g., Pay in 4, Financing), while "Payment Method" would refer to the user's funding source (e.g., Visa ····4022).

  2. Funding Source Component Design: The core of the solution was to redesign the funding source list item. The goal was to create a single, flexible component that could cater to all use cases and scale to future needs.

  3. Standardize Communication Rules: Finally, we needed to establish clear standards for how we communicate funding source information to users in different contexts and edge cases, such as expired cards, disconnected mandates or missing funding source.

    This was a collaborative effort, and our process ensured we built a solution that was robust, feasible, and effective. I followed a rigorous plan: Core Group Review -> Tech Feasibility -> Content Review -> Stakeholder Buy-in -> 2nd Round of Tech Feasibility

The Redesigned Component: You can see the proposal in the image below. The new component is designed for flexibility. Instead of rigid labels, it uses a semantic structure that separates the Payment Plan from the Payment Method.

This visual was used in the design review, where stakeholders and key collaborators had the opportunity to review and challenge the design decisions. One observation I flagged during the review was the "Payment plan" usage for "Pay Now" product, which would potentially cause confusion for the user. To fix this issue and make sure the user experience remains the same for all products, we decided to rename "Payment plan" with "Payment option", keeping the useage of "payment plan" only for financing specific products, when referring to the payment schedule.

The Implementation: This was the most impactful part. The update to the "funding source list item" was a global, enforced change in our codebase. By fixing the core component, we instantly updated thousands of communications across email, push, and SMS, ensuring 100% consistency overnight.


4. Impact & Learnings: The Power of Systems Thinking

This project fundamentally improved our communication infrastructure. The results were immediate and significant.

  • ✅ We successfully aligned dozens of touch points across the company to a single, shared language for payments.

  • 📉 We reduced funding source related customer support tickets by 87%, as the new clarity answered users' questions before they had to ask them.

  • 📈 We saw a 12% decrease in failed payments from preventable issues like expired cards, directly increasing revenue.

  • 🚀 Our development velocity increased, as teams could now leverage a robust, predictable component instead of building from scratch.

My biggest learning was that the most impactful design work isn't always a flashy new feature. Sometimes, it's untangling a complex system, defining a clear vocabulary, and building the foundational components that allow an entire organization to create better, more coherent experiences at scale.