Bancoppel challenge
Bancoppel challenge
Design challenge
From problem framing to interface design of bancoppel's payment flow.
Mobile app for credit card payments
Quick Overview
Context & framing
The challenge
Most BanCoppel users still choose the branch over the app to pay their credit card. Research showed that payment confirmation is the pivotal moment where the transaction can either feel secure or leave the user doubting it went through.
The challenge was to design an experience that builds user trust in digital payment, reduces flow confusion, and increases payment intent in the app to increase digital credit card payments by 35%.
This project redesigns the credit card payment flow so the app delivers certainty, at the points where users feel least sure.
Context & framing
The challenge
Most BanCoppel users still choose the branch over the app to pay their credit card. Research showed that payment confirmation is the pivotal moment where the transaction can either feel secure or leave the user doubting it went through.
The challenge was to design an experience that builds user trust in digital payment, reduces flow confusion, and increases payment intent in the app to increase digital credit card payments by 35%.
This project redesigns the credit card payment flow so the app delivers certainty, at the points where users feel least sure.
Key pain points
01.
Flow Confusion
The current flow mixes BanCoppel credit card payments with third-party card payments.
02.
Fear of Fraud
Fear of fraud keeps many customers from paying through the app
03.
Distrust in the Receipt
Physical receipts give users more security than digital ones
What I designed
I designed the amount screen to reduce payment anxiety and the confirmation to feel permanent and retrievable.
The research showed that entering a payment amount was the moment of highest anxiety in the flow. Users hesitated, second-guessed the number they typed, and worried about security before committing. I placed a reassurance cue directly below the amount field confirming the payment travels encrypted, and used agency language on the CTA ("Confirmar mi pago de $1,500") so the button itself summarizes the exact action being taken.
Usability tests revealed that users needed a way back before they'd feel safe moving forward. Without visible reversibility, they abandoned the flow rather than risk an unwanted payment. So I built a mandatory review screen as a commitment checkpoint, keeping "Modificar monto" visible and accessible until the final confirmation.
Key screens
What I designed
I designed the amount screen to reduce payment anxiety and the confirmation to feel permanent and retrievable.
The research showed that entering a payment amount was the moment of highest anxiety in the flow. Users hesitated, second-guessed the number they typed, and worried about security before committing. I placed a reassurance cue directly below the amount field confirming the payment travels encrypted, and used agency language on the CTA ("Confirmar mi pago de $1,500") so the button itself summarizes the exact action being taken.
Usability tests revealed that users needed a way back before they'd feel safe moving forward. Without visible reversibility, they abandoned the flow rather than risk an unwanted payment. So I built a mandatory review screen as a commitment checkpoint, keeping "Modificar monto" visible and accessible until the final confirmation.
Key screens
What I designed
I designed the amount screen to reduce payment anxiety and the confirmation to feel permanent and retrievable.
The research showed that entering a payment amount was the moment of highest anxiety in the flow. Users hesitated, second-guessed the number they typed, and worried about security before committing. I placed a reassurance cue directly below the amount field confirming the payment travels encrypted, and used agency language on the CTA ("Confirmar mi pago de $1,500") so the button itself summarizes the exact action being taken.
Usability tests revealed that users needed a way back before they'd feel safe moving forward. Without visible reversibility, they abandoned the flow rather than risk an unwanted payment. So I built a mandatory review screen as a commitment checkpoint, keeping "Modificar monto" visible and accessible until the final confirmation.
Key screens
The research also showed that users didn't fully trust a digital payment until they had something tangible to hold onto, closer to the certainty of a paper receipt. I designed a large, prominent folio number with a downloadable PDF and share option, so the confirmation replaces the psychological need for physical proof of payment.
Interviews also showed that users often closed the app right after paying, before feeling reassured the payment went through. So I added a delayed push notification that arrives a few minutes later, giving users a second, unprompted layer of validation instead of confirmation they'd have to seek out themselves.
Key flow decisions:
Two-step progress indicator (1 de 2 / 2 de 2)
Social proof above the fold to reduce hesitation early
Reversible amount entry through final confirmation
Delayed notification as a second reassurance layer
The research also showed that users didn't fully trust a digital payment until they had something tangible to hold onto, closer to the certainty of a paper receipt. I designed a large, prominent folio number with a downloadable PDF and share option, so the confirmation replaces the psychological need for physical proof of payment.
Interviews also showed that users often closed the app right after paying, before feeling reassured the payment went through. So I added a delayed push notification that arrives a few minutes later, giving users a second, unprompted layer of validation instead of confirmation they'd have to seek out themselves.
Key flow decisions:
Two-step progress indicator (1 de 2 / 2 de 2)
Social proof above the fold to reduce hesitation early
Reversible amount entry through final confirmation
Delayed notification as a second reassurance layer
Design responses
01.
Trust & Reassurance
Security cue + agency language on the CTA
02.
Commitment Checkpoints
Mandatory review screen before sending
03.
Reversible
Actions
Reversible amount + exit confirmation modal
03.
Reversible Actions
Reversible amount + exit confirmation modal
How I would measure success
Friction
%
Payment flow completion rate
Start to finish, no drop-off
Confirmation screen drop-off
Highest point of anxiety
Friction
%
Payment flow completion rate
Start to finish, no drop-off
Confirmation screen drop-off
Highest point of anxiety
Confidence
%
Push notification open rate
Trust in the delayed confirmation
Receipt PDF download rate
Proxy for perceived legitimacy
Retention
%
Repeat digital payment rate
Trust that lasts past one payment
Branch payments among app users
Digital replacing, not supplementing
What broke and why it mattered
Findings
Horizontal carousels weren't perceived as scrollable
Design decision
Reduced card width so adjacent cards are partially visible, making the swipeable pattern immediately legible.
Date carousel didn't read as interactive
Design decision
Adjusted the clip so the circle is clearly cut making the overflow intentional and the interaction obvious.
Expense screen was too overwhelming
Design decision
Expense categories were turned into collapsible cards, while the summary button was moved to the fixed bottom nav for constant visibility.
What broke and why it mattered
Findings
Horizontal carousels weren't perceived as scrollable
Design decision
Reduced card width so adjacent cards are partially visible, making the swipeable pattern immediately legible.
Date carousel didn't read as interactive
Design decision
Adjusted the clip so the circle is clearly cut making the overflow intentional and the interaction obvious.
Expense screen was too overwhelming
Design decision
Expense categories were turned into collapsible cards, while the summary button was moved to the fixed bottom nav for constant visibility.
Horizontal carousels weren't perceived as scrollable
During the session, none of the participants swiped the destination carousel horizontally. The card edges weren't visible enough to signal that more content existed beyond the frame.
Design decision
Reduced card width so adjacent cards are partially visible, making the swipeable pattern immediately legible.
Date carousel didn't read as interactive
The date selector used a circular element that got clipped at the screen edge. Participants didn't recognize it as something they could scroll.
Design decision
Adjusted the clip so the circle is clearly cut making the overflow intentional and the interaction obvious.
Expense screen was too overwhelming
The cluttered expense screen caused users to overlook the summary button, as all categories and fields were visible at once.
Design decision
Both expense categories were redesigned as collapsible cards, reducing visual noise and letting users focus on what's relevant.
The expense summary button was moved to the bottom navigation bar and highlighted in green, making it visible regardless of scroll position.
Reflection
This was a one-week challenge, not a shipped product, so I focused on the two moments where trust breaks down most: entering an amount, and confirming the payment. Every decision, the security cue, the review screen, the folio number, ties back to reducing hesitation at those points.
Next step: validate these decisions with real users. The metrics above are what I'd track first, starting with completion rate and drop-off at the confirmation screen, since that's where the assumption matters most.