EPIC iO — Aplicación WirelessWindows (antes DeepInsights for Connectivity)
Modernización de una plataforma de conectividad fragmentada hacia una aplicación modular de nivel empresarial en Angular + PrimeNG, con una UX unificada, arquitectura escalable y un sistema de diseño listo para integrarse.
Refinamientos de interfaz
Una mirada enfocada a las tablas de comparación mejoradas, una jerarquía visual más clara y patrones de interacción simplificados.
Resumen del proyecto
WirelessWindows nació como la modernización de DeepInsights for Connectivity, una plataforma de gestión de conectividad que se había vuelto ineficiente tanto en lo funcional como en lo visual. El producto heredado presentaba patrones de UX deficientes, comportamientos de interfaz inconsistentes y una infraestructura fuertemente acoplada, dependiente de hosting y bases de datos de terceros.
La iniciativa de rediseño abordó no solo la experiencia de usuario y la arquitectura de la interfaz, sino también la migración estructural a los servidores corporativos y sistemas internos de EPIC iO, lo que permitió un acceso más rápido a los datos, la expansión modular y la integración con otras herramientas empresariales.
Mi rol abarcó el ciclo completo de diseño inicial: investigación UX, análisis heurístico, wireframing, arquitectura de información, ideación y la creación de un sistema de diseño construido directamente sobre componentes de PrimeNG para asegurar la alineación con desarrollo.
Resumen del proyecto
Plazo y equipo
2024-2025
Senior UX/UI Designer — investigación, definición y entrega de extremo a extremo
Herramientas y metodología
Wireframe, FigJam, Figma, Angular, PrimeNG
Investigación UX, evaluación heurística, arquitectura de información, wireframing, implementación del sistema de diseño
Entregables clave
- • Evaluación heurística de la plataforma existente y puntuación de usabilidad
- • Flujos de tareas y arquitectura de información reestructurada para monitoreo, alertas y analítica
- • Wireframes de baja y alta fidelidad para dashboards, tablas y vistas de detalle
- • Sistema de interfaz basado en PrimeNG con layout, grillas, tipografía, tokens y estados
- • Documentación de componentes y prototipos de entrega a desarrollo validados frente al comportamiento de Angular
Métricas de rendimiento
Adopción del sistema de diseño en todos los módulos de Angular
(validado durante la integración en el entorno de staging)
entrega a desarrollo más rápido de diseño a desarrollo
(medido por el seguimiento de la velocidad de los sprints en Jira)
Mejora en el cumplimiento de accesibilidad
(con base en la validación de contraste WCAG 2.1 AA y en pruebas de tokens de PrimeNG)
Planteamiento del problema
La plataforma original DeepInsights for Connectivity presentaba múltiples problemas, tanto de UX como técnicos:
- Usabilidad deficiente e inconsistencia visual: navegación poco clara, pantallas redundantes y sobrecarga visual.
- Dependencia de tecnología de terceros: incluidos el hosting y la gestión de la base de datos, lo que limitaba la escalabilidad y el control del producto.
- Falta de modularidad: impedía la integración con otros productos internos de EPIC iO.
- Desempeño lento de los datos: sincronización poco confiable para la visualización de eventos de red.
El rediseño requería una renovación integral de UX y una nueva base arquitectónica capaz de soportar tanto las necesidades de los usuarios como la escalabilidad de ingeniería.
Desafío
El proyecto enfrentó varios retos críticos:
- Traducir métricas técnicas de conectividad en hallazgos visuales claros y accionables.
- Diseñar componentes de interfaz que respetaran las restricciones técnicas de PrimeNG sin perder consistencia de marca.
- Gestionar el ritmo de diseño bajo prioridades cambiantes y falta de alineación en el liderazgo.
- Asegurar que el producto pudiera servir como modelo para futuros sistemas de EPIC iO mediante modularidad y consistencia.
Enfoque
Siguiendo una metodología de diseño integral:
- Evaluación heurística: realicé una auditoría sistemática del flujo de navegación, la legibilidad de los datos y los modelos de interacción con base en los principios de Nielsen. Los resultados priorizaron las áreas de fricción en la navegación del tablero y en la visualización de alertas.
- Entrevistas con las partes interesadas y expertos: colaboré con los equipos de producto, ingeniería y redes para documentar la lógica de los flujos de trabajo y los roles de usuario (operadores, ingenieros, gerentes). Identifiqué oportunidades para alinear los flujos de UX con las capacidades de las APIs del backend.
- Arquitectura de información y rediseño de flujos: reorganicé el sistema en módulos (monitoreo, dispositivos, alertas, analítica) para simplificar la recuperación de datos y la generación de reportes. Introduje una agrupación basada en tareas en lugar de menús basados en funcionalidades.
- Wireframing e ideación: usé Balsamiq Mockups para layouts de baja fidelidad y FigJam para talleres colaborativos de arquitectura de información. Iteré la estructura del tablero, el filtrado de alertas y la lógica de interacción.
- Implementación del sistema de diseño (PrimeNG): construí un sistema visual y de comportamiento completo usando las primitivas de interfaz de PrimeNG: DataTable, Chips, Cards, Tabs, Toasts y Charts. Establecí tokens de color, escalas de espaciado y patrones de estado alineados con el ciclo de vida de los componentes de Angular.
- Prototipo de alta fidelidad y entrega de recursos: desarrollé prototipos interactivos que representan los módulos centrales y los flujos clave de usuario. Entregué design tokens, documentación de componentes y especificaciones anotadas para la entrega a desarrollo a desarrollo.
Solución
El diseño final unificó los objetivos de UX, interfaz y tecnología en un ecosistema escalable:
- Dashboards rediseñados y optimizados para la claridad y la interpretación rápida de los datos.
- Componentes de tabla flexibles con ordenamiento, filtros y estados de actualización en vivo.
- Sistema de componentes reutilizables que asegura una paridad uno a uno entre el diseño y Angular.
- Interacción más rápida con los datos gracias a layouts simplificados y una lógica de visualización optimizada.
- Consistencia entre productos mediante design tokens compartidos para futuras integraciones de EPIC iO.
Resultados
El proyecto generó resultados significativos:
- Entrega de una base de diseño modular adoptada por varios equipos de EPIC iO.
- Menor ambigüedad para el equipo de desarrollo al diseñar directamente sobre componentes de PrimeNG.
- Mejor jerarquía visual y mayor facilidad de aprendizaje del sistema en los módulos centrales.
- WirelessWindows se lanzó a finales de 2024 y alcanzó un desempeño estable tras un año de iteración y QA bajo el mismo marco de diseño.
- Creación del primer sistema de diseño interno de EPIC iO vinculado a un entorno Angular en producción.
Conclusión clave
La modernización de WirelessWindows fue más allá de mejorar la interfaz: redefinió el ADN técnico y visual de la plataforma.
Al alinear diseño y desarrollo desde el inicio, el proyecto entregó un producto modular, mantenible y técnicamente sólido, demostrando que unas bases de UX robustas son el camino más rápido hacia la escalabilidad a largo plazo.