Currency inputs with live exchange rate and fee breakdown
D
DimeHop
Send MoneyDashboard
How much do you want to send?
Choose the amount and currencies for your transfer.
You send
🇺🇸USD▾$200.00
↕
They receive (gift card value)
🇱🇨XCD▾EC$540.00
Exchange Rate1 USD = 2.70 XCD
You send$200.00
Delivery fee$2.99
Total cost$202.99
Recipient getsEC$540.00
Continue
Currencies: Send: USD, GBP, EUR, CAD, AUD. Receive: XCD, PHP, NGN, KES, GHS, INR. The rate breakdown updates live. "Recipient gets" is highlighted in green to anchor the value proposition.
3
Step 2 — Recipient Details
Name, phone number with country picker, optional email
D
DimeHop
Send MoneyDashboard
Who are you sending to?
Enter the recipient's details. They will receive an SMS with their gift card.
Maria Joseph
🇱🇨+1758▾
555-1234
maria@example.com
Continue
Country picker: Dial codes include 🇱🇨 +1758, 🇵🇭 +63, 🇳🇬 +234, 🇰🇪 +254, 🇬🇭 +233, 🇮🇳 +91, 🇲🇽 +52, 🇨🇴 +57. Phone is validated to 7-12 digits. Name requires min 2 characters.
4
Step 3 — Review Transfer
Summary card, fee breakdown, recipient info, proceed to payment
D
DimeHop
Send MoneyDashboard
Review your transfer
Please confirm all the details are correct before proceeding to payment.
You send
$200.00
→
Recipient gets
EC$540.00
as a digital gift card
Fee Breakdown
Transfer amount$200.00
Delivery fee$2.99
Exchange rate1 USD = 2.70 XCD
Total you pay$202.99
Recipient
NameMaria Joseph
Phone+1758 555-1234
Emailmaria@example.com
Back
Proceed to Payment
Summary card: Blue background highlights the send→receive conversion. "as a digital gift card" reinforces the product model. Total is bold and prominent. Back button lets users edit.
5
Step 4 — Payment
Stripe card form, order summary sidebar, security notice
D
DimeHop
Send MoneyDashboard
Checkout
Complete your payment to send $200.00 to Maria Joseph.
Send amount$200.00
Fee$2.99
Total$202.99
Card Details
💳Card numberMM/YY CVC
🔒 Secured by Stripe. Your card details are encrypted.
Pay $202.99
Payment: Stripe CardElement handles PCI compliance. If not authenticated, user sees sign-in options first (Login / Create Account / Continue as Guest). Button shows exact charge amount. Loading spinner replaces text during processing.
Your transfer has been initiated. The recipient will receive an SMS with their gift card shortly.
Amount Sent$200.00 USD
Recipient GetsEC$540.00 XCD
RecipientMaria Joseph
Phone+1758 555-1234
Tracking IDDH-A1B2C3
📱Your recipient will receive an SMS with their digital gift card at +1758 555-1234. They can use it at participating local merchants.
Send Another
View Dashboard
Confirmation: Green checkmark anchors success. Tracking ID format is DH-XXXXXX (monospace pill). Yellow SMS notice sets expectations for the recipient. Two CTAs: Send Another (primary) and View Dashboard (secondary).
Recipient Mobile Flow Mobile
The recipient opens the DimeHop mobile app, verifies their phone, sets a PIN, and can view/redeem gift cards at local merchants. Ten screens covering both redemption paths.
7
Welcome / Onboarding
Logo, feature highlights, "Get Started" CTA
9:41●●●● 📶 🔋
🎁
DimeHop
Welcome to DimeHop
Your gift cards, one tap away. Receive, manage, and redeem gift cards sent by your loved ones abroad.
🛡
Secure
⚡
Instant
🏪
Local stores
Get Started →
Onboarding: Blue-to-purple gradient card illustrations suggest gift cards. Three feature icons (Secure, Instant, Local stores) address recipient concerns. Single CTA "Get Started →" begins verification flow.
8
Phone Verification
Phone number input with country selector, then 6-digit OTP entry
9:41●●●● 📶 🔋
📞
Enter your phone number
We'll send you a verification code to confirm your identity.
🇱🇨Saint Lucia+1758▾
+1758
555-1234
Send Verification Code
9:42●●●● 📶 🔋
💬
Enter verification code
We sent a 6-digit code to +1758 555-1234
4
7
2
_
Didn't receive the code? Resend
Change phone number
Two states shown: Left — phone input with country selector (15 countries supported). Right — OTP entry with 6 boxes that fill and highlight blue. Auto-submits when all 6 digits entered. Resend and change-number links below.
9
Set PIN
Create + confirm a 4-digit PIN with numeric keypad
9:42●●●● 📶 🔋
Create a 4-digit PIN
This PIN protects your gift cards and is needed for transactions.
1
2
3
4
5
6
7
8
9
0
⌫
PIN flow: Two steps — "Create a 4-digit PIN" then "Confirm your PIN". Four dots fill as digits are entered. Circular numpad keys with haptic feedback. Shake animation on mismatch. PIN is required to view gift card details later.
10
Wallet Home
Balance header with gradient, gift card tiles list
9:43●●●● 📶 🔋
👛
Total Balance
EC$540.00
Across all active gift cards
Your Gift Cards
1 card
Active
XCD
Balance
EC$540.00
💳 **** 1234Exp Mar 2027
🎁 From John Smith
Pull down to refresh
Wallet: Blue gradient header shows total balance across all cards. Gift card tiles use blue-to-purple gradient with status badges (Active/Depleted/Expired/Pending). Masked card number (**** 1234), expiry, and sender name. Pull-to-refresh.
11
Gift Card Detail — PIN Gate
Enter PIN to unlock and view full card details
9:43●●●● 📶 🔋
🔒
Enter your PIN
Verify your identity to view this gift card
1
2
3
4
5
6
7
8
9
0
⌫
PIN gate: Every time a user taps a gift card from the wallet, they must re-enter their 4-digit PIN. This protects card details (full number, PIN, barcode). Lock icon reinforces security. Wrong PIN triggers shake animation.
12
Choose Redemption Method
"Use at Vendor" (primary) vs "Show Barcode" (secondary)
9:44●●●● 📶 🔋
EC$540.00
Available Balance
How would you like to redeem?
⌨
Use at Vendor
Select a vendor and get a one-time code
→
▦
Show Barcode Instead
Display QR code for merchant to scan
→
Card Details
Card Number1234 5678 9012 3456
StatusActive
FromJohn Smith
Redemption choice: Primary path (blue card) = "Use at Vendor" — generates a one-time code. Secondary path (outline) = "Show Barcode" — displays QR + card PIN for direct merchant scanning. Full card number visible after PIN gate.
ALT PATH — "Show Barcode Instead"
12b
Barcode Display Alt path
QR code, full card number, PIN, and scan instructions for merchant
9:44●●●● 📶 🔋
Gift Card Barcode
⛶ Full-Screen Barcode
Card Number
1234 5678 9012 3456
PIN
7 2 4 1
📱 Show this to the merchant to scan
Tip: Increase your screen brightness for easier scanning
Barcode path: Alternative to the vendor code flow. QR contains {"v":1, "t":"dimehop_gc", "id":"<uuid>", "cn":"<16-digits>"}. Full card number and 4-digit PIN shown in large monospace text. Merchant scans QR or manually enters the number. "Full-Screen Barcode" button maximizes for easy scanning.
PRIMARY PATH — "Use at Vendor"
13
Vendor Select
Search bar, category chips, vendor list with icons
9:44●●●● 📶 🔋
Select a Vendor
🔍Search vendors...
All
🛒 Grocery
💊 Pharmacy
🍽 Restaurant
⛽ Gas
🛒
MegaMart
Grocery
›
💊
Island Pharmacy
Pharmacy
›
🍽
Spice Island Grill
Restaurant
›
⛽
Sol Gas Station
Gas Station
›
🏪
J.Q. Charles
General Store
›
Vendor list: Search bar filters by name. Category chips (All, Grocery, Pharmacy, Restaurant, Gas) filter the list. Each vendor shows emoji icon, name, category, and chevron. Tapping a vendor proceeds to amount entry.
Amount entry: Shows selected vendor at top. Large amount display with currency symbol. Available balance and remaining-after preview update live. Decimal key replaces empty spot. "Generate Code" creates a one-time redemption code.
15
Code Display
Large 6-digit one-time code, countdown timer, merchant instructions
9:45●●●● 📶 🔋
✓
Your Redemption Code
Show this code to the cashier at MegaMart
7
4
2
9
1
5
⏱ Expires in 04:32
AmountEC$75.00
VendorMegaMart
Code742915
📱 Instructions
1. Show this code to the cashier 2. They will enter it at the register 3. Your gift card balance will be deducted
Done
Redemption code: Large 6-digit code in blue boxes is easy to read aloud. Red countdown timer shows expiry (5 minutes). Summary card confirms amount/vendor/code. Blue instruction box guides the recipient through the in-store process.
DimeHop Product Storybook · 16 screens · Sender Web + Recipient Mobile