Crypto Wallet UX/UI Design Development
Crypto wallet design is a specialized discipline at the intersection of fintech UX and Web3. Users simultaneously fear losing money due to error and want to perform operations quickly. Good design reduces cognitive load, prevents costly mistakes, and builds trust.
Key UX Patterns
Addresses and Their Display
Ethereum address — 42 hex characters. User doesn't read them, they compare first 4 and last 4 characters. Design should account for this:
- Always show checksum address (EIP-55 mixed case) — reduces typosquatting risk
- Visual blockie/jazzicon next to address — quick identification
- Copy button with feedback (checkmark for 2 seconds)
- When displaying in text —
0x1234...5678format (never truncate at beginning) - QR-code for receive address — mandatory
Address book. Users often send to same addresses. Saved contacts with names and avatars dramatically reduce errors. Verify address when adding (suggest sending test transaction with small amount).
Transaction Confirmation
Confirmation screen is the most critical in wallet. User must understand what's happening without knowing technical details:
- Recipient: name from address book or ENS, or address with verification icon
- Amount: in tokens AND in USD (updates in real time)
- Gas fee: in USD, not in gwei. "Fee: $2.40" instead of "Gas: 21000 @ 85 gwei"
- Total: amount + fee
- Confirmation time: "~15 seconds" or "~5 minutes" (based on gas price)
- Warning for contract transactions: explanation of what the call does
⚠️ Contract Interaction
Contract: Uniswap V3 Router (verified ✓)
Action: Swap 1 ETH → USDC
Min received: 3,412 USDC
Slippage: 0.5%
Fee: $3.20
Gas and Fee Management
Most users don't understand gas. Three modes:
- Slow (base price): cheap, slow
- Normal (recommended): good balance
- Fast (priority): fast inclusion in block
For experienced users — custom mode with maxFeePerGas and maxPriorityFeePerGas fields.
Gas estimation should happen automatically and update every 10-15 seconds. Show user if price has risen sharply between form opening and sending.
Onboarding and Wallet Creation
Seed phrase creation is most stressful moment for newcomers. Patterns reducing anxiety:
- Explain before showing. "We'll show you 12 words. This is your main key. Write them in correct order."
- Show one by one or by 4. Not all 12 at once — it overwhelms.
- Test after writing. Ask to enter several words in random order — confirms user wrote them.
- Explain what NOT to do. Don't screenshot, don't store in notes, don't send to anyone.
For wallets with embedded wallet (no seed phrase) — onboarding is radically simpler: email/Google → done.
Tokens and Balances
Main balance screen:
- Total balance in USD prominently
- List of tokens with icons, names, balances in tokens and USD
- Change in 24h (% and absolute value) — with color (green/red)
- Hide tokens with zero balance (or small, below threshold)
- Spam tokens: tokens not requested — hide by default
NFT tab:
- Grid view with image previews
- No image = show placeholder, not broken image icon
- Lazy loading for collections with many tokens
Mobile Design
50-70% of wallet users are on mobile. Specifics:
- All interactive elements minimum 44x44pt (Apple HIG) / 48x48dp (Material)
- Thumb zone: main actions in lower screen area
- Bottom sheet instead of modal windows
- Haptic feedback for critical actions (sending transaction)
- Face ID / Touch ID for authentication instead of PIN
Accessibility
- Color contrast: minimum 4.5:1 for normal text (WCAG AA)
- Don't use only color as signal (red/green for P&L should have -/+ symbol too)
- Screen reader compatibility for key flows
- Font size: support system scaling
Design System
Wallet requires consistent design system with tokens:
| Element | Value |
|---|---|
| Spacing | 4px grid |
| Radius | 8px standard, 16px cards |
| Font | Inter or SF Pro (system) |
| Colors | Primary, Destructive, Warning, Success + neutrals |
| Shadows | Minimal (flat design better for fintech) |
Components: AddressInput (with validation + ENS resolution), TokenAmount (with conversion), TransactionItem (history), NetworkBadge (icon + name).
Typical wallet UX/UI design timeline — 3-5 weeks. Includes: research (2-3 competitors, user flow mapping), wireframes, high-detail mockups in Figma, prototype for user testing, handoff to development with design tokens.