Redesigning the flagship mobile banking experience for the largest bank in Central America — rebuilding task-critical flows for credit card management, bill payments, and financial overview to serve 6M+ users across 6 countries with clarity, trust, and zero anxiety.
BAC Credomatic is the most trusted financial institution in Central America. The visual system earns that trust through precision, restraint, and semantic color use — not decoration. Every design decision was evaluated against one question: does this reduce or increase anxiety at a financial moment?
BAC Credomatic had a mobile app — but it was organized around the bank's internal product structure, not around what users actually needed to do. The result: users who wanted to pay their credit card had to know that "pagar tarjeta" lived under Tarjetas → Mi Tarjeta → Gestión → Pago. Four levels deep for the most common task in the app.
This wasn't a greenfield redesign. BAC had existing infrastructure, regulatory obligations, and a customer base that had learned the old patterns. Every design decision had to be evaluated against what the bank could actually ship.
I don't have post-launch analytics access — this was a contractor engagement with NDA restrictions on sharing specific metrics. What I can document is what the design was built to change, and the qualitative evidence from pre-launch usability validation.
Each screen answers three user questions: where am I, what can I do, what needs my attention. Here's the complete system — 4 screens per row, small phones so you see the full layout logic.
The process board is the artifact that separates a UI portfolio from a UX portfolio. It shows the thinking behind the pixels. Structure: 4 color-coded phases, each with editorial sticky notes capturing the real research artifacts.
Show all three in the case study. Lo-fi = you think before you draw. Mid-fi = you test before you polish. Hi-fi = you deliver production quality. Each level communicates something different to a recruiter.
Each component was designed with its banking-specific trust responsibility. Financial UX patterns carry more weight than consumer app equivalents — every interaction has a consequence that matters to the user's real life.
| Component | Visual | Banking UX Role | Trust Pattern |
|---|---|---|---|
Account Balance Card |
•••• 4821 · Cta. Corriente ₡847,320.50 |
Most critical screen element. Answers "how much do I have?" in <1 second. 22px/800 balance. Swipeable for multiple accounts. | Masked number prevents shoulder surfing. Color per account type builds recognition over time. |
Payment Amount Selector |
Pago mínimo Vence 20 Jul $85.00 |
Reduces anxiety at the highest-stress moment. Radio = explicit user choice. Amount right-aligned for scanning. Pre-select minimum = safe default. | Consequences visible before confirming. Plain language options. No bank jargon. |
Transaction Row |
🏪 Walmart CR Hoy 8:24 AM · Débito -₡42,800 Aprobado |
Most repeated pattern in the app. Merchant name + category icon + date. Red for debit, green for credit. Status chip prevents anxiety. | "Aprobado" status reduces uncertainty. Color + label together (not color alone) for accessibility. |
Due Date Alert |
⏰ Vence en 5 días Pago mínimo: $85.00 |
Amber (upcoming) vs Red (overdue). Never alarming until actually overdue. Specific amount in the alert — not just "you have a balance". | Urgency without panic. Actionable from the banner. Dismissible but persistent until paid. |
Receipt / Confirmation |
✓ ¡Pago exitoso! TXN-20250720-00847 |
Closure moment. Success icon (not just color). Reference number = official record. Calm green, not celebration. Receipt-format layout. | Reference number is the single most trust-building element on this screen. It makes the transaction feel real and traceable. |
In banking UX, microcopy is a trust mechanism. Every label, error state, and CTA communicates whether the bank is working for you. Plain, calm, specific language reduces anxiety at every interaction.
The following screens were generated from the visual direction defined in this case study — demonstrating how the design language translates into production-ready interfaces across every critical flow.
These are the moments where the answer wasn't obvious. Each decision involved tradeoffs between user needs, business constraints, and technical reality. I'm documenting not just what I chose but what I rejected and the reasoning behind each tradeoff.