Overview
Role: Lead Designer
When: Ago - Nov 2021
Platform: B2C - Native App
Industry: Fintech, B2C
Responsibilities: UX Research, UI Design, Prototyping, User Testing
Key Deliverables:
User Flows
Wireframes & Prototypes
Testings
Component Library
Design System Documentation
About Naranjax
Naranjax is a user-centric financial platform designed to simplify money management. It offers a free mobile account in Argentine Pesos, giving users an intuitive way to manage their finances directly from their smartphones.
Naranjax provides a wide range of services, users can easily pay bills—one of the most frequently used features, which we’ll focus on in this user case—transfer money, recharge mobile phones and transportation cards, subscribe to services, request credit, and enjoy tailored promotions and installment plans at merchants across the country.
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 & Objetives
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.
Process
Research
The project began with comprehensive desk research and competitive benchmarking, focusing on how users in Argentina manage utility payments. At the time, paying bills through physical locations was still the norm, offering the convenience of centralized transactions and a variety of payment methods. However, the COVID-19 pandemic disrupted this habit, exposing a significant gap in digital alternatives.
This shift in behavior revealed an opportunity: users needed a fast, reliable, and intuitive way to pay their bills online—without sacrificing the familiarity and ease of physical locations.
Ideation
Based on these insights, we mapped out an user journey that addressed the key pain points. Early sketches were created collaboratively with the team to align expectations and consolidate ideas. These quick drawings evolved into wireframes that laid the groundwork for the final experience.
Design & User Testing
With clear hypotheses in place, we moved into prototyping and user validation. At Naranja X, user feedback is integrated early and often. Collaborating with the UXR team, we carried out a full end-to-end research plan that included:
Database sourcing and segmentation
Screener design and recruitment
Consent flows and testing setup (Lookback)
Since NX already had a solid and mature Design System, we didn’t need to rely on low-fidelity wireframes for testing. Instead, we could prototype directly in Figma using real, implemented components from the library. This approach allowed us to maintain visual and interaction consistency across the app, while also testing the new components introduced specifically for the bill payment flow.
Pilot sessions, moderated interviews, and data analysis
User feedback uncovered important behavioral patterns. For instance, many struggled to keep track of due dates across multiple bills, and locating the correct payment code was a common source of friction. These different findings drove a range of product decisions, including:
Payment reminders and centralized due date management
A feature/hint to help users identify the required bill codes
A scanning flow to replicate the familiar in-store experience
The ability to save recurring services for faster payments
Support for all major payment methods
The ability to view their current balance throughout the entire flow
The importance of sending a payment receipt via email
Iteration & Handoff
Following the research phase, the design was iterated based on real user input. Final prototypes were tested for usability, then handed off to development with documentation and specs, ensuring alignment across teams. Design tokens, component behavior, and edge cases were all accounted for during implementation.
Implementation, Success Metrics & Monitoring
Success measurement was a core part of the process. In collaboration with the analytics team, we defined key KPIs and implemented tracking using Amplitude. This allowed for continuous monitoring and iteration based on actual usage data.
Metrics tracked included:
Total bills paid (scanner & search)
Total transaction volume (scanner & search)
Conversion rate by entry point
Top 10 most paid services
Payment method breakdown
Payment error rate
Drop-off rate per step
Average completion time
Repeat usage rate
New vs returning users
Engagement with reminders
Bill scanning success rate
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 $4,000 ARS—totaling more than $15 million ARS in Total Payment Volume (TPV).
It rapidly became one of the most-used features in the NX app, driving millions of transactions annually and proving its value as a core functionality for our users.