LibraPay

LibraPay is Libra's payment processing service. It's the page that loads when you buy tickets, order online, or pay any merchant that uses Libra as their payment provider. It's not the bank's app. It's the last screen between a customer and their money, for people who may never have heard of Libra at all.

The old page had two problems that fed each other. It looked like it hadn't been touched since the service launched: cluttered trust badges, a form crammed into a corner, a floating support widget that covered half the screen on smaller devices. And it did exactly one thing: take a card number. No wallets, no one-tap options, nothing that matched how people had started expecting to pay anywhere else online.

I worked on this alongside one other designer. We started in May 2024 and shipped, design and development together, about six months later.

Before redesigning anything, we needed to understand why a page that technically worked was still losing people. A few things came out clearly.

The brief stopped being "modernize the visual design" and became "give people a reason to trust this page, on the device they're actually using, with the payment method they already prefer." Three different problems, not one.

The old LibraPay page asked people to hand over their card details on a screen that didn't look like it belonged to anyone in particular, let alone a bank. It offered one way to pay, on a layout that treated mobile as an afterthought, at the exact moment in a purchase where hesitation is most expensive, both for the merchant losing the sale and for the bank processing it.

Three methods went in alongside the redesign, all in direct response to what people kept asking for.

All three were fast-tracked once we saw how consistently people asked for a way to pay that didn't involve typing card digits.

The new page leads with the bank's identity, clearly, before it asks for anything. Amount and merchant sit in a fixed panel that never moves, so no matter which payment method someone picks, they can always see what they're paying and to whom. The three methods sit as equal tabs, not a form with links to alternatives buried underneath.

Mobile got its own layout, not a compressed version of desktop: the trust panel and the form stack vertically, with Apple Pay surfaced immediately when the device supports it.

This page belongs to merchants, not to Libra's own customers, which made external usability testing harder to arrange than it would be for the bank's app. Instead, most of our testing happened internally, with bank employees who hadn't seen the designs, walking through Figma prototypes on both desktop and mobile.

It wasn't a substitute for testing with real cardholders, but it caught a lot: confusing states, unclear error messages, moments where people hesitated over which method to pick. We iterated through several rounds of prototypes before the flows felt obvious enough to hand to engineering.

Internal usability testing is not the same as watching real cardholders under real purchase pressure. If I did this again, I'd push harder, earlier, for a way to test with actual merchant customers, even a small panel, before shipping.