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, 9 variables editables por región, 5 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, nueve variables por región y cinco 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 × 9 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 cinco supuestos y que se apliquen al escenario abierto.
Por qué: esos cinco 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.

Wireframe en gris del listado de escenarios

Wireframe del listado: el escenario destacado arriba, la tabla ordenable debajo y el menú de fila con duplicar, renombrar y marcar como favorito. Toda la estructura se cerró en gris, antes de aplicar una sola gota de color.

Botones, campos, radio buttons y pestañas del sistema de diseño

Controles base: botón grande y pequeño con y sin icono, campo con etiqueta y unidad, desplegable, radio, casilla y la barra de pestañas de métricas. Cada uno se entregó con sus estados en la guía de interacción.

Componente de gráfica y bloque de valores del sistema de diseño

La gráfica como componente: título, descripción, unidad, eje 2020-2050, leyenda y descarga de datos siempre en el mismo sitio. A la derecha, el bloque de valores con su enlace al detalle.

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 nueve variables por región — Edición de un escenario: nueve 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.

01. Modal de supuestos globales · sustituir valores o crear escenario nuevo · captura 1440×900 PNG

Los cinco supuestos globales editados y el modal de decisión: sustituir los valores del escenario actual o crear uno nuevo con ellos. Demuestra la regla de que nada se sobrescribe en silencio.

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.