Caso de estudio · UX de producto
Rediseño del check-in con escáner QR
Un rediseño que silenciosamente se convirtió en un nuevo producto — transformó una torpe página de escaneo de credenciales en una experiencia de check-in flexible que funcionaba en escritorios y kioscos tipo tablet.
- Rol
- UX/UI de producto, investigación
- Empresa
- Convention Data Services
- Herramientas
- Adobe XD
- Tipo
- Rediseño de check-in en el evento
El prototipo
El prototipo interactivo de Adobe XD del flujo de check-in rediseñado:
El problema
CDS necesitaba modernizar su página de búsqueda e impresión en el evento — la pantalla que los asistentes usan para escanear su credencial y entrar a un evento. El negocio quería nuevas capacidades como check-in móvil y reconocimiento facial, pero el hardware existente era anticuado y limitado. Los clientes tiraban en direcciones distintas: algunos querían kioscos (mejores para el reconocimiento facial), otros preferían tablets para reducir costos logísticos y simplificar la instalación en el evento. Mi trabajo fue diseñar una sola solución que atendiera todas esas necesidades manteniendo un respaldo fiable en escritorio.
Problemas y objetivos
La página heredada arrastraba imágenes y UI anticuadas, tipografía débil y nada de soporte móvil. El encargo era claro: una interfaz moderna y menos recargada; tipografía y alineación más limpias; y un diseño que se viera correctamente tanto en hardware de escritorio como en tablet.
Investigación
La mayoría de las referencias de diseño de "escáner" mostraban a un usuario escaneando el QR de un producto — no al revés, donde el asistente presenta un código desde su teléfono o impresión. Esa guía seguía importando, sobre todo para los asistentes fuera del grupo millennial/Gen-Z. Los problemas reales eran lo anticuados que estaban los recursos y dónde se ubicaban en la página — un iPhone 4S, un escáner pixelado y una mano de stock demasiado perfecta. Algunos asistentes batallaban con el escáner en el evento; otros olvidaban imprimir o guardar su correo de confirmación. El diseño debía resolver todo eso con la mínima asistencia.
Antes, exploración y después
El resultado
Reconstruimos la página con estándares modernos. El viejo gráfico de "haz clic ahora" se convirtió en una sección hero apropiada, y sutiles transiciones CSS reemplazaron la incómoda imagen de la mano de stock. Las nuevas funciones de escaneo se añadieron y probaron en nuestros prototipos de kiosco-tablet, donde se veían perfectas. El equipo de servicios para eventos quedó encantado con la mejora, y los prototipos pasaron a los desarrolladores para producción — alimentando finalmente el producto de escáner/kiosco que redujo los costos logísticos y elevó los ingresos en el evento.
La construcción front-end
Más allá del prototipo, construí la página en código — una demo front-end autónoma con un efecto de escaneo animado en CSS puro (una mano acerca el QR de un teléfono al escáner mientras se dispara un barrido láser) que se reorganiza entre los breakpoints de escritorio y kiosco-tablet. Funciona sin paso de compilación: HTML, CSS, un poco de Bootstrap y jQuery.
Alterna entre Escritorio y Tablet para ver cómo se reorganiza el diseño — el check-in de "escáner orbital" de escritorio cambia a la vista de kiosco "RegStand" en vertical.
½
Costos logísticos en el evento reducidos por la solución de escáner/kiosco
2×
Ingresos generados por el nuevo producto en el evento
Escritorio + tablet
Un diseño, varias configuraciones de hardware