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?
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.