BlockBind

Reto de diseño#

El reto fue diseñar una wallet cripto que se sintiera simple y accesible sin eliminar la funcionalidad que los usuarios esperan de un producto serio de activos digitales.

Muchas wallets existentes abruman a los usuarios con jerga técnica u ocultan información importante —gráficos de precios, historial de transacciones y comisiones— detrás de interfaces poco claras. La experiencia debía equilibrar la accesibilidad para principiantes con la profundidad que exigen los usuarios experimentados.

---

Dirección de diseño#

La interfaz se construyó en torno a un sistema de color mínimo y funcional, un espaciado consistente y patrones de interacción predecibles.

Paleta de color mínima con acentos funcionales. Un fondo neutro oscuro reserva el color para la información que requiere atención: gráficos, rendimiento, estados y botones de CTA.

Sistema de espaciado consistente de 4px. Cada margen, padding y alineación sigue una retícula de 4px, creando un layout predecible que escaló a más de 30 pantallas.

Sistema tipográfico Open Sans. La hoja de dirección estandariza Open Sans para títulos y cuerpo, con una escala fija de 14px, 16px, 32px, 40px y 56px: una sola familia, jerarquía clara y un escaneo predecible en móvil.

Enfoque component-first. Botones, tarjetas, inputs, bottom sheets, modales, toasts reutilizables y una confirmación por deslizamiento personalizada se definieron temprano para mantener la consistencia en todo el producto.

Swipe-to-confirm para acciones críticas. Enviar o intercambiar cripto usa un gesto de deslizamiento en lugar de un botón estándar, añadiendo fricción intencional y reduciendo los envíos accidentales.

---

Estructura UX#

La experiencia se estructuró en torno a una gestión rápida del patrimonio de un vistazo, con interacciones más profundas disponibles a un solo toque. La mayoría de las acciones comunes son visibles desde la pantalla de inicio: consultar el saldo, revisar las tenencias, enviar, recibir y comprar.

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

---

Resultado#

El diseño final entregó un sistema de UI de wallet móvil cohesivo y escalable a lo largo de más de 30 pantallas. La interfaz mantiene la consistencia mediante un uso disciplinado del espaciado, la tipografía, el color y los componentes reutilizables, haciendo que la gestión de activos cripto se sienta accesible sin simplificar de más el producto.

Qué demuestra este proyecto#

• Pensamiento de sistema visual: diseñar más allá de pantallas individuales para crear una biblioteca de componentes escalable.
• Jerarquía de información en productos complejos: hacer accesibles los datos financieros sin abrumar a los usuarios.
• Diseño de interacción para la seguridad: usar swipe-to-confirm para equilibrar usabilidad y seguridad.
• Atención al detalle: mantener la consistencia de espaciado, tipografía y componentes en un alcance de producto amplio.