Product Design · UX/UI · Fintech

Vibrant

UX/UI Fintech Crypto

¿Cómo pagás tus servicios cuando tu dinero está en cripto?

Vibrant
Año 2025
Rol Product Designer
Herramientas Figma
Industria Fintech · Crypto
01 — Sobre el proyecto

Pagar servicios sin salir de la app

Vibrant es una billetera digital basada en USDC que permite a usuarios de LATAM convertir, transferir, retirar a moneda local y operar con tarjetas. El equipo de producto identificó que una de las principales razones por las que los usuarios retiraban sus fondos a pesos era para pagar servicios (luz, gas, internet, telefonía) e impuestos, y para pagar tarjetas de crédito en otras apps.

Mi rol fue liderar el diseño UX/UI de una nueva funcionalidad nativa de "Pago de Servicios y Tarjetas" dentro de Vibrant, integrada a través de un proveedor de pagos (Latamex), que permitiera resolver esa necesidad sin abandonar el ecosistema.

Vibrant
02 — Mi rol

Diseño end-to-end

Product Designer a cargo del diseño end-to-end de la funcionalidad: research, definición de UX junto al equipo de producto, arquitectura del flujo completo (incluyendo estados de error, vacíos y de éxito), sistema de diseño y diseño del flyer de lanzamiento.

03 — Proceso

De la deuda no encontrada a la confirmación

Realicé un análisis competitivo de billeteras digitales con funcionalidades similares, incluyendo MercadoPago, Ualá, Brubank y Binance Pay. El objetivo fue mapear patrones de interacción e identificar fricciones comunes: formularios largos, falta de confirmación visual clara y manejo poco claro de errores.

Junto al equipo de producto definimos el alcance de la primera versión: pago de servicios por categoría y pago de tarjetas de los principales bancos y marcas. Diseñé el flujo completo en Figma contemplando el camino feliz y todos los casos borde: múltiples modos de ingreso, deuda no encontrada, factura vencida, más de una deuda pendiente, validaciones de monto y estados de confirmación.

A partir del manual de marca (paleta violeta/negro con acentos en amarillo flúo), construí un sistema de diseño con tokens de color, tipografía, espaciados y componentes reutilizables. También diseñé el flyer de lanzamiento utilizado en campañas internas y redes sociales.

Resolver una necesidad real sin salir del ecosistema.

04 — Colores & tipografía

Violeta, negro y un acento flúo

Violeta Vibrant #7C3AED
Amarillo Flúo #E6FF3A
Negro #0A0A0A
Blanco #FFFFFF

Aa

Poppins Regular

Cuerpos de texto y estados de la interfaz.

Aa

Poppins Bold

Titulares y montos: lo que tiene que leerse primero.

05 — Resultados
+35% Usuarios activos mensuales

Usando la nueva función de pago de servicios y tarjetas dentro de la app.

18.400 Transacciones en el primer mes

Procesadas a través de la integración con el proveedor de pagos Latamex.

<1 min Tiempo promedio de pago

Bajó de ~4 minutos a menos de 1, con una caída del 28% en tickets de soporte.

92% Finalización en tests de usabilidad

Tasa de finalización en los tests de usabilidad previos al lanzamiento.