Reducing confusion on card refunds

The short version

Role: Main designer on the Spend team, across personal and business cards. Research, UX/UI and component definition.
Problem: Refunds appeared as separate transactions. Half the customers we interviewed expected the original payment to update instead.
Decision: Make transaction types and states explicit, simplify the information hierarchy and explain pending refunds.
Result: Customer support rate fell 32% over the following quarter, as reported in the original case study.

From confusing status to a clear explanation

The redesign separates refunds, cancellations and card checks, so customers can understand what happened and what comes next.

Wise redesigned payment details showing clearer merchant hierarchy and an insufficient-funds message

The customer’s questions

Make sense of a card payment.

Questions the experience needs to answer, rather than four successive screens.

Find the payment
Which payment is this?
Give merchant details and transaction information a clearer hierarchy.
View the evidence
Recognise the state
Refunded, cancelled or checked?
Use explicit states for different transaction types.
View the evidence
Understand the refund
Why hasn’t the payment changed?
Explain the pending refund instead of leaving it to interpretation.
Account for the money
When did it come back?
Explain who cancelled the payment and when funds returned.
View the evidence

Tiny big detail

One small plus sign.

A plus sign makes the refund read as money coming back, not another payment.

The refund amount in the original design comparison.

01 / Transaction states

Make the state clear. Explain what comes next.

One decision, up close

“Declined” wasn’t the whole story.

The old screen repeated a status. The revision explains who cancelled the payment, and when the money came back.

Actual design comparison from the original project. Select a view or open the source image.

Original Wise cancellation screen: Declined, followed by repeated transaction details — Before / a status to decipher

Revised Wise cancellation screen: Cancelled, with the merchant and date the money returned — After / an explanation to act on

Open the full comparison

Decisions, process and lessons

Start with support, not a new interface

With the PM and support team, I ran a two-week discovery exercise: 28,000 transactions analysed and 20 customer interviews. We found 16 refund cases, with pending refunds causing the most confusion.

Customer journey mapping a card payment through a refund

Research grouping reasons customers contacted support about refunds

Test the changes separately

We tested features independently in-product before combining them: merchant identification, clearer state labels, conversion breakdowns and less duplicated information. The rollout happened in two stages: states first, then conversion details.

Breakdown of transaction attributes used to define consistent card payment components

What I would revisit

The conversion breakdown inherited complexity from the Send framework. I would explore a simpler explanation of fees and test left-aligned attributes for readability.

Role, tools & collaborators

Responsibilities

User interviews
UX/UI design
Component breakdown

Tools

Figma
UserTesting.com
Looker

Credits

Karam Kanan for Product Management
Triinu Palmre for Data Analyst

← Back to work