Plataforma de subastas online
Detalles del proyecto
Bid&Token es una plataforma digital de subastas que permite a los usuarios crear, descubrir y participar en subastas de productos, servicios y experiencias desde un mismo ecosistema.
El proyecto consistió en diseñar una plataforma web capaz de resolver dos necesidades principales: permitir que cualquier usuario pudiera publicar una subasta de manera sencilla y ofrecer a los participantes una experiencia clara y dinámica durante el proceso de puja.
Además del sistema de subastas, se diseñaron funcionalidades complementarias como gestión de fondos, seguimiento de actividad, favoritos, notificaciones y comunicación entre usuarios.
- Año: 2020
- Industria: Marketplace / E-commerce / Subastas online
- Trabajo: UX/UI Design
- Tiempo: 4 meses
Servicios
UX Research
Arquitectura de información
User Flows
Wireframes
UI Design
Design System
Prototipado
Diseño responsive
Usabilidad
Reto
El principal reto consistió en diseñar una experiencia capaz de combinar la dinámica de un marketplace tradicional con un sistema de subastas en tiempo real.
El usuario no solamente debía descubrir productos o servicios, sino entender rápidamente cómo participar, cuánto ofertar, cuánto tiempo quedaba disponible y cuál era el estado de su participación.
Al mismo tiempo, los usuarios que publicaban una subasta necesitaban configurar diferentes variables como: precio, duración, categoría, contenido y número de ganadores; sin convertir el proceso en un formulario complejo. Esto se refleja directamente en las diferentes etapas del flujo de creación presentes en los visuales.
El reto podía resumirse en:
¿Cómo hacemos que crear y participar en una subasta sea tan sencillo como comprar en un marketplace?
Research
ara entender las necesidades de ambos perfiles se planteó una investigación cualitativa con 12 usuarios, divididos entre personas acostumbradas a comprar online y usuarios con experiencia previa en marketplaces o plataformas de subastas.
El análisis permitió identificar tres factores determinantes:
Claridad, porque el usuario necesita comprender inmediatamente el estado de una subasta.
Confianza, porque la experiencia involucra depósitos, retiros y transacciones entre usuarios.
Control, porque tanto compradores como vendedores necesitan saber qué está ocurriendo con sus subastas, ofertas y fondos.
¿Iniciamos un proyecto?
Construyamos juntos algo increíble.
Solución
Diseñamos una experiencia centrada en simplificar todo el ciclo de una subasta, desde su creación hasta la comunicación entre compradores y vendedores.
- Acceso simple: Simplificamos el registro e inicio de sesión para facilitar la incorporación de nuevos usuarios.
- Dashboard centralizado: Creamos un espacio para gestionar subastas, favoritos, notificaciones, actividad y fondos desde un mismo lugar.
- Creación guiada: Dividimos la creación de subastas en pasos progresivos para reducir la carga cognitiva y facilitar la publicación.
- Pujas claras: Priorizamos información como tiempo restante, oferta actual, estado y participantes para facilitar decisiones durante la subasta.
- Gestión y seguimiento: Organizamos las subastas por estado —activas, ganadas, favoritas y creadas— para mejorar su seguimiento.
- Fondos y comunicación: Integramos depósitos, retiros y chat dentro de la plataforma para mantener todo el proceso dentro del mismo ecosistema.
UI Design
La identidad visual se construyó alrededor de una estética digital, tecnológica y dinámica, utilizando una paleta dominada por azules oscuros y azules eléctricos.
El azul oscuro funciona como superficie principal y ayuda a crear contraste con botones, indicadores y estados activos.
Las ilustraciones permiten humanizar procesos potencialmente complejos como crear una subasta, administrar fondos o configurar una cuenta.
La interfaz utiliza además tarjetas, módulos independientes y navegación persistente para reforzar la sensación de estar trabajando dentro de una plataforma, y no simplemente navegando por un sitio web.
Design System
Para permitir el crecimiento del producto se creó un sistema basado en componentes reutilizables.
Foundations: paleta cromática, tipografía, espaciado, grid, iconografía, radios y estados.
Componentes: buttons, inputs, selects, auction cards, navigation tabs, steppers, notifications, modals, chat, filtros, cards de usuario, indicadores de estado y formularios.
También se definieron estados como:
Default · Hover · Active · Focus · Disabled · Success · Error
Esto permitió mantener consistencia entre procesos especialmente sensibles como registro, creación de subastas y operaciones financieras.