Caso de estudio UX de PowerTrack – Modernización de una aplicación heredada en Silverlight
Transformación de la plataforma web heredada PowerTrack de AlsoEnergy, de Silverlight a React JS, mediante investigación con usuarios, simplificación de la UI y diseño UX enfocado en el rendimiento.
Implementación del sistema de interfaz
Así se traduce el sistema de diseño en interfaces reales, con énfasis en claridad, escalabilidad y usabilidad.
Resumen del proyecto
AlsoEnergy, líder con sede en Boulder en monitoreo de energías renovables, ofrece soluciones de software para la gestión solar y eólica. PowerTrack es su plataforma web principal, que permite a los usuarios monitorear y analizar el desempeño energético de sus instalaciones en tiempo real.
Como Lead UX/UI Designer, lideré la investigación con usuarios, la estrategia UX y la modernización de la interfaz de PowerTrack, migrándola de un entorno obsoleto en Silverlight a una aplicación moderna en React JS, al tiempo que simplifiqué los flujos de trabajo y mejoré la usabilidad para los ingenieros de desempeño.
Resumen del proyecto
Plazo y equipo
20 semanas
Lead UX/UI Designer, desarrollador front-end, arquitecto de software, ingeniero de QA, interesados de la empresa
Herramientas y metodología
Figma, Miro, InVision
Investigación UX de método mixto (cuantitativa + cualitativa) con prototipado iterativo y validación con las partes interesadas
Entregables clave
- • Encuestas
- • Entrevistas con usuarios
- • Personas
- • Mapas de recorrido
- • Wireframes
- • Prototipos
- • Reporte de usabilidad
Métricas de rendimiento
Participantes en la encuesta de usuarios
(respuestas de la base global de usuarios de PowerTrack)
Entrevistas con usuarios realizadas
(ingenieros de desempeño y analistas de energía)
Mejora en la eficiencia de navegación
(validado durante las pruebas de usabilidad)
Planteamiento del problema
Desafío
- Sin investigadores UX, product owners ni analistas de negocio dedicados: los esfuerzos de UX fueron autogestionados.
- Base de código obsoleta en Silverlight que requería una re-arquitectura completa en React JS.
- Sistema de navegación excesivamente complejo ('Navigator') con pocas señales de orientación.
- Interfaz visualmente saturada, sin jerarquía ni consistencia de diseño.
A pesar de las limitaciones de recursos, el proyecto logró identificar problemas críticos de usabilidad y entregar propuestas de rediseño accionables.
Enfoque
- Encuesta cuantitativa: distribuida a usuarios de PowerTrack a nivel global para identificar los principales puntos de fricción de usabilidad.
- Entrevistas con usuarios: 10 sesiones semiestructuradas con ingenieros de 9 empresas para recopilar hallazgos cualitativos.
- Observación y acompañamiento contextual: sesiones remotas de usabilidad por videoconferencia para identificar problemas reales en los flujos de trabajo.
- Personas y mapas de recorrido: desarrollo de perfiles de usuario compuestos y mapeo de las tareas críticas del análisis energético.
- Wireframes y prototipos: rediseño de 'Navigator' para ganar claridad y reducir la carga cognitiva.
- Pruebas e iteración: validación mediante pruebas de usabilidad y ciclos de comentarios, refinando el diseño para su implementación en React.
Solución
- Interfaz moderna en React JS: reemplazo de Silverlight por una arquitectura de front-end escalable y de alto desempeño.
- Rediseño de la navegación: reconstrucción de 'Navigator' como una barra lateral simplificada, con jerarquía clara y migas de navegación.
- Mejoras de búsqueda: incorporación de filtros inteligentes y búsqueda global de activos y reportes.
- Guía contextual: ayuda en línea, ayudas emergentes y señales de incorporación para el usuario.
- Visualización de datos: integración de gráficas interactivas de producción de energía, pérdidas y KPI.
Resultados
- Usabilidad: mejora del 35% en la velocidad de navegación y la comprensión de las tareas.
- Adopción: la nueva interfaz obtuvo una calificación de 4.7/5 por parte de los ingenieros de desempeño.
- Vigencia: la plataforma rediseñada sigue siendo la base de las versiones actuales de PowerTrack dentro de la plataforma Athena de Stem.
Métodos de medición: pruebas de usabilidad posteriores a la investigación, analítica de tiempo por tarea y comentarios posteriores al lanzamiento por parte de ingenieros y partes interesadas.
Conclusión clave
Cuando los recursos son limitados, liderar desde UX significa transformar las restricciones en claridad. Mediante investigación enfocada y diseño pragmático, PowerTrack evolucionó de una interfaz heredada a una herramienta moderna, eficiente y escalable para la gestión de energías renovables.