Account payments made easy
How a bold redesign lost the A/B test, and what we shipped instead
The short version
Customers with a credit account in our app couldn’t easily tell what they owed, when it was due or why, so they lost confidence and picked up the phone. I took the redesign of the account summary from discovery through to launch, covering research and design. The best bit of the story is the plot twist: the bold design customers loved in testing lost in the live experiments, so we pivoted to something simpler. That version cut account contacts by 7.32% (around 217 fewer a week) and lifted payment conversion by 1.2%.
The problem
Customers were struggling to understand the status of their credit account, which hurt trust and drove up contacts. The numbers backed it up:
- 3.6M customer sessions monitored over four months
- 4.6% of monitored calls were about payments and account balances
- -40 average NPS, with customers asking for clarity on interest charges and more control over payments
The goal: make the account understandable at a glance, without adding to the pile of calls.
What success looked like
- For customers: understand their credit account in seconds, and manage large outstanding balances without a headache
- For the business: fewer contacts to customer service, and more confidence in our credit products
- For the market: keep pace with what people now expect from a modern account experience
Discovery: what customers told us
A research survey dug into what was causing the confusion. Five themes stood out:
- Total balance: the top recurring theme. Customers wanted it communicated clearly.
- Payment due dates: make it more explicit, with more urgency as the date gets closer.
- The bar chart: it felt clunky, old and outdated.
- APR information: more useful than we expected, so it needed clearer signposting, including when a payment-free period ends.
- The chatbot: it could be far more useful in the context of the page.
I benchmarked us against PayPal, Klarna, Barclays and Afterpay across our four principles — a reality check on how far behind we were.
| Design Principle | TVG | PayPal | Klarna | Barclays | Afterpay | Notes |
|---|---|---|---|---|---|---|
|
Customer Control
Good level of control over their account is given to the customer through the experience.
|
Strong theme across the board. Pro-active updates & clutter-free UI contribute to this. | |||||
|
Speed
The experience feels frictionless and fast when completing a task.
|
Modern, fintech companies come out on top for speed — better tech and more modern UI. | |||||
|
Human Touch
There’s an emotive and transparency-driven feel throughout the features.
|
The more recent fintechs win on that conversational, human touch within the account space. | |||||
|
Familiarity
There’s a good level of familiarity within the experience, consistent with the market.
|
Familiarity varies across these examples — some feel familiar, yet dated. |
All of it boiled down to four design principles:
- Customer control: be explicit and transparent, so people feel on top of their account
- Speed: the experience should feel quick, whether someone is completing a task or just reading
- Human touch: a warmer, more personal tone helps people understand and trust what they see
- Familiarity: patterns customers already know build trust and make things easier to use
Framing the opportunities
We turned the problems into “how might we” questions, then mapped the payment journey to see where we’d have the most impact. We also ran a challenge-mapping session across customer, business and tech, to spot what might get in our way before we started designing. Two of the big ones: satisfying legal and compliance needs while still reducing complexity, and building something lovable without putting too much strain on tech.
Journey Mapping
Account Summary
Payment type
Confirm amount
Payment Details
Review & Confirm
Payment Complete
Ideation
I ran an ideation session with stakeholders from across Financial Services, partly for the ideas and partly to bring people along on the journey. Three themes came out of it:
- Information architecture: putting the most important things in the right order
- Emphasis on credit products: bringing them to life on the page so customers see what they’re paying for
- Real-time messaging: updates that set expectations and build confidence
The look and feel ideas leaned on three patterns: credit dials, horizontal charts and numerical lists.
Design
First I broke apart the existing page to understand exactly what it did today, then sense-checked the information architecture against the research and data. I also worked with an engineer to map the services we already had, so we could improve the experience without a heavy build.
Then I designed three options to test:
- Credit dial: our boldest option, a real step change and a modernised take on the account balance
- Numerical list: our most conservative option, dropping the graphic in favour of cleaner, more prominent numbers
- Side bar chart: another common pattern, to see how it would work for our product and customers
Testing: the dial won
In usability testing, the credit dial was the clear favourite. Every customer was able to start a payment journey with confidence. There was some useful feedback on interaction expectations and accessibility, which we acted on before pushing into build.
Everything pointed to a clear winner. Then we put it in front of real customers.
Then the experiments humbled us
- Experiment 1: a two-week A/B test. Calls about account issues went up in the group with the new design. After digging in, we think customers were accidentally tapping the dial and getting taken off the page.
- Experiment 2: we made changes based on the data. Calls dropped significantly and payments went up, but the new design was still driving more account queries.
- The pivot: two experiments in, it was clear something wasn’t working, even though customers had told us they liked the design. We went back through the results and the call data and landed on this: customers just hadn’t adapted to the new design as well as the research suggested. It was a step too far, so we rejected our hypothesis and changed direction.
- Experiment 3: we stripped things back and returned to the list view.
What changed: we removed the tappable interaction on the dial, which was taking users to the payment page involuntarily.
What we shipped
- Clearer balance information, through better visual hierarchy
- A better understanding of payments due: what to pay, how much and when
- More confidence in successful payments, thanks to clearer payment options and more control
- A modernised UI, brought in line with our design system, with new components contributed back
Results
-7.32%
account contacts
-217
contacts a week, on average
+1.2%
payment conversion since launch
We steadily moved our primary metrics in the right direction.
What I took away
- Testing money products in mock scenarios only goes so far. People feel differently about their real finances than they do in a prototype.
- Qual can’t always tell the full story. Customers said they liked the dial. The live data said otherwise. I want both in the room from the start next time.
- Change is easier in steps. The interface had barely changed since launch, so customers needed time to warm up to it. We made trade-offs to hit our short-term goals while still moving toward the bigger ambition.
Next, we planned to run a retro on what we’d do differently, talk to customers more alongside research, and keep experimenting across the app and web.