OLX (Prosus) · 2023
Revamping Payments to Improve Debt Collection
Researching, strategising and designing a new payments page for OLX’s real estate platforms, leading to a 267% increase in debt collection within one month of rollout and 19% more users paying on time.
- Role
- Product Designer
- Company
- OLX (Prosus)
- Timeline
- Dec 2022 – Jun 2023
(~ 6 months) - Core Team
- Product Manager, Engineering Manager, FE Lead, Content Designer, QA Lead
- Tools
- Slack, Figma, Miro, Confluence, Jira, Phrase
Context
OLX Real Estate was migrating its tech stack, which included changing the source of information for payments. That change created a clear opportunity to improve the payments experience itself.
There’s always an opportunity to improve UX in a way that benefits both users and the business, and this project set out to show it.
The problem
- Only 35% of customers paid their invoices on time.
- More than 60% started paying on the second day after the deadline had passed.
Main objective
Research, strategise and design a new payments page to:
- improve debt collection
- encourage users to pay on time
- improve the overall payment experience
My role
As the Product Designer in a scrum “pack” with a Product Manager, Engineering Manager, FE Lead, Content Designer and QA Lead, I led the work from research to delivery, showing my work as I did it through ongoing feedback loops, daily and weekly rituals, and close collaboration with Polish and Romanian operations and customer service teams.
Process
- 01
Discover
User interviews, user flows and use cases, desk research, benchmarking across industries, and whiteboarding to break the problem down. Research focused on how users interacted with the existing product, their pain points, the problems to solve and the business expectations, from the end-user view and our customer service teams’ view.
- 02
Define
Identify unknowns and what success looks like, and how to measure it. How might we design a payment interface so that clients are encouraged to pay their remaining unpaid invoices, and always know how many unpaid and paid invoices they have?
- 03
Ideate
Wireframes and lo-fi mockups, design critiques, and many iterations with the “pack”.
- 04
Prototype & test
Prototypes validated through guerrilla testing and two remote workshops with the same customer operations experts, to gather fast feedback, validate design decisions, spot usability issues and uncover opportunities, quickly.
What we heard
“Agencies complain they don’t have an easy payment process.”
“I think we should keep separated pages. It’s easier for us (CS/TS team) to verify account balance if users have any questions.”
Hypotheses & metrics
- 01
Clearer paths to overdue invoices
Guiding users’ attention to pay overdue invoices will increase the number of paid invoices. North star: fewer unpaid invoices each month
- 02
Notifications about overdue invoices
Will increase debt collection. More engagement with the Payments page
- 03
A wallet system
Will make clients more likely to buy more and pay automatically. Higher customer satisfaction
The solution
One page to rule them all
The old payments area was split into three tabs: Future Invoice, All Invoices and Payment History. The new Payments page brings everything together around one goal: driving users to pay overdue invoices. It shows the current balance with a clear “Pay now”, any overdue invoices, the forecast for the next bill and billing details, and adapts to every state, from new clients and fully paid accounts to unpaid invoices and suspended accounts.
The table on mobile
Data showed that the majority of users access billing and invoice information on desktop, so mobile wasn’t a priority for the first release.
Still, I prototyped how the invoices table should behave on small screens, so engineering had a clear reference: the table scrolls sideways to reveal amount, date, status and deadline, while an unpaid invoice keeps a full-width “Pay invoice” button in view.
Payment flow
A new side-modal component shows every billed service on an invoice, with PDF download. Pay several invoices at once, handle positive and negative balances, and see discounts reflected in the bill.
Forecast details
See the services forecast for the next invoice, with a scrollable bar of active ads. Pagination wasn’t feasible for the first release, so we used infinite scrolling.
Built to scale
Restyled for Storia and localised into Polish and Romanian, with Phrase built into the Figma files, translations validated by local stakeholders, and keys shared with front-end developers.
Notification alerts
A yellow banner one day after a missed deadline, and a red banner ten days before account suspension, backed by reminder emails on the same rules.
Scenarios & edge cases
Beyond the happy path, I designed every state a billing page has to handle, on desktop and mobile.
- New client: no invoicesAn empty state that explains what will appear here once the first invoice is issued.
- All invoices paidA reassuring confirmation that everything is up to date.
- Unpaid invoicesOverdue invoices highlighted, with the amount due and a clear “Pay now”.
- Account suspendedWhy the account is suspended, and how to restore it by paying what’s due.
- Pay multiple invoices at onceSelect several overdue invoices and settle them in a single payment.
- Positive balanceOverpayments are shown clearly as credit on the account.
- Negative balanceUnderpayments are flagged clearly, with a direct path to pay what’s missing.
- Discounts reflected in billingDiscounts bought are applied line by line, so the total always adds up.
- Multiple direct purchasesInvoice details list every ad and service bought directly, not just the plan.
- Payment successA clear confirmation that returns users to an up-to-date balance.
Ideas left out of the scope
- A wallet: add a card and upfront funds, working like a subscription, to encourage extra purchases and charge payments automatically each month.
- Better email notifications: update the notification email in-page, revisit the payment email templates, and add secondary emails so reminders reach the right person.
- Platform-wide alerts about due bills.
Testing takeaways
- Showing a customer ID alongside active ads in the forecast would make it much easier to spot problems when helping users.
- Paying a specific invoice’s amount, rather than a custom amount, would solve a big operational problem with invoicing.
- Updating billing details shouldn’t be easy or encouraged, because of legal constraints.
- The operations teams were very pleased with the solution, and with being included in redefining it.
Outcomes
The revamped payments experience delivered +267% debt collection after just one month and +19% of users paying on time, both the highest in the previous twelve months.
Reflections
Challenges
- I had only recently joined OLX, and supported this initiative alongside a second pack.
- An urgent time-to-market rushed the project.
- We couldn’t run more extensive research with real end users.
What I’d do differently
- Testing, testing and more testing, with a more thorough and methodical usability approach.
- Put more focus on measuring design decisions and their impact.
- Adopt a design system, which would have been greatly beneficial.
Got questions?
I’m always excited to collaborate on innovative and exciting projects.