04

UX/UI Design

Lyssa

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: ControlApp (guardias) y Admin (administración).

ControlApp · app del guardia
Admin · panel de administración

Son los builds reales de ambas aplicaciones (React + MUI), servidos localmente en los puertos 8014 y 8015 — ver README del repo. El ingreso requiere credenciales del entorno de Lyssa.

Qué resuelve cada aplicación

ControlApp

Guardias en terreno · PWA móvil
  • Rondas y sesiones de ronda con puntos de control
  • Control de accesos y perfiles de acceso
  • Novedades y reportes del turno
  • Reportes de turno despierto (awake reports)
  • Modo claro / oscuro para rondas diurnas y nocturnas

Admin

Operaciones · panel web
  • Dashboard general y por cliente
  • Clientes, ubicaciones, dispositivos y usuarios
  • Definición de rondas y planes mensuales
  • Cumplimiento de rondas programadas y emergencias
  • Reportes descargables de la operación

Propuesta visual original

Láminas del trabajo de diseño para ReportApp/ControlApp: la app del guardia en terreno y las interfaces en modo claro y oscuro. Haz clic para ampliar.

Lámina: la app del guardia en terreno
La app del guardia en terreno
Lámina: interfaces en modo claro y modo oscuro
Modo claro / modo oscuro
Mockup de la app en modo claro
Reporte de rondas · modo claro
Mockup de la app en modo oscuro
Reporte de rondas · modo oscuro

Decisiones de diseño

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.

Rol
Diseño visual UX/UI · apoyo en flujos de navegación
Cliente
Lyssa · empresa de seguridad
Soportes
ControlApp (PWA móvil) · Admin (panel web)
Entregables
Interfaces modo claro/oscuro · organización de pantallas · criterios visuales