CM06

Scenario Explorer & Loan Calculator

Journey: Customer Mobile
Duration: ~2 minutes
Processing: Real-time (<100ms)
Type: Interactive self-service
1

User Interface Layer

Interactive sliders with real-time calculations

🎚️ Interactive Sliders

  • Loan Amount Slider: £10K-£250K range (£5K increments), current value £150K
  • Loan Term Slider: 1-5 years range (1-year increments), current value 3 years
  • Quick Select Buttons: £50K / £150K / £250K for amount, 1yr / 3yr / 5yr for term
  • Real-Time Updates: Calculations update instantly as slider moves (<100ms latency)
  • Mobile Gestures: Touch-optimized sliders with haptic feedback

💰 Payment Display Card

  • Monthly Payment: Large prominent display (e.g., "£4,440/month")
  • Total Interest: Lifetime interest cost (e.g., "£9,840 total interest")
  • Total Repayment: Principal + interest (e.g., "£159,840 total repayment")
  • Interest Rate: Fixed APR shown (4.5% in this case)
  • Animated Transitions: Numbers smoothly count up/down when values change

✅ Affordability Indicator

  • Green (Comfortable): Payment <60% of disposable income, £2K+ buffer
  • Orange (Manageable): Payment 60-75%, £500-2K buffer
  • Red (Tight): Payment >75%, <£500 buffer - warning displayed
  • Buffer Amount: Shows exact monthly cashflow remaining (e.g., "£1,800 buffer")
  • Recommendations: AI suggests reducing amount or extending term if tight

🧮 Calculation Modal

  • Trigger: "Show me the math" button opens explainability modal
  • Formula Display: PMT formula shown: P × [r(1+r)^n] / [(1+r)^n - 1]
  • Variable Breakdown: P = principal, r = monthly rate, n = months
  • Step-by-Step: Shows calculation with actual numbers
  • Amortization Preview: First few months of payment schedule

🎨 UI Events Captured

  • onAmountChange(amount) → Recalculates all values, updates UI instantly
  • onTermChange(years) → Recalculates monthly payment and interest
  • onQuickSelect(preset) → Jumps slider to preset value (£50K, £150K, etc.)
  • onShowCalculation() → Opens modal with formula and breakdown
  • onLockScenario() → Saves chosen scenario and proceeds to CM07
2

API / Backend for Frontend (BFF)

Real-time calculation endpoint (optional - can be client-side)

🔌 Calculate Loan Scenario Endpoint

  • Method: POST (or client-side JavaScript calculation)
  • URL: /api/v1/loan-calculator/calculate
  • Purpose: Calculate monthly payment, total interest, affordability
  • Note: Often done client-side for <100ms performance
Request (Optional Server-Side)
POST /api/v1/loan-calculator/calculate
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
Content-Type: application/json

{
  "principal": 150000,
  "term_months": 36,
  "annual_interest_rate": 0.045,
  "application_id": "app_20251222_143023_usr123"
}
Response (200 OK)
{
  "request_id": "req_cm06_20251222_143715",
  "status": "success",
  "calculation": {
    "monthly_payment": 4440,
    "total_interest": 9840,
    "total_repayment": 159840,
    "apr": 0.045
  },
  "affordability": {
    "disposable_income_monthly": 6240,
    "payment_to_income_ratio": 0.711,
    "cashflow_buffer": 1800,
    "status": "comfortable",  // "comfortable", "manageable", "tight"
    "recommendation": "This leaves you a healthy operational cushion"
  },
  "amortization_schedule": [
    {
      "month": 1,
      "payment": 4440,
      "principal": 3877,
      "interest": 563,
      "balance": 146123
    },
    // ... 35 more months
  ],
  "processing_time_ms": 12,
  "timestamp": "2025-12-22T14:37:15Z"
}

💾 Save Scenario Endpoint

  • Method: POST
  • URL: /api/v1/applications/{application_id}/save-scenario
  • Purpose: Save customer's chosen loan scenario
Save Scenario Request
POST /api/v1/applications/app_20251222_143023_usr123/save-scenario

{
  "chosen_amount": 150000,
  "chosen_term_months": 36,
  "monthly_payment": 4440,
  "total_interest": 9840,
  "scenarios_explored": 7,  // Number of slider adjustments
  "time_spent_seconds": 145
}

⚡ Performance Optimization

  • Client-Side Calculation: JavaScript PMT formula runs in browser (<100ms)
  • Server-Side Alternative: For complex scenarios (stepped rates, balloon payments)
  • Debouncing: Wait 200ms after slider stops moving before server call
  • Caching: Cache interest rate by risk grade in session storage

🧮 Loan Calculation Formulas

Monthly Payment (PMT Formula)

M = P × [r(1+r)^n] / [(1+r)^n - 1]
  • M: Monthly payment
  • P: Principal loan amount
  • r: Monthly interest rate (APR ÷ 12)
  • n: Number of months
Example Calculation
// £150,000 @ 4.5% APR over 36 months

P = 150000
APR = 0.045
r = 0.045 / 12 = 0.00375
n = 36

M = 150000 × [0.00375(1.00375)^36] / [(1.00375)^36 - 1]
M = 150000 × [0.00375 × 1.1448] / [1.1448 - 1]
M = 150000 × 0.004293 / 0.1448
M = 150000 × 0.02964
M = £4,440/month

Total Interest

Total Interest = (M × n) - P
  • M: Monthly payment
  • n: Number of months
  • P: Principal
Example Calculation
// Same loan example

Total Repayment = 4440 × 36 = £159,840
Total Interest = 159840 - 150000 = £9,840

Interest as % = (9840 / 150000) × 100 = 6.56%
// Note: This is total interest over life of loan,
// not the same as APR (which is annualized)

Affordability Ratio

Ratio = M / Disposable Income
  • Comfortable: <60% (green)
  • Manageable: 60-75% (orange)
  • Tight: >75% (red, warning)
Example Calculation
// Olivia's café example

Disposable Income = £6,240/month
Monthly Payment = £4,440

Ratio = 4440 / 6240 = 0.711 = 71.1%

Cashflow Buffer = 6240 - 4440 = £1,800/month

Status: Comfortable// 71% is under 75% threshold with healthy £1.8K buffer

Amortization Schedule

Interest_n = Balance_(n-1) × r
Principal_n = M - Interest_n
Balance_n = Balance_(n-1) - Principal_n
  • Month 1: More interest, less principal
  • Month n: More principal, less interest
  • Pattern: Interest decreases, principal increases each month
First 3 Months Example
// Month 1
Interest = 150000 × 0.00375 = £563
Principal = 4440 - 563 = £3,877
Balance = 150000 - 3877 = £146,123

// Month 2
Interest = 146123 × 0.00375 = £548
Principal = 4440 - 548 = £3,892
Balance = 146123 - 3892 = £142,231

// Month 3
Interest = 142231 × 0.00375 = £533
Principal = 4440 - 533 = £3,907
Balance = 142231 - 3907 = £138,324
3

Business Logic & Calculation Engine

Real-time loan calculations and affordability assessment

🧮 JavaScript Calculation Engine

  • Location: Client-side JavaScript for instant feedback
  • Performance: <100ms calculation time (no network latency)
  • Accuracy: Matches Excel PMT function to the penny
  • Libraries: Native JavaScript Math functions (no external dependencies)
JavaScript PMT Implementation
// Calculate monthly payment using PMT formula

function calculateMonthlyPayment(principal, annualRate, months) {
  // Convert annual rate to monthly
  const monthlyRate = annualRate / 12;
  
  // Handle edge case: 0% interest
  if (monthlyRate === 0) {
    return principal / months;
  }
  
  // PMT formula: P × [r(1+r)^n] / [(1+r)^n - 1]
  const x = Math.pow(1 + monthlyRate, months);
  const monthly = principal * (monthlyRate * x) / (x - 1);
  
  return Math.round(monthly); // Round to nearest pound
}

// Calculate total interest
function calculateTotalInterest(monthlyPayment, months, principal) {
  const totalRepayment = monthlyPayment * months;
  return totalRepayment - principal;
}

// Assess affordability
function assessAffordability(monthlyPayment, disposableIncome) {
  const ratio = monthlyPayment / disposableIncome;
  const buffer = disposableIncome - monthlyPayment;
  
  let status, message;
  
  if (ratio < 0.60 && buffer > 2000) {
    status = 'comfortable';
    message = 'This leaves you a healthy operational cushion';
  } else if (ratio < 0.75 && buffer > 500) {
    status = 'manageable';
    message = 'This is manageable. Consider extending term if needed.';
  } else {
    status = 'tight';
    message = 'This would be challenging. We recommend reducing amount or extending term.';
  }
  
  return { status, ratio, buffer, message };
}

// Real-time update on slider change
function updateCalculations() {
  const principal = parseInt(amountSlider.value);
  const years = parseInt(termSlider.value);
  const months = years * 12;
  const rate = 0.045; // From CM05 credit assessment
  
  const monthlyPayment = calculateMonthlyPayment(principal, rate, months);
  const totalInterest = calculateTotalInterest(monthlyPayment, months, principal);
  const affordability = assessAffordability(monthlyPayment, 6240);
  
  // Update UI instantly
  updateUI(monthlyPayment, totalInterest, affordability);
}

📊 Amortization Schedule Generator

  • Purpose: Generate month-by-month payment breakdown
  • Usage: For "Show me the math" modal and detailed reports
  • Performance: Generate 60-month schedule in <10ms
Amortization Generator
function generateAmortizationSchedule(principal, annualRate, months) {
  const monthlyRate = annualRate / 12;
  const monthlyPayment = calculateMonthlyPayment(principal, annualRate, months);
  
  const schedule = [];
  let balance = principal;
  
  for (let month = 1; month <= months; month++) {
    const interest = Math.round(balance * monthlyRate);
    const principalPayment = monthlyPayment - interest;
    balance -= principalPayment;
    
    schedule.push({
      month,
      payment: monthlyPayment,
      principal: principalPayment,
      interest,
      balance: Math.max(0, balance) // Avoid negative due to rounding
    });
  }
  
  return schedule;
}

⚠️ Validation Rules

  • Min Amount: £5,000 (below this, suggest alternative products)
  • Max Amount: £250,000 (from CM05 credit assessment result)
  • Min Term: 12 months (1 year)
  • Max Term: 60 months (5 years)
  • Affordability Warning: Show if buffer <£500 or ratio >75%

💡 Smart Recommendations

  • Too Tight: "Consider reducing to £120K or extending to 4 years"
  • Optimal: "This matches your request and leaves healthy buffer"
  • Conservative: "You're approved for up to £250K if needed"
  • Short Term High Payment: "Extend to 3 years to reduce monthly payment by 30%"