BlockBind

Design Challenge#

The challenge was to design a crypto wallet that felt simple and approachable without removing the functionality users expect from a serious digital asset product.

Many existing wallets either overwhelm users with technical jargon or hide important information — price charts, transaction history, and fees — behind unclear interfaces. The experience needed to balance beginner accessibility with the depth experienced users demand.

---

Design Direction#

The interface was built around a minimal, functional color system, consistent spacing, and predictable interaction patterns.

Minimal color palette with functional accents. A dark neutral background reserves color for information that requires attention: charts, performance, states, and CTA buttons.

Consistent 4px spacing system. Every margin, padding, and alignment follows a 4px grid — creating a predictable layout that scaled across 30+ screens.

Open Sans typography system. The direction sheet standardizes on Open Sans for headings and body, with a fixed scale at 14px, 16px, 32px, 40px, and 56px — one family, clear hierarchy, and predictable scanning on mobile.

Component-first approach. Reusable buttons, cards, inputs, bottom sheets, modals, toasts, and a custom swipe confirmation were defined early to maintain consistency throughout.

Swipe-to-confirm for critical actions. Sending or swapping crypto uses a swipe gesture instead of a standard button, adding intentional friction and reducing accidental submissions.

---

UX Structure#

The experience was structured around quick wealth management at a glance, with deeper interactions available one tap away. Most common actions are visible from the home screen: check balance, review holdings, send, receive, and buy.

Flow 01 / 11

01

Onboarding & Auth

#f1 · wide

Fullscreen

App Launch

Welcome

Onboarding Slides

Auth path

Create new wallet

Import wallet

Unlock existing

Set PIN / biometric

Enter recovery phrase

Password / biometric

Generate phrase

Valid?

Verified?

Backup phrase

Auth failed

Confirm phrase

Wallet ready

→ Home

02

Home / Wallet Dashboard

#f2

Fullscreen

Home / Wallet DashboardBalance · Portfolio · Tokens

Wallet selector

Receive

Buy

Send

Settings

Bottom navigation

QR · Quick pay

03

Main Navigation

#f3

Fullscreen

Bottom Navigation

Home

NFTs · Tokens

Swap

Activity

04

Receive Flow

#f4 · wide

Fullscreen

Home

Tap Receive

Select asset / wallet

Show QR code

Show wallet address

User action

Copy address

Share address

Cancel

Copied · stay

Share OK?

Shared

Share failed · retry

→ Home

05

Buy Flow

#f5 · wide

Fullscreen

Home

Tap Buy

Select asset

Enter amount

Payment method · Provider

Provider available?

Provider unavailable

Review fees

Confirm purchase

Payment result

Cancelled

Purchase confirmed

Payment failed · retry

→ Home

06

Send Flow

#f6 · wide

Fullscreen

Home

Tap Send

Recipient address

Address valid?

Invalid address

Select token

Enter amount

Sufficient balance?

Insufficient balance

Select network

Network match?

Network mismatch

Review gas & fees

Swipe to confirm

Tx result

User cancels

Sent · tx hash

Tx failed · retry

→ Home / Activity

07

Swap Flow

#f7 · wide

Fullscreen

Swap tab

Select token pair

Enter amount

Fetch rate · gas

Review rate · slippage

Swipe to confirm

Swap result

Swap confirmed

Swap failed

→ Activity

08

NFTs / Tokens Flow

#f8

Fullscreen

NFTs · Tokens tab

Browse holdings

View type

NFT detail

Token detail

View · transfer · hide

Send · Swap · hide

→ Home

09

Activity Flow

#f9

Fullscreen

Activity tab

Transaction timeline

User action

Search transactions

Filter (type · token)

Tx detail

View on explorer

→ Home

10

Settings Flow

#f10 · wide

Fullscreen

Home

Tap Settings

Settings menu

Multi-wallet mgmt

Security prefs

Connected apps

Backup · recovery

Re-auth required

Confirm revoke?

Notifications

Saved

Auth cancelled

Revoked

Cancelled

→ Home

11

Global Fallback States

#f11 · wide

Fullscreen

Any screen

Offline / no network

Session locked

Force update

RPC / node error

Permissions denied

Deeplink intent

Re-auth (PIN / biometric)

Resume last screen

---

Result#

The final design delivered a cohesive and scalable mobile wallet UI system across 30+ screens. The interface maintains consistency through a disciplined use of spacing, typography, color, and reusable components — making crypto asset management feel approachable without oversimplifying the product.

What This Project Demonstrates#

• Visual system thinking: Designing beyond individual screens to create a scalable component library.
• Information hierarchy in complex products: Making financial data accessible without overwhelming users.
• Interaction design for security: Using swipe-to-confirm to balance usability and safety.
• Attention to detail: Maintaining spacing, typography, and component consistency across a large product scope.