Carátula del rediseño de WaterProof: diseño de producto UX, UI e IA

Resumen

WaterProof es una herramienta de prefactibilidad. Permite estimar, antes de poner un peso, el retorno de implementar Soluciones basadas en la Naturaleza (reforestar una cuenca, conservar un bosque) para asegurar el agua de una ciudad. Detrás corren modelos científicos (InVEST, RIOS) que traducen datos biofísicos, como la retención de sedimentos, en ahorro real de operación de una planta de tratamiento.

Es un puente entre dos mundos que no hablan el mismo idioma: el técnico que modela la cuenca y el tomador de decisión que aprueba la inversión. Entré como UX Expert para rediseñar el software completo, de la evaluación heurística a la documentación, y fui la única diseñadora del proyecto.

Entregado a desarrollo
  • 220 pantallas en español y 220 en inglés diseñadas en Figma, con todos sus estados y variables, listas para implementar.
  • Design system completo: 113 componentes con estados y variables, tokens de color, tipografía y espaciado, y una capa de motion propia.
  • Prototipo funcional desplegado, navegable de punta a punta, para validar el rediseño con el cliente.
  • Entrega versionada en Azure DevOps, con los assets y componentes listos para el equipo de desarrollo.
  • Documentación de UX por módulo e historias de usuario con criterios de aceptación y su capa de motion.

Problema

El software priorizaba la completitud sobre el inicio rápido. Pedía cargar todo antes de dejar ver algo de valor, no distinguía lo crítico de lo accesorio y no acompañaba al usuario en el momento de decidir.

Dos frases resumieron la auditoría: el sistema estaba centrado en los datos, no en el usuario, y pedía información antes de generar valor. El registro tenía más de diez campos antes de poder entrar. Los resultados, que son lo más importante de toda la herramienta, aparecían sin ninguna explicación de dónde salían ni qué significaban.

Auditoría heurística

Recorrí el software entero contra las heurísticas de Nielsen. Los hallazgos se concentraron en seis patrones que se repetían pantalla a pantalla.

01Estado invisibleLa ventana "Procesando" no decía qué estaba haciendo, y los iconos de estado de la tabla de casos no significaban nada para el usuario.
02Todo pesa igualNo había jerarquía entre lo crítico y lo accesorio. Ningún campo se marcaba como clave, avanzado u opcional.
03Bloqueos mudosEl botón "Dibujar cuenca" frenaba el avance sin avisar que faltaba pulsarlo. El usuario no podía diagnosticar el error por su cuenta.
04Pérdida de datosEl signo más de un paso abría una página nueva y borraba todo lo cargado, sin aviso de guardado.
05Wording inconsistenteEl mismo paso se llamaba "Ubicación" y "Localización". Se mezclaba "clave" y "contraseña". Confirmar coordenadas tocando un icono azul no era un estándar reconocible.
06Todo por hoverLas ilustraciones del diagrama de infraestructura no tenían etiqueta: había que pasar el mouse por cada una para recordar qué eran.

Testing con usuarios

Antes de rediseñar corrí una prueba de usabilidad por tarea con seis perfiles expertos del dominio: consultores en modelación hidrológica e hidráulica, el director de un instituto del agua, una profesora de ingeniería agrícola, una especialista en recursos hídricos. Cada uno recorrió la misma tarea de punta a punta, crear un caso de estudio completo, unas veinticinco sub-tareas en seis fases. Medí tiempo, errores, éxito y facilidad percibida en cada paso.

6Participantes expertos en agua y modelación
2Módulos evaluados de punta a punta (Suministro e Inundaciones)
30 a 65Minutos para completar una sola tarea: crear un caso
50Errores en la sesión más crítica, sobre esa única tarea
1 de 6Sesiones que debieron cancelarse por un bloqueo del sistema
1 a 2Facilidad percibida sobre 5, pese a toda la fricción

El dato más revelador se repitió igual que en otros productos que testeé: la percibieron fácil, uno o dos sobre cinco, a pesar de tardar entre media hora y una hora en una sola tarea y de acumular decenas de errores. Se atribuían la culpa a ellos mismos, no al sistema. Esa autoinculpación es la que esconde la fricción real de un flujo.

Los seis chocaron con los mismos tres muros: el registro y su contraseña, encontrar dónde crear algo nuevo en un menú lateral que no veían, y conectar la infraestructura de la cuenca arrastrando desde una flecha oculta que ninguna guía explicaba. Una de las seis sesiones tuvo que cancelarse cuando el sistema se bloqueó al dibujar la cuenca.

Un hallazgo transversal marcó el tono del rediseño. Como resumió uno de los expertos, "no todo el mundo la puede usar; necesita un lenguaje que entienda un tomador de decisión, que no tiene tiempo ni le interesa el tecnicismo".

Solución

El rediseño respondió punto por punto a esa auditoría. El principio rector fue invertir la lógica del software: primero el inicio rápido, después la completitud. Cada decisión se validó para no romper el backend científico existente.

01Un HOME y un hub por móduloEl software no tenía punto de entrada: se caía directo en un formulario. Sumé una página inicial y un hub por cada módulo.
02Inicio con defaultsCada paso abre con valores razonables y resultados ya a la vista, en lugar de una pantalla vacía. Lo avanzado se esconde tras "Opciones avanzadas".
03Wizard acordeónAl completar un paso se cierra y se abre el siguiente, con una animación continua que mantiene al usuario orientado sobre dónde está.
04Canvas de infraestructuraEl punto más difícil del test se rehízo como un lienzo de nodos y conexiones, con ramificaciones y uniones explícitas.
05Ayuda unificadaReemplacé los círculos de interrogación sueltos y los tooltips copiados a mano por tres componentes: tooltip, panel lateral y banner.
06Design system con motion113 componentes con sus estados y variables, tokens de color, tipografía y espaciado, y una capa de movimiento propia dentro del sistema.
Componentes del design system de WaterProof: cards de captación con estados, alertas, botones de ayuda, memory cards y badges de progreso

Resultado

El rediseño fue aprobado por The Nature Conservancy y sus directivos, y validado por el equipo de IT: respeta el backend existente, con todos los flujos y componentes preparados para implementarse.

Entregué el sistema de diseño completo, un prototipo navegable en código, la documentación de UX por módulo y las historias de usuario, cada una con su capa de motion. El software pasó de pedir datos a acompañar una decisión.

Prototipo navegable

El rediseño funcional, navegable de punta a punta. Se puede abrir también en pantalla completa.

water-proof.org