-
@ DeSign_r
2025-03-29 18:02:16This UX research has been redacted by @iqra from the Bitcoin.Design community, and shared for review and feedback! Don't be shy, share your thoughts.
1️⃣ Introduction
Project Overview
📌 Product: BlueWallet (Bitcoin Wallet) 📌 Goal: Improve onboarding flow and enhance accessibility for a better user experience. 📌 Role: UX Designer 📌 Tools Used: Figma, Notion
Why This Case Study?
🔹 BlueWallet is a self-custodial Bitcoin wallet, but users struggle with onboarding due to unclear instructions. 🔹 Accessibility issues (low contrast, small fonts) create barriers for visually impaired users. 🔹 Competitors like Trust Wallet and MetaMask offer better-guided onboarding.
This case study presents UX/UI improvements to make BlueWallet more intuitive and inclusive.
2️⃣ Problem Statement: Why BlueWalletʼs Onboarding Needs Improvement
🔹 Current Challenges:
1️⃣ Onboarding Complexity - BlueWallet lacks step-by-step guidance, leaving users confused about wallet creation and security.
2️⃣ No Educational Introduction - Users land directly on the wallet screen with no explanation of private keys, recovery phrases, or transactions. 3️⃣ Transaction Flow Issues - Similar-looking "Send" and "Receive" buttons cause confusion. 4️⃣ Poor Accessibility - Small fonts and low contrast make navigation difficult.
🔍 Impact on Users:
Higher drop-off rates due to frustration during onboarding. Security risks as users skip key wallet setup steps. Limited accessibility for users with visual impairments.
📌 Competitive Gap:
Unlike competitors (Trust Wallet, MetaMask), BlueWallet does not offer: ✅ A guided onboarding process ✅ Security education during setup ✅ Intuitive transaction flow
Somehow, this wallet has much better UI than the BlueWallet Bitcoin wallet.
3️⃣ User Research & Competitive Analysis
User Testing Findings
🔹 Conducted usability testing with 5 users onboarding for the first time. 🔹 Key Findings: ✅ 3 out of 5 users felt lost due to missing explanations. ✅ 60% had trouble distinguishing transaction buttons. ✅ 80% found the text difficult to read due to low contrast.
Competitive Analysis
We compared BlueWallet with top crypto wallets:
| Wallet | Onboarding UX | Security Guidance | Accessibility Features | |---|---|---|---| | BlueWallet | ❌ No guided onboarding | ❌ Minimal explanation | ❌ Low contrast, small fonts | | Trust Wallet | ✅ Step-by-step setup | ✅ Security best practices | ✅ High contrast UI | | MetaMask | ✅ Interactive tutorial | ✅ Private key education | ✅ Clear transaction buttons |
📌 Key Insight: BlueWallet lacks guided setup and accessibility enhancements, making it harder for beginners.
📌 User Persona
To better understand the users facing onboarding challenges, I developed a persona based on research and usability testing.
🔹 Persona 1: Alex Carter (Bitcoin Beginner & Investor)
👤 Profile: - Age: 28 - Occupation: Freelance Digital Marketer - Tech Knowledge: Moderate - Familiar with online transactions, new to Bitcoin) - Pain Points: - Finds Bitcoin wallets confusing. - - Doesnʼt understand seed phrases & security features. - - Worried about losing funds due to a lack of clarity in transactions.
📌 Needs: ✅ A simple, guided wallet setup. ✅ Clear explanations of security terms (without jargon). ✅ Easy-to-locate Send/Receive buttons.
📌 Persona Usage in Case Study: - Helps define who we are designing for. - Guides design decisions by focusing on user needs.
🔹 Persona 2: Sarah Mitchell (Accessibility Advocate & Tech Enthusiast)
👤 Profile: - Age: 35 - Occupation: UX Researcher & Accessibility Consultant - Tech Knowledge: High (Uses Bitcoin but struggles with accessibility barriers)
📌 Pain Points: ❌ Struggles with small font sizes & low contrast. ❌ Finds the UI difficult to navigate with a screen reader. ❌ Confused by identical-looking transaction buttons.
📌 Needs: ✅ A high-contrast UI that meets WCAG accessibility standards. ✅ Larger fonts & scalable UI elements for better readability. ✅ Keyboard & screen reader-friendly navigation for seamless interaction.
📌 Why This Persona Matters: - Represents users with visual impairments who rely on accessible design. - Ensures the design accommodates inclusive UX principles.
4️⃣ UX/UI Solutions & Design Improvements
📌 Before (Current Issues)
❌ Users land directly on the wallet screen with no instructions. ❌ "Send" & "Receive" buttons look identical , causing transaction confusion. ❌ Small fonts & low contrast reduce readability.
✅ After (Proposed Fixes)
✅ Step-by-step onboarding explaining wallet creation, security, and transactions. ✅ Visually distinct transaction buttons (color and icon changes). ✅ WCAG-compliant text contrast & larger fonts for better readability.
1️⃣ Redesigned Onboarding Flow
✅ Added a progress indicator so users see where they are in setup. ✅ Used plain, non-technical language to explain wallet creation & security. ✅ Introduced a "Learn More" button to educate users on security.
2️⃣ Accessibility Enhancements
✅ Increased contrast ratio for better text readability. ✅ Used larger fonts & scalable UI elements. ✅ Ensured screen reader compatibility (VoiceOver & TalkBack support).
3️⃣ Transaction Flow Optimization
✅ Redesigned "Send" & "Receive" buttons for clear distinction. ✅ Added clearer icons & tooltips for transaction steps.
5️⃣ Wireframes & Design Improvements:
🔹 Welcome Screen (First Screen When User Opens Wallet)
📌 Goal: Give a brief introduction & set user expectations
✅ App logo + short tagline (e.g., "Secure, Simple, Self-Custody Bitcoin Wallet") ✅ 1-2 line explanation of what BlueWallet is (e.g., "Your gateway to managing Bitcoin securely.") ✅ "Get Started" button → Le ads to next step: Wallet Setup ✅ "Already have a wallet?" → Import option
🔹 Example UI Elements: - BlueWallet Logo - Title: "Welcome to BlueWallet" - Subtitle: "Easily store, send, and receive Bitcoin." - CTA: "Get Started" (Primary) | "Import Wallet" (Secondary)
🔹 Screen 2: Choose Wallet Type (New or Import)
📌 Goal: Let users decide how to proceed
✅ Two clear options: - Create a New Wallet (For first-time users) - Import Existing Wallet (For users with a backup phrase) ✅ Brief explanation of each option 🔹 Example UI Elements: - Title: "How do you want to start?" - Buttons:** "Create New Wallet" | "Import Wallet"
🔹 Screen 3: Security & Seed Phrase Setup (Critical Step)
📌 Goal: Educate users about wallet security & backups
✅ Explain why seed phrases are important ✅ Clear step-by-step instructions on writing down & storing the phrase ✅ Warning: "If you lose your recovery phrase, you lose access to your wallet." ✅ CTA: "Generate Seed Phrase" → Next step
🔹 Example UI Elements: - Title: "Secure Your Wallet" - Subtitle: "Your seed phrase is the key to your Bitcoin. Keep it safe!" - Button: "Generate Seed Phrase"
🔹 Screen 4: Seed Phrase Display & Confirmation
📌 Goal: Ensure users write down the phrase correctly
✅ Display 12- or 24-word seed phrase ✅ “I have written it downˮ checkbox before proceeding ✅ Next screen: Verify seed phrase (drag & drop, re-enter some words)
🔹 Example UI Elements: - Title: "Write Down Your Seed Phrase" - List of 12/24 Words (Hidden by Default) - Checkbox: "I have safely stored my phrase" - Button: "Continue"
🔹 Screen 5: Wallet Ready! (Final Step)
📌 Goal: Confirm setup & guide users on next actions
✅ Success message ("Your wallet is ready!") ✅ Encourage first action: - “Receive Bitcoinˮ → Show wallet address - “Send Bitcoinˮ → Walkthrough on making transactions
✅ Short explainer: Where to find the Send/Receive buttons
🔹 Example UI Elements: - Title: "You're All Set!" - Subtitle: "Start using BlueWallet now." - Buttons: "Receive Bitcoin" | "View Wallet"
5️⃣ Prototype & User Testing Results
🔹 Created an interactive prototype in Figma to test the new experience. 🔹 User Testing Results: ✅ 40% faster onboarding completion time. ✅ 90% of users found transaction buttons clearer. 🔹 User Feedback: ✅ “Now I understand the security steps clearly.ˮ ✅ “The buttons are easier to find and use.ˮ
6️⃣ Why This Matters: Key Takeaways
📌 Impact of These UX/UI Changes: ✅ Reduced user frustration by providing a step-by-step onboarding guide. ✅ Improved accessibility , making the wallet usable for all. ✅ More intuitive transactions , reducing errors.
7️⃣ Direct link to figma file and Prototype
Original PDF available from here
originally posted at https://stacker.news/items/928822