Caso de estudio · Producto digital
Proletarian
Coin
Diseño de una billetera digital conectada a una moneda propia. El proyecto explora cómo transformar una idea financiera compleja en un producto comprensible: desde la investigación y definición del problema hasta los flujos, la arquitectura de información, el sistema visual, las interfaces desktop/mobile y la base técnica para su desarrollo.
Demo sin contraseña y sin dinero real. Explora envíos, recepciones y recargas con un perfil ficticio; los movimientos se guardan solo en tu navegador y puedes reiniciarlos.
01 · Contexto
El punto de partida
La idea
Proletarian Coin nace como ejercicio de diseño y desarrollo de un ecosistema digital propio: una moneda, una billetera y una interfaz desde la que una persona pueda consultar saldo, administrar activos y comprender sus movimientos sin enfrentarse a la complejidad habitual de este tipo de plataformas.
Problema de diseño
Una wallet puede concentrar conceptos técnicos, datos financieros y acciones sensibles en muy poco espacio. El desafío fue ordenar esa complejidad, construir jerarquías claras y proyectar una experiencia que transmita control y legibilidad antes de avanzar al código.
02 · Investigación
Investigar antes de dibujar pantallas
Exploración
Revisión del funcionamiento general de billeteras digitales, exchanges y productos fintech para reconocer patrones: dashboard, balance, movimientos, envío/recepción, estados de transacción, seguridad y navegación.
Análisis funcional
Separación entre lo que el usuario necesita ver y lo que el sistema necesita procesar. Esto permitió pensar la interfaz junto con datos, autenticación, transacciones y persistencia, en vez de diseñarla como una colección aislada de pantallas.
Hipótesis
La experiencia debía reducir carga cognitiva: mostrar primero balance y acciones principales, revelar detalle cuando fuese necesario y mantener consistencia entre desktop y mobile.
03 · Definición
De la investigación al sistema
Objetivos de experiencia
- Comprender el estado de la cuenta rápidamente.
- Distinguir saldo, moneda y movimientos.
- Reducir pasos en las acciones principales.
- Dar feedback claro ante cada operación.
- Mantener una lógica común en desktop y mobile.
- Preparar el producto para conectarse posteriormente a una base de datos real.
Arquitectura de información
La estructura se organizó alrededor de un núcleo de cuenta y wallet, acompañado por movimientos, operaciones y configuración. La arquitectura se definió antes de cerrar la interfaz para evitar que la navegación dependiera únicamente de decisiones visuales.
04 · Flujos
Diseñar también lo que ocurre entre pantallas
El flujo se trabajó como parte central del proyecto. No bastaba con diseñar estados finales: había que entender decisiones, entradas, validaciones, respuestas del sistema y rutas de error.
Entrada
Acceso del usuario, validación de identidad y llegada al estado principal de la cuenta.
Operación
Selección de acción, ingreso de datos, validación, confirmación y registro de la transacción.
Respuesta
Estados de éxito, error o espera diseñados para que el usuario siempre comprenda qué ocurrió y cuál es el siguiente paso.
05 · UX/UI
Desktop y mobile como un mismo producto
Wireframes y jerarquía
Las primeras decisiones se concentraron en distribución, navegación, jerarquía del balance y posición de las acciones. La prioridad fue validar estructura antes de agregar detalle visual.
Responsive
Mobile no se planteó como una reducción mecánica del desktop. Los componentes se reorganizan según prioridad, preservando acciones esenciales y simplificando densidad de información para pantallas pequeñas.
UI Kit
El sistema contempla componentes reutilizables: botones, inputs, cards, navegación, estados, indicadores, elementos de balance y módulos de transacciones. La intención es mantener consistencia y acelerar nuevas vistas.
Dirección visual
La identidad toma referencias geométricas y de composición Bauhaus para diferenciar el producto sin sacrificar lectura. Forma, contraste y jerarquía trabajan como parte de la usabilidad, no sólo como decoración.
05 · Evidencia visual
Del flujo a las pantallas
Estas son las piezas originales del proyecto. El recorrido parte del mapa general de navegación y continúa por el dashboard, el envío, la confirmación, la recepción y la administración de la billetera.
06 · Identidad y recursos
Exploraciones de interfaz y lenguaje visual
Además del recorrido principal de la billetera, el proyecto incluye variantes de pantalla, ilustraciones y recursos gráficos. Se presentan aquí los archivos originales para documentar la exploración visual sin confundirlos con pantallas finales validadas.
Variantes y exploraciones
Ilustraciones y recursos de composición
.png)
.png)
07 · Tecnología
Diseñar pensando en implementación
Front-end
La interfaz se proyecta como una aplicación responsive con componentes reutilizables y estados preparados para conectarse con lógica real.
Back-end
El producto requiere lógica para usuarios, autenticación, balances, operaciones y registro de movimientos. La separación de responsabilidades permite evolucionar la interfaz sin mezclar presentación y datos.
Datos
El modelo considera entidades relacionadas para usuario, wallet, activo y transacción. La base de datos forma parte de la arquitectura del proyecto desde el inicio, no como una integración posterior.
08 · Validación
Qué se evalúa
Usabilidad
Se revisan comprensión de navegación, visibilidad del balance, claridad de las acciones y cantidad de pasos necesarios para completar operaciones clave.
Consistencia
Se comprueba que componentes, estados, lenguaje y comportamiento mantengan la misma lógica en todo el producto y entre tamaños de pantalla.
Errores y estados
Una operación financiera necesita comunicar qué está pasando. Por eso los estados vacíos, carga, error, confirmación y éxito se consideran parte del diseño.
Iteración
Los hallazgos vuelven al flujo y a los componentes. El diseño se entiende como un sistema que se corrige progresivamente, no como una pantalla terminada de una sola vez.
09 · Resultado
Un proyecto de producto, no sólo de interfaz
Proletarian Coin reúne investigación, diseño de experiencia, arquitectura, identidad visual y pensamiento técnico dentro de un mismo caso. El valor del proceso está en conectar cada pantalla con una necesidad, cada flujo con una operación y cada decisión visual con la estructura que deberá sostener el producto.
Próximos pasos
Completar y conectar las vistas mobile, consolidar el flujo integral, profundizar el modelo de datos, implementar autenticación y persistencia, desarrollar las operaciones de la wallet, realizar pruebas con usuarios y documentar la evolución del producto con métricas y hallazgos verificables.