UX/UI Design
Proyecto UX/UI desarrollado para Lyssa, empresa de seguridad, enfocado en el diseño visual de app y páginas web. Se trabajaron interfaces en modo claro y modo oscuro, considerando el uso por guardias en rondas diurnas y nocturnas, y un panel de administración para la operación. Aquí se muestran las aplicaciones reales: ReportApp (guardias) y Admin (administración).
Son los builds reales de ambas aplicaciones (React + MUI) en modo demo, 100 % autocontenido: la API está simulada con datos ficticios y la sesión viene precargada — nada sale de tu navegador. Si cierras sesión, puedes volver a entrar con cualquier credencial.
La aplicación contaba con una base funcional desarrollada previamente por un programador. Mi trabajo se enfocó en rediseñar la experiencia de uso para adaptarla al contexto real de los guardias en terreno, priorizando la accesibilidad, la seguridad y la rapidez de operación. Se simplificaron los flujos, se reorganizó la interfaz para facilitar el uso con una sola mano y se incorporaron respuestas visuales y hápticas que permiten comprender el estado del sistema sin depender únicamente de la pantalla.
Estaba en la zona inferior, junto a las acciones frecuentes, y podía activarse sin querer. Se movió a la barra superior como ícono dedicado y su activación ahora exige mantener presionado un gran botón rojo: un anillo de progreso confirma la intención antes de enviar la alerta, evitando disparos accidentales.
Dos botones competían visualmente y provocaban errores que costaban tiempo. Se reemplazaron por un selector de pestañas, dejando “Ingreso” por defecto por ser la acción más frecuente.
La vista inicial concentraba demasiada información y decisiones. Se reemplazó por un flujo secuencial que guía al guardia paso a paso y reduce la carga cognitiva durante la operación.
Problema
El botón de emergencia estaba cerca de las acciones frecuentes y podía presionarse accidentalmente.
Decisión
Se trasladó a una posición diferenciada y se modificó su jerarquía visual.
Beneficio
Se reduce el riesgo de activaciones involuntarias sin perder el acceso rápido.
Problema
La operación se hace con una mano y con el pulgar, muchas veces en movimiento.
Decisión
Acciones frecuentes en los dos tercios inferiores, botones de mínimo 48×48 px y mayor contraste.
Beneficio
Alcance cómodo con el pulgar y mejor reconocimiento en cualquier iluminación.
Problema
Sin respuesta clara, el usuario repetía acciones o dudaba si el sistema estaba procesando.
Decisión
Lenguaje de respuestas hápticas e indicadores de carga (ruedas de progreso).
Beneficio
Se entiende el estado del sistema sin mirar fijo la pantalla y se evitan acciones duplicadas.
Identifícate
Tarjeta NFC o ID + contraseña. Un solo punto de entrada para todos los flujos.
Elige la acción
La app abre solo lo necesario según la tarea.
Completa paso a paso
Foto y ubicación · perfil de la persona · escaneo del punto NFC, uno a la vez.
Confirmación + feedback
Estado claro en color y una respuesta háptica que confirma el resultado.
Acción exitosaUna vibración breve.
ErrorDos vibraciones y una prolongada.
Tarjeta NFC detectadaUna vibración al leer la etiqueta.
ProcesandoRuedas de progreso para evitar repetir una acción.
Sistema visual diseñado para mantener claridad, coherencia y legibilidad en distintos contextos de uso. La tipografía organiza la información y la paleta se adapta a los modos diurno y nocturno, incorporando contrastes y colores de estado que facilitan una navegación rápida y segura.
Display · títulos
Montserrat
Aa Bb Cc 0123
Cuerpo · UI
Roboto
Aa Bb Cc 0123
Datos · IDs · hora
Roboto Mono
Aa Bb Cc 0123
Modo claro · turno de día
Exterior y uso al sol · contraste ≥ 7:1. Acento por contraste: azul.
Papel
#F2F4F7
Superficie
#FFFFFF
Tinta
#0A0E65
Acento
#00539A
Éxito
#1F8A4C
Peligro
#C23B2E
Modo oscuro · turno de noche
Rondas nocturnas · baja iluminación · contraste ≈ 10:1. Acento por contraste: dorado.
Fondo
#0A0E65
Superficie
#0B0D3E
Texto
#BDBFC1
Acento
#FEBE10
Éxito
#47BF7D
Peligro
#E5675B
El modo oscuro no es cosmético: en rondas nocturnas una pantalla clara deslumbra y delata la posición del guardia. La paleta trabaja el azul marino y el amarillo institucional de Lyssa manteniendo contraste en ambos modos, y las acciones principales quedan al alcance del pulgar.