← Work
Tree-Nation Payment Infrastructure

Churn was hiding
in the payment infrastructure.

A payment infrastructure overhaul that reduced churn, unlocked a new B2B market segment, and replaced manual account manager firefighting with a system that works on its own.

Role
Senior Product Designer
Scope
End-to-end · V1.1 → V1.2
Collaborators
CEO, PM, Engineering
Impact
~20% failed payment recovery
01. The Problem

A business pain disguised
as a UX gap

Before I opened Figma, I needed to understand why this mattered to the business, not just to users. The data told a clear story: a meaningful portion of B2B churn wasn't caused by product dissatisfaction. It was caused by payment failures that went completely unnoticed.

When a card expired or a charge failed, nothing happened. No alert. No email. No indicator in the UI. Users discovered problems only when their service was interrupted. By then it was too late to prevent it.

For B2B Users

No control, no visibility

B2B clients often manage multiple budgets across departments. They needed to store and switch between payment methods, but the platform forced manual card re-entry on every single transaction. Enterprise workflows, consumer-grade tooling.

No notifications. No alerts. The only signal something was wrong: their trees stopped being planted.

For the Business

Manual firefighting at scale

Account managers were spending hours each week chasing failed payments, manually contacting clients, updating details on their behalf, resolving issues a well-designed system should handle automatically.

SEPA Direct Debit wasn't supported at all. An entire European B2B segment couldn't pay the way they expected to.

“B2B users sometimes have multiple budgets and multiple payment methods, but we didn’t support that. They had to manually re-enter details every single time.”

Key insight from stakeholder research
02. The Before

What the old experience
forced users to do

Every transaction required full card entry from scratch. No saved methods, no defaults, no flexibility. For a B2B client managing multiple subscriptions across departments, this was a genuine operational burden, not a minor inconvenience.

Before: card details entered manually on every transaction
Before: Card details entered manually on every single transaction. No saved methods, no defaults.
03. Research & Discovery

Four methods.
One clear picture.

I combined data analysis, stakeholder interviews, competitive benchmarking, and journey mapping to build a complete picture: not just of what users wanted, but of what the business needed to recover.

01

Data Analysis

Failed payment rate analysis confirmed the hypothesis: churn was being driven by silent payment failures, not product dissatisfaction. This reframed the project from “improve UX” to “recover revenue”, giving it the business priority it deserved.

02

Stakeholder Interviews

Working with the CEO and PM, I uncovered the full operational burden. Account managers were manually chasing payment issues every week. The team had integrated Stripe in a previous iteration but hadn't built the layer that let users actually manage their methods.

03

Competitive Benchmarking

Reviewing how Stripe, Shopify, and comparable SaaS platforms handle payment management informed the UI patterns and confirmed that SEPA support was table stakes for European B2B, not a nice-to-have.

04

Journey Mapping with Stakeholders

Collaborative sessions with the CEO and PM made the problem undeniable. Mapping the full payment lifecycle (from adding a method, through a silent failure, to a disrupted service) aligned the team and made solution priorities clear.

04. Design Process

Designing for resilience,
not just the happy path

Payment flows are deceptively complex. The visible UI is the tip of the iceberg. The real work lives in the edge cases, and getting those wrong in a payment context isn't a UX issue, it's a revenue issue.

I mapped every failure state before writing a single UI spec: deleting the only card linked to an active subscription, expired cards mid-billing-cycle, failed retries, reassigning defaults. Each scenario had a deliberate, tested resolution path.

"Most people design the happy path. Designing the 'you can't do that, here's why, here's what to do instead. That's the work."

Design principle guiding this project
05. The Solution

Built around how B2B
clients actually work

The final system let users store multiple payment methods with custom aliases, set a default, add SEPA Direct Debit, and receive proactive alerts, all within a clear, low-friction interface.

Payment methods list: multiple cards, status pills, aliases, default badge
Payment Methods list: all critical information visible at a glance: card type, last four digits, alias, expiry, and status
Failed payment state with inline error banner and retry CTA
Failed payment: inline alert with direct retry action, no hunting through settings
Checkout with pre-populated default payment method
Checkout: default card pre-selected, zero manual re-entry required
Add payment method: type selector with card and SEPA options
Add payment method: type selection, Stripe-validated inputs, SEPA Direct Debit fully supported
Delete confirmation modal
Delete: clear confirmation dialog, destructive action gated
Delete blocked: card linked to active subscription
Edge case: deletion blocked when card is tied to an active subscription, with a clear path forward
06. Results

Revenue recovered.
The system keeps going.

The 30% recovery target was ambitious. Reaching ~20% in the initial rollout is meaningful, and the foundation is in place to continue improving as retry logic and notification flows mature.

~20%
Failed payment recovery rate achieved in initial rollout
Target was 30%
SEPA
New payment channel unlocked for European B2B clients
Previously inaccessible segment
Account manager manual workload reduced through automated notifications and retry logic
System-driven recovery replacing manual chasing
07. Reflection

What I'd tell
my future self

The hard part

The CEO wasn't happy with the timeline.

That's worth naming directly. The discovery and workshop phase ran longer than expected. From the outside, it can look like a designer doing research when you could just start building. From the inside, I was making sure we didn't build the wrong thing, or the right thing with the wrong edge cases, which in a payment flow can be very expensive to fix post-launch.

The outcome validated the investment. But the tension was a useful signal: in future projects, I'd front-load a tighter alignment session at kick-off to set explicit timeline expectations, and identify earlier where the process could be compressed without sacrificing quality.

This is the calibration I think about most as I move toward Product Lead roles. There's no universal answer to "how much process is the right amount." Getting better at reading that, and negotiating it with stakeholders in real time, is the craft above the craft.

What worked

Workshops over briefs

Running collaborative sessions with the CEO and PM at every major decision point meant faster alignment, fewer revision cycles, and genuine stakeholder ownership. The best decisions came from the room, not from a Figma handoff.

What I'd change

Earlier user validation

With more time, I'd have tested with real B2B clients, especially around the SEPA flow and failed payment notifications. Internal testing caught issues, but live enterprise feedback would have added confidence and surfaced edge cases faster.

08. Takeaway

The edge cases
are the product.

Payment infrastructure is where product design gets real. The stakes are financial, the edge cases are endless, and “we’ll fix it later” is not an option.

I started with a business problem (revenue leakage, operational debt, an underserved B2B market) and worked backwards to a system that resolved all three simultaneously. That’s the kind of structural thinking I bring to product work. And the kind of Product Lead I’m growing into.