Consultora global · Herramienta de previsión energética

De una hoja de cálculo de 40 pestañas a un mapa que se lee en diez segundos

Diseño de la herramienta con la que los analistas de una consultora global calculan, comparan y comparten previsiones de consumo y coste de calefacción por estado de EE. UU.: bomba de calor aire-agua frente a caldera de gas, de 2020 a 2050.

UX/UI Design
Datos complejos
Sistema de diseño
Prototipado

Panel principal de la herramienta con el mapa de EE. UU. por año de cruce de coste total

Pantalla de entrada: el forecast de referencia cargado por defecto y el mapa coloreado por el año en que la bomba de calor iguala el coste total de la caldera de gas.

Mi rol: Lead UX/UI Designer. Benchmark, arquitectura de información, wireframes, interfaz, sistema de diseño y prototipo navegable.
Equipo: Un product manager del cliente, dos analistas de energía como expertos de dominio, cuatro desarrolladores y yo como único diseñador.
Duración: 14 semanas (sep 2020 – ene 2021) en tres entregas: benchmark y wireframes, sistema y pantallas, prototipo y handoff.
Plataforma: Aplicación web de escritorio para uso interno y para presentar ante cliente final. Rejilla de 1440 px, probada a 1200 y 980.
Usuarios: Dos perfiles: analista (crea y compara previsiones) y administrador (gestiona usuarios, permisos y datos de referencia).
Alcance: 2 pestañas más panel de administración, 5 métricas sobre el mapa, 8 variables editables por región, 10 supuestos globales y unos 40 componentes con sus estados.

01 — El desafío

El modelo funcionaba; contarlo, no

El cliente asesora a energéticas y administraciones sobre la electrificación de la calefacción. Su modelo económico vivía en una hoja de cálculo enorme: 51 regiones, ocho variables por región y diez supuestos globales que cambiaban el resultado de golpe. Funcionaba, pero solo lo manejaban dos personas.

Cada escenario nuevo costaba días de copiar pestañas, y la única forma de enseñarlo era exportar capturas a una presentación. Nadie podía comparar dos escenarios en la misma pantalla, ni saber de qué fuente salía un número, ni tocar un supuesto sin miedo a romper el original.

De 3 días a 40 min

es lo que pasó a costar montar un escenario nuevo, revisarlo y compartirlo con el equipo de proyecto.

El objetivo de negocio

Que cualquier analista construya un escenario sin tocar la hoja de cálculo original.
Que el resultado se entienda en una reunión, sin explicar el modelo antes.
Que cada número enseñe de dónde viene y de qué año es.

02 — Restricciones y alcance

Lo que no se podía mover

La herramienta se diseñó alrededor de un modelo ya validado y de una identidad corporativa cerrada. El margen estaba en la interfaz, no en el cálculo ni en la marca.

De datos y negocio

El modelo no se toca. Los analistas fijaron las fórmulas. La interfaz recoge variables y enseña resultados; no decide nada.
Ocho fuentes externas con fechas de corte distintas. Cada variable tenía que llevar su enlace a la fuente y su año de referencia.
51 regiones × 8 variables. Densidad obligatoria: un asistente paso a paso habría sido inasumible para quien carga un CSV entero.
Dos perfiles y permisos. El administrador gestiona usuarios y datos de referencia; el analista solo trabaja con sus escenarios.

Técnicas y de marca

Identidad corporativa cerrada. Paleta, tipografía y tono venían dados: azul profundo, azul eléctrico, cian y siete colores de datos.
Solo escritorio. Rejilla maestra de 1440 px con pruebas a 1200 y 980, y espaciado base de 24 px. Sin versión móvil en el alcance.
Mapa propio, sin servicio de mapas de pago. Un coroplético a 1152×488 dibujado como componente, con zoom y leyenda propios.
Handoff sin diseñador dentro del equipo. Cada estado de cada control tenía que estar dibujado y documentado antes de empezar a construir.

03 — Proceso y decisiones clave

Nadie empieza un escenario desde cero

En seis sesiones de observación con analistas apareció el mismo gesto: nunca abrían una hoja en blanco. Siempre duplicaban el escenario de referencia del año anterior y cambiaban tres o cuatro celdas. La versión que llevábamos entonces giraba alrededor de un formulario de creación; el insight movió el eje del producto.

El objeto central dejó de ser el formulario y pasó a ser el escenario: algo que se duplica, se marca como favorito, se guarda como borrador, se comenta y se compara. De ahí salieron el listado como puerta de entrada, el menú de fila con «Duplicar» y la regla de que ningún cambio sobrescribe nada sin preguntar.

El segundo insight vino del mapa. En el benchmark de nueve herramientas del sector, el mapa nunca era la respuesta: era la pregunta. Por eso las cinco métricas del modelo no se apilaron en cinco mapas, sino que se convirtieron en pestañas del mismo mapa.

Trade-offs

Cinco métricas como pestañas, no cinco mapas

Descartado: una rejilla con los cinco mapas a la vez, uno por métrica.
Por qué: cinco escalas de color distintas en pantalla se comparan mal y obligan a leer cinco leyendas. Con pestañas, el mapa se queda quieto y solo cambia el color.
Coste asumido: no se ven dos métricas a la vez. Se compensa con el popover de estado, que muestra tres indicadores juntos.

Cambiar un supuesto global pregunta antes de guardar

Descartado: editar los diez supuestos y que se apliquen al escenario abierto.
Por qué: esos diez valores mueven todas las curvas. El modal ofrece sustituir los valores o crear un escenario nuevo con ellos.
Coste asumido: un paso más en la acción que más se repite. A cambio, el escenario de referencia nunca se pierde.

Tabla editable en línea, no asistente por pasos

Descartado: un flujo guiado región a región.
Por qué: el analista compara filas mientras edita, y muchas veces sube el CSV entero y solo corrige excepciones.
Coste asumido: una tabla muy densa. Se domó con unidades en la cabecera, enlace a la fuente por columna, comentarios por celda y guardado como borrador.

Comparar hasta tres escenarios, no los que quieras

Descartado: comparación libre de N escenarios en la misma gráfica.
Por qué: con más de tres series, la lectura de las curvas 2020-2050 se rompe y la leyenda pesa más que el dato.
Coste asumido: quien necesita comparar cinco descarga el CSV. Es el caso raro, no el diario.

Evolución: de lógica a interfaz

Semanas 1-2 · Benchmark. Nueve herramientas de datos energéticos y de inteligencia de negocio. De ahí salen tres convenciones: mapa coroplético, escala temporal fija 2020-2050 y descarga de datos en cada bloque.
Semanas 3-5 · Wireframes en gris. Listado, panel y creación de escenario, sin color, para discutir estructura y no estética.
Semanas 6-8 · Estilos y componentes. Paleta, escala tipográfica, rejilla de 1440 y espaciado de 24 px, y la biblioteca de controles con todos sus estados.
Semanas 9-12 · Pantallas finales. Panel, mapa, comparativas, formularios, tablas, modales y avisos.
Semanas 13-14 · Prototipo y handoff. Prototipo navegable con cuatro estados reales (Montana, Minnesota, Texas y Wyoming), guía de interacción y mockup de compartición de archivos.

Formulario de creación de escenario con la identificación y los datos de tecnología

Creación de un escenario: nombre, descripción, año base y si lleva datos de cliente. Debajo, los datos de tecnología con su unidad en el propio campo y un enlace a la fuente en cada uno.

Panel de supuestos globales desplegado sobre el mapa

Los diez supuestos que mueven todas las curvas viven en un panel aparte, con «Restaurar» a mano. Las dos acciones de salida no son Guardar y Cancelar, sino «aplicar solo a esta vista» y «guardar sustituyendo».

Modal de confirmación al editar los supuestos globales

Aquí se ve la regla completa: tocar un supuesto global nunca sobrescribe en silencio. El modal ofrece sustituir los valores del escenario abierto o crear uno nuevo con ellos.

04 — Solución final

Cada decisión, sobre la pantalla

El recorrido diario cabe en cinco pantallas: el mapa, donde se pregunta; el estado, donde se responde; el listado, donde se elige de qué partir; y la tabla, donde se construye el escenario.

Panel principal con la barra de cinco métricas y el mapa coroplético — Panel de entrada con el escenario de referencia cargado y el mapa coloreado por año de cruce de coste total.

Mapa con el popover de Texas y sus tres indicadores — Métrica de ratio entre precio de la electricidad y del gas, con el popover del estado bajo el cursor.

Ficha de estado con banda de indicadores y gráficas de eficiencia y coste total — Detalle de Nueva York: los cinco indicadores del estado y las curvas de eficiencia de la bomba de calor y de coste total frente a la caldera de gas.

Tabla editable de las ocho variables por región — Edición de un escenario: ocho variables por región, con sus unidades, su fuente y las celdas modificadas destacadas.

Listado de escenarios con filtros, escenario destacado y borradores — Listado de escenarios: el destacado arriba, el resto ordenable por nombre, sector, geografía, regiones y año base.

Comparación de una variable entre varias regiones

Comparación por regiones: se elige una variable y hasta tres regiones, y el mapa y la serie temporal responden a la misma selección. Tres series es el máximo por diseño.

Tabla en edición con comentario sobre una celda

Edición en línea: la celda activa ofrece guardar, deshacer y comentar. El comentario queda pegado al dato, que es donde surge la discusión, y no en un correo aparte.

Tabla de edición con el detalle de la fuente de una columna abierto

Cada columna lleva su enlace «Source» en la cabecera y, al abrirlo, el nombre exacto de la variable y el organismo del que sale. Es lo que hizo desaparecer la pregunta «¿de dónde has sacado ese número?» de las reuniones.

Modal de compartición de un escenario por correo

Compartir un escenario obliga a confirmar que se conocen las condiciones sobre información sensible. El escenario se envía por su nombre, no como un archivo suelto que luego nadie sabe de qué versión salió.

Panel de administración con el listado de usuarios y sus permisos

El panel de administración: usuarios, rol y acciones de edición y borrado, con su propia pestaña y filtros. Es lo que permitió abrir la herramienta a otras oficinas sin tocar el diseño.

05 — Resultados y aprendizajes

El modelo dejó de ser cosa de dos personas

Medido cuatro meses después del despliegue interno, con ocho analistas: prueba moderada de seis tareas, registros de uso y comparación con la forma de trabajar anterior sobre la hoja de cálculo.

40 min

para montar, revisar y compartir un escenario nuevo. Antes, unos tres días de trabajo sobre la hoja de cálculo.

−64 %

errores de unidad al introducir datos por región, tras poner la unidad en la cabecera de cada columna.

×3

escenarios por proyecto: de 1,4 de media a 4,2. Comparar dejó de ser un esfuerzo extra.

SUS 84

de usabilidad percibida con ocho analistas, y 34 de 36 tareas completadas sin ayuda.

Lo que cambió en el trabajo del equipo

El mapa se convirtió en la lámina de apertura de las presentaciones al cliente final: se enseña la herramienta en vivo en vez de pegar capturas.
La discusión sobre el origen de los datos desapareció de las reuniones: el enlace a la fuente está en la propia columna.
Los analistas nuevos entran por el listado y duplican un escenario existente. Formar a alguien pasó de una semana a una tarde.
El panel de administración permitió abrir la herramienta a equipos de otras oficinas sin tocar el diseño.

Retrospectiva

El benchmark ahorró discusiones de gusto. Enseñar cómo resuelven el mapa otras nueve herramientas del sector cerró en una sesión un debate que llevaba semanas abierto.
Los estados antes que las pantallas. Documentar cada control con todos sus estados antes de maquetar evitó que el equipo de desarrollo tuviera que inventar comportamientos sin diseñador dentro.
La densidad no es el enemigo. El impulso inicial fue aligerar la tabla. Los usuarios querían lo contrario: ver más filas a la vez. Lo que había que aligerar era la decisión, no el dato.
La deuda también se escribe. Por debajo de 980 px la herramienta no responde, y la escala secuencial del mapa nunca se probó con daltonismo. Estaban listadas como siguiente iteración.
Lo siguiente. Guardar comparativas como vistas propias y un historial de versiones por escenario: la pregunta que más se repitió al final fue «¿qué cambió desde la semana pasada?».

Un modelo que ahora se puede enseñar

La herramienta convirtió una hoja de cálculo de especialistas en un producto que cualquier analista usa y que el cliente final entiende en una reunión. Un mapa que pregunta, una ficha que responde, una tabla que no deja dudas sobre el origen del dato y un sistema de componentes que permitió construirla sin diseñador en el equipo de desarrollo.