Bill Payment – Mobile App UX/UI Design
Elisa Ulloa
Bill Payments for the Naranja X App
I designed the bill payments feature for Naranja X, an Argentine fintech app, end-to-end. Users can scan a bill with the camera or search for the service manually, preview what they owe next to their current balance, and save their services to get reminders before the due date.
The hardest part was helping people find the service code on their bill. I explored several approaches and tested them with users before landing on the final hint. I also built the new components the feature needed on top of the existing design system, presented them to the design system team and documented them once approved.
The feature launched in October 2020. In its first week, it processed over 2,600 transactions, with an average ticket of ARS 4,000, for more than ARS 10 million in total payment volume.
Full case study: Elisa Ulloa - Payment Services
Solution
Two ways to pay your bills
Users can either scan their bills using the camera or search for them manually, providing flexibility for different levels of digital familiarity.
Final approach for the service code hint
After exploring multiple approaches and validating them through user testing, we landed on this solution to help users quickly identify where to find the service code on their bill.
Dynamic bill previews with balance visibility
Based on each service’s data requirements, the preview adapts accordingly. We also included the user’s current balance at the top—so they don’t have to leave the flow just to check how much money they have
Save and stay up to date with “Your Services”
This feature lets users save their preferred services, so they don’t need to scan or search for them again. Once linked, they'll get reminders when bills are close to their due date—and confirmation when they're up to date.
Handling errors with clarity
Some of the screens designed for error states and edge cases. NX relies on friendly illustrations to clearly communicate issues and guide users back on track.
Like this project
Posted May 5, 2024
Designed a mobile-first bill payment flow that turned complex, stressful tasks into smooth, trusted experiences for our B2C users.
Likes
0
Views
19
