Workflow Buldier

Diseñé desde cero un módulo que permite construir workflows complejos mediante un editor visual basado en nodos, y hacer seguimiento de su ejecución a través de una interfaz de logs.

STATUS
Completo
YEAR
2023
ROL
UI Designer · Prototipado
CLIENT
Proyecto realizado como freelance para una agencia, destinado al equipo de Data de empresa líder en E-commerce
TEAM
UX/UI Designer (yo)
Desarrollo
MP
TOOLS
Figma
DURATION
6 Semanas

1. Contexto

El equipo de Data configuraba sus automatizaciones de forma manual y poco visual: cada acción y condición se armaba por separado, sin una vista unificada del flujo completo. Necesitaban una forma de construir y monitorear workflows sin depender de desarrollo para cada cambio.

2. Entendiendo el proceso

Antes de definir el user flow, identifiqué los puntos de fricción del proceso: crear una automatización implicaba resolver muchas tareas distintas a la vez (datos generales, alertas, lógica del flujo, condiciones), y era necesario simplificar cómo se presenta toda esa información.

Userflow de configuración general
Userflow configuración general
Userflow de construcción del workflow
Userflow construcción de workflow

3. Decisiones de diseño

Construcción progresiva

Cada nodo se agrega, configura y valida de forma independiente, lo que permite concentrarse en una decisión a la vez y facilita editar el flujo más adelante.

Editor basado en nodos.

Cada nodo representa una acción del proceso; las conexiones definen orden de ejecución y bifurcaciones condicionales.

Biblioteca lateral con drag & drop

Las acciones se muestran disponibles para construir el flujo de manera gradual

Configuración contextual

Cada nodo se edita desde un panel lateral que no interrumpe la vista del flujo completo.

Editor visual de workflows
Wireframe Medio Fidelidad Canvas

4. De crear a monitorear

El recorrido no terminaba en el editor: una vez ejecutado un workflow, el equipo necesitaba entender qué había pasado. Diseñé un módulo de monitoreo (Data Monitor) con lista de ejecuciones, detalle, logs y filtros, para que crear + guardar + ejecutar + monitorear funcionara como un único flujo.

Módulo de monitoreo de workflows
Wireframe Baja Fidelidad Monitor

5. Aprendizajes

Este proyecto fue mi primera experiencia diseñando una herramienta interna de alta complejidad. Me enfrenté al desafío de representar procesos técnicos mediante una interfaz visual clara y escalable, respetando un Design System existente y colaborando estrechamente con desarrollo para asegurar la viabilidad de la solución.

Algunos aprendizajes puntuales fueron:

  • Diseñar herramientas internas implica priorizar eficiencia y claridad por encima de la expresividad visual.
  • Un editor visual exitoso depende tanto de la organización de la información como de la calidad de las interacciones.
  • Trabajar sobre un Design System consolidado obliga a justificar cada decisión y favorece la consistencia del producto.

Gracias por leer

[[SIGUIENTE]] →