UI/UX Design Jobs in Fintech: Role and Responsibilities

// Money display — the design decisions that actually matter.

// The naive version (WRONG for fintech):
//
//   <span className="amount">₹{amount}</span>
//
// This is fine for a demo. In production, it introduces three
// real problems:
//   1. Locale — Indian users expect lakh/crore separators (₹1,23,456)
//   2. Rounding — 1499.5 must not silently become 1500
//   3. Currency — a "₹" symbol assumes INR; multi-currency apps
//      must format based on the account, not the locale

// The right version:
export function Money({ value, currency = "INR", locale = "en-IN" }) {
  const formatter = new Intl.NumberFormat(locale, {
    style: "currency",
    currency,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

  return (
    <span className="money" aria-label={`${value} ${currency}`}>
      {formatter.format(value)}
    </span>
  );
}

// Usage:
//   <Money value={123456.5} />
//   → "₹1,23,456.50"
//
// Why this matters in fintech:
// - Money is the primary content. Getting the format wrong
//   signals carelessness and undermines trust.
// - Precision matters. Never round silently.
// - Accessibility matters. Screen readers should hear
//   "1,23,456 rupees and 50 paise", not "₹1,23,456.5".
// - Consistency matters. Every amount in the app should
//   come from one formatting function, not dozens of inline
//   string concatenations.
//
// This is the kind of detail fintech UX interviews probe —
// not because it's hard, but because it reveals whether you
// think about the user's real money.

// Error state — payment failed.
// In fintech, this is not an edge case. It is a core screen.

export function PaymentFailed({ reason, referenceId, onRetry }) {
  return (
    <div className="payment-failed" role="alert" aria-live="polite">
      <div className="icon" aria-hidden="true">⚠️</div>

      <h1>Payment could not be completed</h1>

      <p className="explanation">
        Your account was not debited. You can try again safely.
      </p>

      <dl className="details">
        <dt>Reason</dt>
        <dd>{reason}</dd>

        <dt>Reference ID</dt>
        <dd>{referenceId}</dd>
      </dl>

      <div className="actions">
        <button className="primary" onClick={onRetry}>
          Try again
        </button>

        <a href="/support" className="secondary">
          Contact support
        </a>
      </div>
    </div>
  );
}

// What fintech UX interviews probe here:
//
// 1. "Did the user lose money?"
//    → Always answer this in the first sentence. "Your account
//      was not debited" is more important than the error reason.
//
// 2. "What can the user do next?"
//    → Clear actions: retry, contact support. Not a dead end.
//
// 3. "How does the user reach support?"
//    → The reference ID must be visible, copyable, and
//      usable when calling support. Otherwise support cannot
//      help them.
//
// 4. "Is it accessible?"
//    → role="alert" ensures screen readers announce it.
//      Color alone is not enough; the icon and text carry
//      the meaning.
//
// The happy path in fintech is easy. This screen is the job.

// Trust — consent & disclaimers.
// The design details that let users feel safe clicking "Pay".

export function PaymentConsent({
  amount,
  recipient,
  feeAmount,
  onConfirm,
}) {
  const total = amount + feeAmount;

  return (
    <section className="consent" aria-labelledby="consent-title">
      <h1 id="consent-title">Review your payment</h1>

      <dl className="summary">
        <dt>Amount</dt>
        <dd><Money value={amount} /></dd>

        <dt>Fee</dt>
        <dd>
          {feeAmount === 0 ? "No fee" : <Money value={feeAmount} />}
        </dd>

        <dt>Total debited</dt>
        <dd className="total"><Money value={total} /></dd>

        <dt>To</dt>
        <dd>{recipient}</dd>
      </dl>

      <p className="disclaimer">
        By confirming, you authorise a one-time debit of{" "}
        <Money value={total} />. This action cannot be
        reversed once the recipient receives the funds.
      </p>

      <button onClick={onConfirm} className="primary">
        Confirm and pay <Money value={total} />
      </button>
    </section>
  );
}

// What fintech UX interviews probe here:
//
// 1. "Can the user see the total before confirming?"
//    → Fee must be shown. "₹500 + ₹10 fee = ₹510" is honest.
//      "₹500" and charging ₹510 later is a design failure.
//
// 2. "Is the confirmation button unambiguous?"
//    → "Confirm and pay ₹510" — not just "Confirm". The user
//      should never be unsure what they are agreeing to.
//
// 3. "Is the disclaimer readable?"
//    → In plain language, before the button, not in tiny text
//      after it. Compliance-driven copy is not an excuse for
//      bad writing.
//
// 4. "Is the failure case covered?"
//    → If the recipient cannot receive funds, the user must
//      be told clearly. Silence is worse than an error.
//
// Trust is built in the details of these screens —
// not in a brand color or a friendly illustration.