Carol Diniz

Organizing Payments

Engineering needed to rebuild Serasa’s agreements list because the legacy code kept crashing. The rebuild became the chance to fix something business had never prioritized: people could not find what they came to pay.

serasa experian, launched january 2023
retention through usability

My role

Research and discovery
took a small part, 1 of 4
Data analysis and a quick survey, building on usability research that already existed.
Definition and strategy
led, with input from others, 3 of 4
The three pillars of the redesign, the new order of the list and what went into the details page.
Design and systems
shared the work, 2 of 4
Card redesign and one vocabulary for web and app.
Delivery and measurement
led with full autonomy, 4 of 4
Usability tests with 138 participants, final adjustments, stakeholder validation and the launch on web and app.

Problem

The agreements list is where people find the bank slips for the debts they have renegotiated. When it crashed, people could not pay, and Serasa lost revenue. That made the rebuild an engineering priority. Earlier research had also pointed to usability problems, but business had never prioritized them. In this project, better usability was a bonus, not the brief.

We asked people why they came to the page: 46% to pay, and 36% to check whether a debt had been marked as paid.

Why are you accessing this page?
Making a payment46%
Checking if the debt was marked as paid36%
Finding information about the agreement10%
Getting a payment receipt4%
Other4%
Together, paying and checking a payment made up 82% of visits.

The list made both jobs harder than they needed to be. There was no clear logic to the order, the cards were inconsistent and carried too much information, and web and app used different words for the same things.

Annotated anatomy of two agreement cards. Serasa’s card shows logo, whether the debt is on a CPF or CNPJ, agreement status, installment and a link to agreement details. A competitor’s card shows payment status, the original creditor, agreement details, the current payment, a button to copy the payment code and a link to see all payments.
Discovery. The anatomy of Serasa’s agreement card next to a competitor’s, which puts payment status, the original creditor and the current payment up front.
Map of every path to the agreements list on web and in the app, across Home, Finance, My CPF, Solutions and Pay. Notes mark the gaps: no Finance section in the app, no way to reach agreements through My CPF in the app, a digital wallet that shows a different listing built on different code, and an option that reads ‘Soon’ on desktop but does not appear on mobile web.
Discovery. Every path to the agreements list on web and in the app, and the gaps between them: different entry points, different names, and places where the list could not be reached at all. Open the full-size map

When we asked whether they could find what they were looking for, 31.7% said no. Most of them struggled to find options like renegotiating, printing the bank slip or checking payment confirmation. The information architecture and the labels needed revision.

Could you find what you were looking for?
Yes68.1%
No31.7%
Those who could not complete their goal mostly struggled to find options like renegotiating, printing a bill or checking payment confirmation.

Constraints

The goal was set by engineering: fewer crashes. Every usability change had to fit inside that rebuild without putting it at risk.

Web and app had grown apart, each with its own words and its own version of the list. Serasa’s design system was only starting to exist, so some components were ready to use and many had to be improvised.

The upside of the rebuild was real, too. Because the list was moving to new, more robust code, the design was not limited by what the old code could do.

Decisions

The redesign rested on three pillars: status clarity, information hierarchy and scalability. If people can do what they came to do, they stay.

Before

The old agreements list in Portuguese: large cards, each repeating the Serasa logo, whether the debt is on your CPF, the agreement status with a progress bar, and the installment, amount and due date.

After

The new agreements list in Portuguese, split into four sections: in progress with Serasa, in progress with the partner company, paid, and cancelled. Each agreement is a short row with the payment type, amount and due date, and a status tag when a payment is overdue or pending.
The agreements list before and after. Screens use sample data.

Four sections, ordered by what needs action

The list became four sections: agreements in progress with Serasa, in progress with the partner company, paid, and cancelled. Inside the first one, overdue payments come first, then pending ones, then payments that are not available yet, each sorted by due date. We explored other orderings, and this was the most logical for both sides: people see at a glance what needs their action, and the business reduces defaults from people who could not find what they owed.

Sections with nothing in them do not appear. The partner section only shows for people who have, or had, that kind of agreement.

The section “Agreements in progress with Serasa”, in Portuguese: two agreements with an overdue payment, two with a pending payment and two whose next payment is not available yet.
  1. In progress with Serasa. Installments paid through Serasa. When there is nothing in progress, the whole section is hidden.
  2. Overdue first. Agreements with an overdue payment open the list, so what needs action is the first thing people see.
  3. Then pending. Agreements with a payment coming up, sorted by due date.
  4. Not available yet, last. Payments that cannot be made yet, with the date they open.
The first section of the new list. Screen uses sample data.
The section “Agreements in progress with the partner company”, in Portuguese, with two agreements: one with the first payment confirmed and one with five payments confirmed.
  1. In progress with the partner company. The next installments are issued or confirmed by the partner. The section only shows for people who have, or had, this kind of agreement.
  2. First installment paid through Serasa, waiting for the partner company to update the agreement.
  3. “Finished”, but not closed. Every installment was paid through Serasa, and the partner has not yet confirmed the last one.
The second section, for agreements the partner company handles. Screen uses sample data.
The section “Paid agreements”, in Portuguese, with one agreement: You paid the agreement.
Paid. Agreements with nothing left to pay.
The section “Cancelled agreements”, in Portuguese, with two agreements: Agreement cancelled, and You cancelled the agreement.
Cancelled. By the person, or broken by missed payments or by the partner company.
The last two sections. Screens use sample data.

A short card, with the rest one step away

The list became a quick view of each agreement, and everything else moved to the agreement’s details page. People who wanted more could open it; everyone else was not slowed down. Some stakeholders resisted taking information out of the list. After the first rollout showed no negative impact, the resistance faded.

We removed the payment progress bar

The old details page showed a bar with how much had been paid and how much was left. It looked helpful, but it raised more questions and more bug reports than it answered, so it went away. The agreement value and the current installment stay on the page as plain values.

The old agreement details page in Portuguese, with a Pix payment available and, under the agreement summary, a progress bar showing 2,500 paid and 2,500 left.
Before. The progress bar under the agreement summary.
The new agreement details page in Portuguese, with the same Pix payment and an agreement summary listing the agreement value, current installment and agreement date, without the progress bar.
After. The same summary, without the bar.

One vocabulary for web and app

Web and app used different labels for the same actions. We picked one term for each, and dropped the ones built on “see”, which assume the person can.

Labels before and after, in Portuguese
BeforeAfter
ver detalhes, mais detalhes, ver acordosee details, more details, see agreementdetalhesdetails
ofertas, propostasoffers, proposalspropostasproposals

Status names got the same treatment. Two statuses from the service, Canceled and Broken, reached people as the same message, though they mean different things: one was the person’s choice, the other was not. Each got its own wording, and the broken one tells people who to contact.

Status from the service, and how it reads in the list and in the details
From the serviceMeaningIn the listIn the details
CanceledThe person cancelled the agreementVocê cancelou o acordoYou cancelled the agreementVocê cancelou este acordoYou cancelled this agreement
BrokenBroken by missed payments or by the partner companyAcordo canceladoAgreement cancelledSeu acordo foi cancelado. Para mais informações, entre em contato com [empresa parceira]Your agreement was cancelled. For more information, contact [partner company]

One tested version, refined in copy

We tested a single version with 138 participants. The adjustments after the test were small, and most of them were changes to the copy.

States and edge cases

With less on the card, the details page had to explain each situation on its own: who is handling the agreement, why it was cancelled, and when it is done.

Agreement details in Portuguese with a warning that the agreement is in progress with the partner company, a boleto available with a button to copy the barcode, and options to download the boleto or send it by WhatsApp.
In progress with the partner. Translation: This agreement is in progress with the partner company. To receive the next installments, contact Banco Santander S.A.
Agreement details in Portuguese with an alert that the agreement was cancelled and a summary marked Agreement cancelled.
Broken. Translation: Your agreement was cancelled. For more information, contact Banco Santander S.A.
Agreement details in Portuguese with a notice that the person cancelled this agreement and a summary marked Agreement cancelled.
Cancelled by the person. Translation: You cancelled this agreement.
Agreement details in Portuguese with a summary marked Agreement paid, the agreement value, current installment and date, and information about the original debt.
Paid. Translation: Agreement paid.
The agreement details page in four situations.

The empty list also changes with context. If the person has proposals waiting, it points to them; if not, it points to other Serasa services.

Empty agreements list in Portuguese: Nothing here! You have no agreements right now. Check your proposals to close agreements and clear your name. Buttons: Go to proposals, Back to home.
No agreements, proposals available. Translation: Nothing here! You have no agreements right now. Check your proposals to close agreements and clear your name.
Empty agreements list in Portuguese: Nothing here! You have no agreements right now. Check other Serasa products. Button: Go to services.
No agreements, no proposals. Translation: Nothing here! You have no agreements right now. Check other Serasa products.

Outcome

The new list launched on web and in the app at the same time, in January 2023. In the usability tests, most people could find their overdue payments and explain the details of their agreement. The two reductions below are projections from product data, not measured results, and I no longer have the post-launch numbers.

found overdue payments and explained their agreement, in testing
78%
crashes, expected
−50%
agreement breakage, expected
−5%

If I were measuring it again, I would track the crash rate, the share of agreements paid on time, and how many people reach the page and leave without paying or opening a bank slip.

More work