🔹 UX Case Study: Enhancing BlueWallet's Onboarding & Accessibility \ stacker news ~Design

This 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

🔹 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

Figma file: [https://www.figma.com/design/EPb4gVgAMEgF5GBDdtt81Z/Blue-Wallet-UI- Improvements?node-id=0-1&t=Y2ni1SfvuQQnoB7s-1](https://www.figma.com/design/EPb4gVgAMEgF5GBDdtt81Z/Blue-Wallet-UI- Improvements?node-id=0-1&t=Y2ni1SfvuQQnoB7s-1)

Prototype: [https://www.figma.com/proto/EPb4gVgAMEgF5GBDdtt81Z/Blue-Wallet-UI- Improvements?node-id=1-2&p=f&t=FndTJQNCE7nEIa84-1&scaling=scale- down&content-scaling=fixed&page-id=0%3A1&starting-point-node- id=1%3A2&show-proto-sidebar=1](https://www.figma.com/proto/EPb4gVgAMEgF5GBDdtt81Z/Blue-Wallet-UI- Improvements?node-id=1-2&p=f&t=FndTJQNCE7nEIa84-1&scaling=scale- down&content-scaling=fixed&page-id=0%3A1&starting-point-node- id=1%3A2&show-proto-sidebar=1)

Original PDF available from here