Design Manager (Caixa)
Senior UX/UI Designer
Mid-level UX/UI Designer (me)
- Qualitative Research
- Ideation
- User Flow Mapping
- Interface Design
- Prototyping
- Usability Testing
- Developer Handoff
6 months
One platform, two gateways,
zero consistency
The integration of Mercado Pago and Recarga Pay was technically functional but visually fragmented. Users felt like they were leaving the Caixa environment when making a payment — leading to distrust, checkout abandonment, and user complaints.
Before
Three limited redemption options, confusing flows, generic errors, and a lack of clarity regarding transaction status. The absence of options resulted in a high complaint rate from users.
Challenge
Create a unified interface to serve as a cohesive visual layer over two distinct gateways — ensuring users felt they remained in Caixa's secure environment, regardless of their payment choice.
Key Frictions Identified
-
Visual Inconsistency
Buttons and input fields with different styles for each payment method, breaking brand identity.
-
Confusing Feedback
Users were left in the dark, unsure whether their payment was approved or still processing.
-
Excessive Steps
Multiple screen redirects increased checkout time and the likelihood of drop-off.
-
Generic Errors
Lack of clarity regarding payment decline reasons, preventing sale recovery.
-
Data Loss
The form wiped entered information if users went back a step to make a correction.
-
Loss of Trust
Abrupt layout shifts when navigating to the gateway made users feel they left the secure environment.
Benchmarking
To design the new experience, we analyzed e-commerce and fintech leaders — focusing on orchestrating multiple payment options and reducing friction across the conversion journey.
Amazon
Mercado Livre
PagSeguro
Mercado Pago
Scenario Mapping
To ensure a robust integration, we mapped and prototyped every possible interface state — covering purchase flows and the nuances of redemption flows for both gateways.
Purchase Journey & Cards
-
No saved card
-
No saved card
-
1 card (unauthorized debit)
-
2 cards (processing)
-
1 saved card
-
Multiple cards (Scroll/Actions)
Redemption Journey
-
Existing account
-
No account
-
Non-existent account warning
-
Existing account
-
Error: Non-existent account
The Logic Behind the Screens
A robust checkout is not built on happy paths alone. My primary role was mapping and designing system responses for communication failures between Caixa and the gateways.
Latency Management
Banking APIs fluctuate. I designed intermediate "Processing Payment" states that inform users about the wait time, preventing double clicks and reducing anxiety during the security handshake.
Granular Error Handling
We replaced the generic "Payment Error" with specific feedback based on API return codes — insufficient funds, security block, or gateway failure.
Status Reconciliation
What happens when funds leave the user's account but the lottery store doesn't receive confirmation? I designed retry flows and provisional receipts to ensure legal and transactional security.
Tokenization & Security
For the saved card flow, the interface was designed adhering to tokenization rules — masking sensitive data (PCI Compliance) while allowing easy card identification for the user.
What Was Delivered
Unified Journey
A single interface covering two gateways, dozens of error scenarios, and complete purchase and redemption flows.
Restored Trust
Users remain in Caixa's visual environment regardless of the gateway — with no jarring layout shifts.
Comprehensive Handoff
Detailed documentation covering all states, including edge cases and error flows for the engineering team.
Pioneering Integration
The first payment gateway integration on the Caixa Econômica Federal Lottery platform.
Let's work together?
If you have an idea, an open position, or just want to connect, send me a message.