.png){kind=small}
OVERVIEW
The bill payment experience redesign aimed to optimize the payment process through barcode or QR code scanning on payment receipts to automatically display the amount due. It also introduced functionality to save recurring services and help users make timely payments through reminder notifications. This project combined user research, interaction design, and strategic partnerships along product design (of course) to create a human-centered payment experience.
- Year
- 2023 – 2024
- Role
- Product Designer Interaction Designer Prototyper
- Research tools
- Mobile (iOS & Android)
- Design tools
- Figma Figjam
CONTEXT
In March 2023, Citibanamex (now Banamex) was undergoing a visual identity update within its app to deliver a fresher, more modern experience for users. This change was implemented in phases and would eventually impact all of the app's functionalities.
When the time came for the Bill Payments section, we seized the opportunity to enhance the experience working closely with research, interaction design, business, development teams and strategic partners to create a truly user-centered payment journey.
PROBLEMS
1. Visual identity
Due to the phased rollout of the app’s new visual identity, this functionality had yet to be aligned with the updated design system, resulting in inconsistencies in styles and definitions.
2. Limited catalog + missing payments
The billers catalog was limited and poorly organized, with no logical hierarchy for available services.
Users frequently forgot their payment due dates, leading to late fees and service interruptions.
3. One-time payments
Users were unable to make one-time service payments, meaning each time they needed to pay a different bill, they had to register the service first. This significantly increased both the interaction cost and workflow complexity.
CHALLENGE
How might we provide an extensive catalog of billable services that users can pay for and save in a way that's fast, easy, and secure?
GOALS
Expand catalog
The project aimed to expand the service catalog by establishing partnerships with companies offering API connections, which would provide a broader range of services and instant transaction confirmation.
Online services
For online-enabled services, the system would auto-populate payment amounts when users scanned QR codes or barcodes from their bills.
Save services + payment reminders
Another key goal was to create a saved services hub that would reduce interaction costs for recurring payments while implementing payment reminder notifications.
MVP
In collaboration with business and development teams, we established the first release’s core functionality: Users could make one-time payments and scan barcodes to auto-fill payment details, enjoy a streamlined catalog search, and choose between one-time payments or saved recurring services with reminders.
INTERACTION COST
One of the primary challenges was the high interaction cost in the existing experience. Users had to register the service every time they wanted to pay a bill, additionally manually input service reference numbers, slowing down the payment process.
To address the pain points, first, we implemented a one-time payment feature. This eliminated the need for users to register a service for every transaction, now they only need to enter or scan their reference number and complete the payment, with no extra steps, unless they want to save it as a recurrent payment.
Second, we introduced QR/barcode scanning, a feature that not only reads the reference number but also auto-fetches the payment amount for online-enabled services. This solution accelerated the payment process while minimizing errors from manual data entry.
PARTNERSHIP WITH ARCUS
To deliver a more comprehensive catalog and enable online payment functionality, we partnered with Arcus by Mastercard.
This integration provided access to approximately 70 services (with plans for continuous expansion), introduced online services that automatically displayed payment amounts when users scanned barcodes or entered reference numbers, and enabled one-time payments.
SEARCH FUNCTIONALITY
While an expanded service catalog delivered clear value, it introduced new usability challenges around discoverability. Our solution combined a prominent search bar with an intuitive category carousel, both informed by rigorous user research.
To establish the most logical filtering framework, we ran both open and closed card sorting tests, revealing how users naturally organized and labeled services. These insights directly shaped our 9 chip filtering system and its optimized hierarchy.
As a final enhancement through our Arcus partnership, we added service logos to leverage visual recognition reducing cognitive load and accelerating selection.
SAVED SERVICES
Through user research, we identified the need for quick access to frequently used services. Our solution introduced a saved services hub where users could store payments with custom aliases. As payment due dates approached, parametric badges would change color and display a countdown to the deadline.
We further enhanced this feature by collaborating with the messaging team to implement SMS and push notification reminders for saved services.
METRICS & EVOLUTION
As of late May, the platform has processed 410,000 successful payments totaling $295 million MXN since launch on February 26th, 2025. The most frequently paid service is CFE (electricity bills).
Strong user adoption and ongoing needs are driving the feature's evolution. Future phases will introduce recurring automatic payments, payment history tracking, and microinteractions to edit or remove saved services.
OVERVIEW
The bill payment experience redesign aimed to optimize the payment process through barcode or QR code scanning on payment receipts to automatically display the amount due. It also introduced functionality to save recurring services and help users make timely payments through reminder notifications. This project combined user research, interaction design, and strategic partnerships along product design (of course) to create a human-centered payment experience.
- Year
- 2023 – 2024
- Role
- Product Designer Interaction Designer Prototyper
- Research tools
- Mobile (iOS & Android)
- Design tools
- Figma Figjam
CONTEXT
Banamex, one of Mexico's largest banks with over 140 years of history and more than 20 million users, embarked on a new era following its separation from Citi. This transition presented a unique opportunity for a comprehensive business and audience brand renewal, including a full visual redesign.
The brand redesign was led by the agency Interbrand, with collaboration on motion elements from Plenty.
PROBLEMS
Following its separation from Citi, Banamex needed to visually signal a new era of innovation and growth. While Interbrand developed a beautiful new brand identity, the web ecosystem presented significant hurdles:
1. Visual identity
Due to the phased rollout of the app’s new visual identity, this functionality had yet to be aligned with the updated design system, resulting in inconsistencies in styles and definitions.
2. Limited catalog + missing payments
The billers catalog was limited and poorly organized, with no logical hierarchy for available services.
Users frequently forgot their payment due dates, leading to late fees and service interruptions.
3. One-time payments
Users were unable to make one-time service payments, meaning each time they needed to pay a different bill, they had to register the service first. This significantly increased both the interaction cost and workflow complexity.
CHALLENGE
How might we provide an extensive catalog of billable services that users can pay for and save in a way that's fast, easy, and secure?
DOCUMENTATION
In collaboration with business and development teams, we established the first release’s core functionality: Users could make one-time payments and scan barcodes to auto-fill payment details, enjoy a streamlined catalog search, and choose between one-time payments or saved recurring services with reminders.
Component library for web applications
One of the primary challenges was the high interaction cost in the existing experience. Users had to register the service every time they wanted to pay a bill, additionally manually input service reference numbers, slowing down the payment process.
To address the pain points, first, we implemented a one-time payment feature. This eliminated the need for users to register a service for every transaction, now they only need to enter or scan their reference number and complete the payment, with no extra steps, unless they want to save it as a recurrent payment.
Second, we introduced QR/barcode scanning, a feature that not only reads the reference number but also auto-fetches the payment amount for online-enabled services. This solution accelerated the payment process while minimizing errors from manual data entry.
Final Designs
To deliver a more comprehensive catalog and enable online payment functionality, we partnered with Arcus by Mastercard.
This integration provided access to approximately 70 services (with plans for continuous expansion), introduced online services that automatically displayed payment amounts when users scanned barcodes or entered reference numbers, and enabled one-time payments.
Outcome + Impact
We successfully launched the new Banamex brand on schedule, achieving our goals:
Expand catalog
The project aimed to expand the service catalog by establishing partnerships with companies offering API connections, which would provide a broader range of services and instant transaction confirmation.
Online services
For online-enabled services, the system would auto-populate payment amounts when users scanned QR codes or barcodes from their bills.
Save services + payment reminders
Another key goal was to create a saved services hub that would reduce interaction costs for recurring payments while implementing payment reminder notifications.
my Role
I owned the strategy and execution for the web rebrand, moving beyond just design into product leadership.
