01
Hecha para otro problema
Los componentes genéricos no reflejaban filas, turnos ni estados de atención.
QLess / Pegasus
Sistema de diseño Pegasus.
Un sistema de diseño específico del dominio para hacer las operaciones de atención en tiempo real más claras, consistentes y fáciles de extender a distintas superficies del producto.
- Rol
- Product Designer
- Plataforma
- Web adaptable
- Duración
- 3 meses
- Alcance
- Fundamentos y patrones del sistema
- Equipo
- Iniciativa individual → 3 diseñadores
Desafío
La biblioteca heredada se había creado para otro producto.
Se había diseñado para un portal de administración sin contemplar el producto completo. Los componentes genéricos, la falta de reglas y los estados inconsistentes dificultaban diseñar y mantener las pantallas de uso cotidiano.
El problema no era la falta de componentes. Faltaba un sistema que entendiera el producto.
02
Sin lógica interna
No había tokens compartidos ni reglas documentadas para color, espaciado, radios, elevación o escala tipográfica.
03
Sin resultados previsibles
Las pantallas combinaban componentes de distintas maneras, tenían estados incompletos y aplicaban la accesibilidad de forma inconsistente.
04
Un producto definido por el tiempo
Los operadores debían distinguir qué estaba a tiempo, próximo a atenderse, listo para actuar o ya demorado.
Fundamentos
Construir sobre una base probada.
Material Design 3 sirvió de base para patrones familiares, comportamientos de interacción y estructuras de estados. Pegasus amplió esa base con una expresión visual más contemporánea y un lenguaje operativo específico del dominio.
Partir de lo familiar
Usar patrones establecidos cuando usuarios y desarrolladores ya entienden su comportamiento.
Adaptar al dominio
Convertir roles genéricos en un lenguaje para filas, turnos, disponibilidad y urgencia temporal.
Modernizar la expresión
Desarrollar un sistema visual actual mediante tipografía, color, forma, espaciado y composición.
La urgencia no depende solo del color
Etiquetas, íconos, ubicación y acciones permiten entender el estado temporal de un vistazo.
Arquitectura
De colores de respuesta a patrones basados en el tiempo.
El sistema convierte los roles de respuesta en una referencia temporal compartida que atraviesa componentes y patrones sin perder su significado operativo.
Una referencia temporal compartida facilitó la interpretación de distintas superficies.
Etiqueta de tiempo
Comunica la urgencia actual del visitante.
Tarjeta de fila
Usa el mismo estado para mostrar la prioridad de un vistazo.
Tabla y filtro
Hace visible la urgencia entre visitantes y permite filtrar por estado temporal.
Panel de visita y calendario
Conecta el estado del visitante con la siguiente acción y el contexto del turno.
En el producto
Flujo de atención
Fila → visitante seleccionado → llamado → atención activa → fin de la atención.
Flujo de turnos
Calendario → filtros → panel del visitante → modal de edición → contexto actualizado.
Extensión a kioscos
Las experiencias de kiosco en tablet y móvil reutilizan el lenguaje visual donde corresponde el modelo de interacción.
Resultado
De decisiones individuales a un lenguaje de producto compartido.
El impacto fue estructural: las decisiones quedaron documentadas, acordadas en conjunto y reutilizables en distintas superficies del producto.
Compartido
Diseñadores y desarrolladores obtuvieron un lenguaje común para debatir estados, patrones y comportamientos.
Reutilizable
Las nuevas pantallas podían partir de patrones previsibles en lugar de recombinar componentes genéricos desde cero.
Escalable
El sistema permitió la contribución de tres diseñadores sin que las decisiones dependieran de una sola persona.
Aprendizaje
El trabajo de diseño consistió en decidir dónde la base debía volverse específica para el producto.
Los modelos de interacción conocidos evitaron inventar soluciones innecesarias. El sistema adquirió identidad propia al codificar tiempo, urgencia y próximas acciones; la documentación y los acuerdos compartidos hicieron que esas decisiones perduraran más allá de los archivos individuales.