El Reto
Cuatro aplicativos internos de seguridad ciudadana — gestión operativa, gestión documental, cámaras y analítica — coexistían sin un lenguaje visual compartido. Cada app tenía paletas, tipografías, componentes y espaciados distintos, lo que duplicaba esfuerzos de desarrollo y generaba inconsistencia en la experiencia del operador.
Los desarrolladores frontend reconstruían los mismos botones, tablas y formularios en cada proyecto. Los supervisores reportaban que "una app se siente distinta de otra". No existía un contrato visual que garantizara coherencia.
Proceso UX
Empatizar
Revisé los 4 productos existentes: identifiqué 6 paletas de colores distintas, 4 fuentes tipográficas diferentes, 3 sistemas de espaciado y decenas de componentes duplicados sin estandarizar.
Definir
Definí tokens de diseño como fuente única de verdad: colores (primario, secundario, acento, neutros, estados), tipografía Chivo con escala de 7 pasos, espaciado base 4px, border-radius y sombras.
Iterar
Construí la librería siguiendo Atomic Design: de átomos (botones, inputs, badges) a moléculas (cards, tablas, modales) hasta organismos completos (dashboard, mapa, timeline de incidentes).
Pantallas Clave
