Skip to content

User Journey: Loan Processing Workflow Experience

Feature: Single Message Processing Workflow Date: 2025-10-01 User Persona: First-time loan applicant Goal: Understand loan processing status without confusion or anxiety

User Persona

Name: Jessica Martinez Age: 32 Role: Small business owner applying for first business loan Tech Savvy: Moderate (comfortable with apps, but not a developer) Context: Just finished conversation with Cap-ital America, clicked "Submit Application" Device: iPhone 13 (mobile-first user) Emotional State: Nervous but hopeful about loan approval

Accessibility Needs: - Uses larger text size (iOS accessibility setting) - Prefers clear, simple language - Appreciates visual progress indicators

Pain Points with Current Design: - "Four messages stacking up feels overwhelming" - "I can't tell which agent is working RIGHT NOW" - "Do I need to read all four messages or just the latest?" - "On my phone, I have to scroll to see everything"

Current State Journey (BEFORE Redesign)

Step 1: Application Submission (0s)

User Action: Clicks "Submit Application" button System Response: Page transitions to "Processing Your Application" User Emotion: 😊 Excited, expectant

What User Sees: - Large heading "Your AI Team is Working Their Magic!" - 4-stage workflow progress bar (Intake → Credit → Income → Risk) - Empty message area below workflow

User Thought: "Okay, here we go! I wonder how long this takes..."

Step 2: First Message Appears (0s)

System Response: Cap-ital America message card appears User Emotion: 😊 Reassured

What User Sees: 

┌────────────────────────────────────────┐
│ 🦸‍♂️ Cap-ital America                    │
│ Application received and validated.    │
│ All required information is present.   │
│ Passing to specialized agents...       │
└────────────────────────────────────────┘

User Thought: "Good, they got my application. What happens next?"

Pain Point: ❌ User doesn't know if this is done or still processing

Step 3: Second Message Appears (2s)

System Response: Sarah's message card appears BELOW Cap-ital America's User Emotion: 😐 Slightly confused

What User Sees: 

┌────────────────────────────────────────┐
│ 🦸‍♂️ Cap-ital America                    │
│ Application received and validated...  │
└────────────────────────────────────────┘

┌────────────────────────────────────────┐
│ 🦸‍♀️ Sarah (Credit Analyst)              │
│ Credit profile looks strong!           │
│ Good payment history detected.         │
└────────────────────────────────────────┘

User Thought: "Wait, do I need to keep reading the first message? Is Sarah done or still working?"

Pain Point: ❌ User confused about which message to focus on

Step 4: Third Message Appears (4s)

System Response: Marcus's message card appears, pushing others up User Emotion: 😕 Confused and overwhelmed

What User Sees (on mobile - requires scrolling): 

[Scroll up to see]
┌────────────────────────────────────────┐
│ 🦸‍♂️ Cap-ital America                    │
│ Application received and validated...  │
└────────────────────────────────────────┘

┌────────────────────────────────────────┐
│ 🦸‍♀️ Sarah (Credit Analyst)              │
│ Credit profile looks strong!           │
└────────────────────────────────────────┘

┌────────────────────────────────────────┐ ← Visible on screen
│ 🦸 Marcus (Income Verifier)             │
│ Income verified successfully.          │
│ Debt-to-income ratio is healthy.       │
└────────────────────────────────────────┘

User Thought: "There are three messages now? Should I scroll up to read them all? I'm losing track..."

Pain Point: ❌ Visual clutter causes confusion and anxiety

Step 5: Fourth Message Appears (6s)

System Response: Alex's message appears, all 4 cards now visible User Emotion: 😫 Overwhelmed

What User Sees (mobile - definitely requires scrolling): 

[Scroll up to see first 2 messages]

┌────────────────────────────────────────┐
│ 🦸 Marcus (Income Verifier)             │
│ Income verified successfully...        │
└────────────────────────────────────────┘

┌────────────────────────────────────────┐ ← Visible
│ 🦹‍♂️ Alex (Risk Assessor)                │
│ Overall risk assessment complete.      │
│ All metrics within acceptable params.  │
│ Recommendation: APPROVED!              │
└────────────────────────────────────────┘

[View Your Results] Button appears

User Thought: "Finally done! But wait, do I need to review all those messages? Let me click 'View Results'..."

Drop-off Risk: ⚠️ User might miss important information buried in earlier messages

Future State Journey (AFTER Redesign)

Step 1: Application Submission (0s)

User Action: Clicks "Submit Application" button System Response: Page transitions to "Processing Your Application" User Emotion: 😊 Excited, expectant

What User Sees: Same as before - no change to initial state

Step 2: Processing Starts (0s)

System Response: Single message container appears with Cap-ital America User Emotion: 😊 Focused and reassured

What User Sees: 

┌────────────────────────────────────────┐
│ 🦸‍♂️ Cap-ital America                    │
│ ✅ Application validated!               │
│ All information looks great.           │
└────────────────────────────────────────┘

User Thought: "Great! Cap-ital America finished checking my application."

Improvement: ✅ Clear checkmark shows completion Improvement: ✅ Single focus point - no distraction

Step 3: Handoff Message (0.5s)

System Response: Message updates IN PLACE (same container) User Emotion: 😊 Informed about next step

What User Sees: 

┌────────────────────────────────────────┐
│ 🤝 Cap-ital America                     │
│ Handing over to Sarah for credit       │
│ analysis...                            │
└────────────────────────────────────────┘

User Thought: "Oh, Sarah is next. They're working together on this."

Improvement: ✅ Explicit handoff explains workflow progression Improvement: ✅ No new cards - just updated content

Step 4: Credit Analysis Starts (1s)

System Response: Message fades out, new message fades in User Emotion: 😊 Engaged by smooth transition

What User Sees (with smooth fade transition): 

[Fade out] 🤝 Handing over to Sarah...

[Fade in]
┌────────────────────────────────────────┐
│ 🦸‍♀️ Sarah (Credit Analyst)              │
│ Sarah is analyzing your credit         │
│ profile... • • •                       │
└────────────────────────────────────────┘

User Thought: "Sarah is working on it now. I can see the animated dots showing she's processing."

Improvement: ✅ Processing dots show active work Improvement: ✅ Smooth animation feels professional Improvement: ✅ Same container location - no scrolling

Step 5: Credit Analysis Complete (2s)

System Response: Message updates to show completion User Emotion: 😊 Reassured by positive result

What User Sees: 

┌────────────────────────────────────────┐
│ 🦸‍♀️ Sarah (Credit Analyst)              │
│ ✅ Credit profile looks strong!         │
│ Good payment history detected.         │
└────────────────────────────────────────┘

User Thought: "My credit looks good! That's a relief."

Improvement: ✅ Instant update - no stacking Improvement: ✅ Checkmark confirms completion

Step 6: Handoff to Marcus (2.5s)

System Response: Handoff message appears User Emotion: 😊 Understanding workflow progression

What User Sees: 

┌────────────────────────────────────────┐
│ 🤝 Sarah (Credit Analyst)               │
│ Handing over to Marcus for income      │
│ verification...                        │
└────────────────────────────────────────┘

User Thought: "Marcus is next. This is moving along smoothly."

Improvement: ✅ Clear explanation of what's happening next

Step 7: Income Verification (3s - 4s)

System Response: Fade transition → Processing → Complete User Emotion: 😊 Confident in the process

What User Sees (sequence): 

[Fade transition]

┌────────────────────────────────────────┐
│ 🦸 Marcus (Income Verifier)             │
│ Marcus is verifying your income and    │
│ employment... • • •                    │
└────────────────────────────────────────┘

[After 1 second]

┌────────────────────────────────────────┐
│ 🦸 Marcus (Income Verifier)             │
│ ✅ Income verified!                     │
│ Debt-to-income ratio is healthy.       │
└────────────────────────────────────────┘

User Thought: "Two down, income verified. This is going well!"

Improvement: ✅ Consistent pattern builds trust Improvement: ✅ User knows what to expect

Step 8: Final Risk Assessment (5s - 6s)

System Response: Handoff → Processing → Final approval User Emotion: 😁 Excited about final result

What User Sees (sequence): 

[Handoff]
┌────────────────────────────────────────┐
│ 🤝 Marcus (Income Verifier)             │
│ Handing over to Alex for risk          │
│ assessment...                          │
└────────────────────────────────────────┘

[Processing]
┌────────────────────────────────────────┐
│ 🦹‍♂️ Alex (Risk Assessor)                │
│ Alex is performing final risk          │
│ assessment... • • •                    │
└────────────────────────────────────────┘

[Final Result]
┌────────────────────────────────────────┐
│ 🦹‍♂️ Alex (Risk Assessor)                │
│ ✅ Risk assessment complete!            │
│ All metrics look excellent.            │
│ 🎉 Your application has been APPROVED! │
└────────────────────────────────────────┘

User Thought: "YES! I got approved! That was so smooth and easy to follow."

Improvement: ✅ Celebration emoji adds emotional payoff Improvement: ✅ Clear final status Improvement: ✅ No scrolling needed to see result

Emotional Journey Comparison

Current Design (Stacked Messages)

😊 Excited → 😐 Confused → 😕 Overwhelmed → 😫 Anxious → 😐 Relieved
   (0s)        (2s)         (4s)           (6s)       (result)

Anxiety Peak: When 3rd and 4th messages appear and user has to scroll

Proposed Design (Single Message)

😊 Excited → 😊 Engaged → 😊 Confident → 😊 Trusting → 😁 Delighted
   (0s)        (2s)        (4s)          (6s)         (result)

Trust Build: Consistent pattern and smooth transitions build confidence

Key Improvements Summary

Reduced Cognitive Load

Before: User must track 4 separate messages, unclear which is current After: User focuses on 1 message that updates in real-time

Clear Workflow Understanding

Before: Abrupt jumps between agents, no explanation After: Explicit "handing over" messages explain transitions

Better Mobile Experience

Before: Requires scrolling, messages push content down After: Single container stays in same position, no scrolling

Professional Polish

Before: Cards popping in feels disconnected After: Smooth fades create cohesive, premium experience

Accessibility Benefits

Before: Screen reader announces 4 separate messages in quick succession After: Screen reader announces clear sequence with handoff context

Success Metrics

User Comprehension

  • Target: 95% of users understand which agent is currently working
  • Measurement: Post-processing survey "Did you understand which agent was processing your application at each step?"

User Satisfaction

  • Target: 4.5/5 rating on "How clear was the processing workflow?"
  • Measurement: In-app rating after viewing results

Mobile Engagement

  • Target: 0% scroll requirement during processing
  • Measurement: Analytics tracking scroll events during processing step

Accessibility

  • Target: 100% WCAG AA compliance
  • Measurement: Automated accessibility audit + manual screen reader testing

Performance

  • Target: No frame drops during transitions (<16ms per frame)
  • Measurement: Chrome DevTools Performance profiling

User Testing Plan

Moderated Testing (5 users)

  1. Watch users go through processing workflow
  2. Ask comprehension questions:
  3. "Which agent just finished working?"
  4. "What's happening now?"
  5. "Do you feel informed about the process?"
  6. Collect emotional feedback:
  7. "How did you feel waiting for your results?"
  8. "Was anything confusing or frustrating?"

A/B Testing (Production)

  • Group A: Current stacked message design
  • Group B: New single message design
  • Metrics: Time to "View Results" click, user satisfaction rating, abandonment rate

Accessibility Testing

  • Screen reader testing (NVDA, JAWS, VoiceOver)
  • Keyboard navigation validation
  • Color contrast verification
  • Reduced motion preference testing

Implementation Priority

P0 (Must Have)

  • Single message container design
  • Fade transitions between messages
  • Handoff messaging between agents
  • ARIA live region for screen readers
  • Responsive mobile layout

P1 (Should Have)

  • Processing indicator (animated dots)
  • Reduced motion support
  • Dark mode compatibility
  • Enhanced animation polish

P2 (Nice to Have)

  • Sound effects for transitions (optional, muted by default)
  • Haptic feedback on mobile (subtle vibration on completions)
  • Agent avatar images instead of emoji icons

Risks & Mitigations

Risk 1: Users Miss Information

Concern: Single message means previous agent messages disappear Mitigation: - Keep completion message visible for 500ms before transition - Final message includes overall approval status - Full audit trail available in results page

Risk 2: Timing Feels Too Fast/Slow

Concern: 6-second workflow might feel rushed or dragged Mitigation: - Configurable timing constants for easy adjustment - A/B test different timing patterns - Collect user feedback on pacing

Risk 3: Animation Jank on Older Devices

Concern: CSS transitions might stutter on low-end phones Mitigation: - Use GPU-accelerated properties (transform, opacity) - Test on iPhone SE, older Android devices - Fallback to instant updates if prefers-reduced-motion

Risk 4: Screen Reader Overload

Concern: Too many rapid updates might overwhelm screen reader users Mitigation: - Use aria-live="polite" (not "assertive") - Announce full message context each time - Test with actual screen reader users

Next Steps

  1. Share with Product Manager Agent: Validate business goals alignment
  2. Share with Responsible AI Agent: Comprehensive accessibility review
  3. Create Implementation Ticket: Detailed engineering requirements
  4. Schedule User Testing: Recruit 5 users for moderated testing
  5. Set Up A/B Test: Configure split testing infrastructure
  • UX Design Specification: /workspaces/loan-defenders/docs/ux/processing-workflow-single-message-design.md
  • Current Implementation: /workspaces/loan-defenders/loan_defenders/ui/src/pages/application/ApplicationPage.tsx
  • User Journey Template: /workspaces/loan-defenders/docs/templates/user-journey-template.md

Approval Status

UX Designer: ✅ Approved - User journey validated Product Manager: ⏳ Pending review Responsible AI: ⏳ Pending accessibility audit Engineering: ⏳ Pending implementation feasibility review