Customer Experience Design

Minimal steps:

1. Select payment method → "Pay with XRP"
2. Display payment details → Address, amount, QR code
3. Customer sends payment → From their wallet
4. Confirmation → Order confirmed

Maximum steps: 4. Every additional step loses customers.

Bad: Hidden option

Payment Methods:
☑ Credit Card
☐ PayPal
☐ Apple Pay
☐ Other payment options... [click to expand]
    └─ XRP, Bitcoin, etc.

Good: Visible but not dominant

Payment Methods:
☐ Credit Card
☐ PayPal  
☐ Apple Pay
☐ Cryptocurrency (XRP, Bitcoin, +5 more)

Best: Equal prominence with visual appeal

Payment Methods:
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│  💳 Card    │ │  🅿️ PayPal  │ │  📱 Apple   │
└─────────────┘ └─────────────┘ │     Pay     │
                                └─────────────┘
┌─────────────┐ ┌─────────────┐
│  ₿ Bitcoin  │ │  ✕ XRP      │  ← Crypto with
└─────────────┘ └─────────────┘    recognizable logos

Example layout:

┌────────────────────────────────────────────┐
│  Pay 40.50 XRP                             │
│  (≈ $100.00 USD)                           │
│                                            │
│  ┌────────────────────────────────────┐   │
│  │          [QR CODE]                 │   │
│  │   Scan with your XRP wallet        │   │
│  └────────────────────────────────────┘   │
│                                            │
│  Or send manually:                         │
│                                            │
│  Address:                                  │
│  ┌────────────────────────────────────┐   │
│  │ rMerchantAddre...7bXjH4k  [📋 Copy]│   │
│  └────────────────────────────────────┘   │
│                                            │
│  Destination Tag: (Required!)              │
│  ┌────────────────────────────────────┐   │
│  │ 1234567890             [📋 Copy]   │   │
│  └────────────────────────────────────┘   │
│  ⚠️ Must include tag or payment may be    │
│     lost                                   │
│                                            │
│  ⏱️ Rate locked for 14:32                  │
│                                            │
│  [    I've Sent the Payment    ]           │
│                                            │
│  ← Back to payment options                 │
└────────────────────────────────────────────┘

While waiting for payment:

┌────────────────────────────────────────────┐
│  ⏳ Waiting for your payment...            │
│                                            │
│  Looking for 40.50 XRP to:                 │
│  rMerchant...7bXjH4k (tag: 1234567890)     │
│                                            │
│  [████████████░░░░░░░░░]                   │
│  Checking blockchain...                    │
│                                            │
│  This usually takes 3-5 seconds once       │
│  your wallet confirms the transaction.     │
│                                            │
│  Having trouble? [Contact Support]         │
└────────────────────────────────────────────┘

Upon confirmation:

┌────────────────────────────────────────────┐
│  ✅ Payment Confirmed!                     │
│                                            │
│  We received 40.50 XRP                     │
│  Transaction: ABC123...DEF456              │
│                                            │
│  Order #12345 is now processing.           │
│                                            │
│  [View Order Details]                      │
│  [Continue Shopping]                       │
└────────────────────────────────────────────┘

---

Critical fact: Most crypto wallets are mobile apps.

Even desktop shoppers often pay via mobile wallet.

Responsive layout:

/* Mobile-first payment screen */
.payment-details {
  padding: 16px;
  max-width: 100%;
}

.qr-code {
width: 80%;
max-width: 300px;
margin: 0 auto;
}

.copy-button {
min-height: 44px;
padding: 12px 20px;
font-size: 16px; /* Prevents iOS zoom */
}

.address-field {
font-size: 14px;
word-break: break-all; /* Handle long addresses */
}
```

Enable one-tap payment with XRP payment URIs:

// Generate XRP payment URI
function generatePaymentURI(address, amount, tag) {
  const params = new URLSearchParams({
    amount: amount,
    dt: tag  // destination tag
  });
  return `xrp:${address}?${params.toString()}`;
}

// Example: xrp:rMerchant...?amount=40.5&dt=1234567890

Button implementation:

<a href="xrp:rMerchant...?amount=40.5&dt=1234567890" 
   class="wallet-button">
  Open in XRP Wallet
</a>

• Xaman (XUMM): ✅ Full support
• Trust Wallet: ✅ Partial support
• Ledger Live: ❌ (desktop focused)

Scenario: Customer on desktop needs to pay with mobile wallet.

Solution 2: Email/SMS Link

Can't scan? Send payment link to your phone:
[[email protected]] [Send Link]

Solution 3: "Continue on Mobile"

For easier payment, continue on your phone:
[📱 Text me a link]

---

Common concerns and solutions:

Concern	Solution
"What if I send to wrong address?"	Display address prominently with verification
"What if I forget the tag?"	Prominent warning + tag included in QR
"What if price changes?"	Show locked rate and countdown
"What if it doesn't arrive?"	Real-time status + support contact
"Is this secure?"	Trust badges, HTTPS, clear company info

Add helpful explanations without cluttering:

<label>
  Destination Tag 
  <span class="tooltip" title="A unique number that identifies your order. 
    Required to credit your payment correctly.">ⓘ</span>
</label>

First-time crypto payer guidance:

┌────────────────────────────────────────────┐
│  💡 New to XRP payments?                   │
│                                            │
│  1. Open your XRP wallet app               │
│  2. Scan the QR code (or paste address)    │
│  3. Make sure to include the tag!          │
│  4. Confirm the transaction                │
│                                            │
│  Payment typically confirms in 3-5 seconds │
│                                            │
│  [Got it, show payment details]            │
└────────────────────────────────────────────┘

Display credibility indicators:

✓ Secure checkout (HTTPS)
✓ Payments processed by [Gateway Name]
✓ [X] customers paid with crypto this month

Gateway badges (if applicable):

Powered by: [NOWPayments Logo] | [Verified Merchant Badge]

Show exactly what customer pays and receives:

Your Order:                    $100.00
──────────────────────────────────────
Pay with XRP:                  40.50 XRP
Rate: 1 XRP = $2.469 (locked 15 min)

No additional fees for crypto payment ✓

If there are crypto-specific fees, disclose them:

Subtotal:                      $100.00
Crypto payment discount:       -$2.00  ← Or premium, be honest
Total:                         $98.00
Pay:                           39.69 XRP

---

When timer expires:

┌────────────────────────────────────────────┐
│  ⚠️ Rate has expired                       │
│                                            │
│  The XRP/USD rate has been updated.        │
│                                            │
│  Previous: 40.50 XRP ($2.469)              │
│  New rate: 41.25 XRP ($2.424)              │
│                                            │
│  [Accept New Rate]  [Cancel Payment]       │
└────────────────────────────────────────────┘

┌────────────────────────────────────────────┐
│  ⚠️ Partial payment received               │
│                                            │
│  Expected: 40.50 XRP                       │
│  Received: 35.00 XRP                       │
│  Remaining: 5.50 XRP                       │
│                                            │
│  Please send the remaining amount to       │
│  complete your order.                      │
│                                            │
│  Same address: rMerchant...                │
│  Same tag: 1234567890                      │
│                                            │
│  [I've sent the rest]  [Contact Support]   │
└────────────────────────────────────────────┘

┌────────────────────────────────────────────┐
│  ✅ Payment Received (Overpayment)         │
│                                            │
│  Expected: 40.50 XRP                       │
│  Received: 45.00 XRP                       │
│  Excess: 4.50 XRP ($11.11)                 │
│                                            │
│  Your order is confirmed!                  │
│                                            │
│  We'll credit the $11.11 excess to your    │
│  store account, or contact support for     │
│  an XRP refund.                            │
│                                            │
│  [View Order]  [Request Refund]            │
└────────────────────────────────────────────┘

┌────────────────────────────────────────────┐
│  🔍 Payment not yet detected               │
│                                            │
│  We're still looking for your payment.     │
│  This can happen if:                       │
│                                            │
│  • Transaction is still processing         │
│  • Wrong destination tag was used          │
│  • Payment was sent to different address   │
│                                            │
│  If you've sent the payment, please wait   │
│  a moment and we'll detect it shortly.     │
│                                            │
│  [Check Again]                             │
│                                            │
│  Still having trouble?                     │
│  [Contact Support with your TX hash]       │
└────────────────────────────────────────────┘

---

Common abandonment points and fixes:

Abandonment Point	Cause	Fix
Payment method selection	Crypto option unclear	Better visibility, logos
Address display	Intimidating address format	QR code emphasis, copy buttons
Destination tag	Confusion about requirement	Clear explanation, auto-include in QR
Waiting for confirmation	Uncertainty	Progress indicator, status updates
Rate expiration	Took too long	Clear countdown, easy renewal

Discount approach:

Pay with cryptocurrency and save 2%!
Card: $100.00
XRP:  $98.00 (40.00 XRP)

Cashback approach:

Pay with XRP and earn 3% back in store credit!

Exclusive access:

Pay with crypto for early access to new products!

---

✅ Mobile-first matters. Crypto wallet users primarily use mobile apps. QR codes are essential.

✅ Simplicity wins. Every additional step or piece of confusion reduces completion rates.

✅ Clear communication builds trust. Explaining the process reduces fear and abandonment.

⚠️ Optimal incentive levels. How much discount is needed to change behavior is highly variable.

⚠️ Customer education effectiveness. Some customers will never feel comfortable regardless of UX quality.

⚠️ Long-term adoption trends. As crypto becomes more familiar, UX requirements may change.

Great UX won't make crypto payments mainstream—but bad UX will definitely prevent adoption. The goal is removing barriers for customers who already want to pay with crypto. Focus on simplicity, clarity, and trust. Make the XRP payment option as easy as possible, and the customers who want to use it will.

---

Assignment: Design a complete crypto checkout experience for an e-commerce store.

Requirements:

• Payment method selection screen

• XRP payment details screen

• Payment waiting/confirmation screen

• Error states (expired rate, underpayment, payment not found)

• Payment option labels and descriptions

• Instructions and tooltips

• Error messages and recovery guidance

• Confirmation messages

• QR code specifications

• Touch target sizes

• Deep linking implementation

• Cross-device payment flow

• Rate lock expiration

• Underpayment handling

• Overpayment handling

• Payment not detected

• At least 3 elements to test

• Hypothesis for each

• Metrics to measure

• Success criteria

• Wireframe quality and completeness (25%)

• Copy clarity and helpfulness (25%)

• Mobile optimization (20%)

• Edge case handling (15%)

• Testing plan (15%)

Time investment: 4-5 hours
Deliverable format: Design file (Figma, Sketch, or similar) + documentation

---

For Next Lesson:
Lesson 12 covers Marketing Crypto Payment Acceptance—how to promote your XRP payment option and reach crypto-holding customers.

---

End of Lesson 11

Total words: ~4,600
Estimated completion time: 45 minutes reading + 4-5 hours for deliverable