Bill Payment – Mobile App UX/UI Design
Elisa Ulloa
Bill Payment – Mobile App UX/UI Design
I designed the end-to-end bill payment experience for NX’s mobile app, focusing on making a complex, stressful task feel simple and trustworthy. I worked on creating clear, mobile-first flows that guide users through selecting services, entering details, and confirming payments with confidence.
In its first week, this new feature processed over 2,600 transactions with an average ticket value of ARS 4,000, totaling more than ARS 10 million in Total Payment Volume (TPV). It quickly became one of the app’s most popular features, supporting millions of transactions annually.
Challenge
How might we increase the flow of money into Naranja X accounts while building long-term engagement around users’ financial behaviors?
During user interviews, one insight stood out: the ability to pay bills directly through the app would be a game-changing update. At the same time, the pandemic had sparked a 75% surge in digital bill and tax payments, 49% of which were processed through digital wallets or banks nationwide.
The opportunity? Make bill payments easier, more intuitive, and fully integrated—turning a basic utility into a powerful habit-forming feature that keeps users coming back.
My roles & objectives
As a Product Designer at Naranja X, I was responsible for leading the End-to-End UX process for the new bill payments feature.
Key focus areas:
Strategic Collaboration: Worked closely with UXR on interviews and usability testing, partnered with Marketing and Product teams to align design decisions with business goals and key metrics.
Product Design: Created wireframes and prototypes, ensuring smooth developer handoff, native implementation for iOS and Android, and the right metrics setup for post-launch evaluation.
App Integration: Ensured the new experience felt cohesive within the broader app ecosystem, maintaining consistency and usability across platforms.
Design System Expansion: Leveraged existing components and developed new ones when needed, presented them to the Design System committee, and documented everything for scalability and cross-team alignment.
User Experience Enhancement: Focused on delivering a polished, intuitive experience that improved user satisfaction, built trust, and encouraged long-term engagement with the platform.
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.
Impact & Conlusions
Within the first week of release, the new bill payment feature processed over 2,600 transactions, with an average ticket of ARS 4,000—totaling more than $15 million ARS in Total Payment Volume (TPV).
It rapidly became one of the most widely used features in the NX app, driving millions of transactions annually and proving its value as a core functionality for our users.
See the full case in:
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
8
