DropZone. Entrega masiva de documentos y gestión de metadatos
Diseño UX/UI end-to-end para flujos operativos complejos. Diseñé una herramienta web para que equipos de ingeniería puedan subir, organizar y enviar grandes volúmenes de documentos técnicos, con edición de metadatos inline en miles de archivos, manejo de errores en múltiples niveles y lógica de flujo diseñada para la precisión operativa.
Gestionando miles de documentos técnicos sin perder el control
Los equipos de ingeniería necesitaban entregar grandes lotes de documentos técnicos — hasta 1.000+ archivos por entrega —, cada uno con metadatos precisos: título, número de revisión, número de tag, número de equipo y clasificación por disciplina. El proceso existente era propenso a errores e inmanejable a escala.
La herramienta guía a los usuarios desde la carga hasta el envío con visibilidad de errores en tiempo real, edición inline y feedback claro en cada paso. Un sistema de notificaciones en múltiples niveles (Error, Warning, Notice) mantiene a los equipos informados en todas las entregas activas. Los componentes del design system corporativo existente fueron extendidos para cubrir patrones de interacción con datos densos que no estaban contemplados.
Cuatro estados — una sola vista
Dashboard de entregas — cuatro estados, una sola vista. Cada entrega vive en uno de cuatro estados: Borrador, Pendiente, En progreso o Completada. Cada estado tiene un ícono y color distintos para reducir el tiempo de escaneo. El dashboard muestra el conteo por estado y una lista cronológica de entregas recientes debajo, dando a los equipos una lectura inmediata de la carga de trabajo sin necesidad de abrir registros individuales.
Del drag and drop a una entrega limpia
Carga — el contexto de la entrega siempre visible. Los metadatos de la entrega permanecen visibles a la izquierda mientras se sueltan los archivos a la derecha. Este layout de dos paneles evita que los usuarios pierdan el contexto durante la carga, una decisión deliberada para un flujo donde los detalles de la entrega deben coincidir con los archivos que se envían. Guardar como borrador está disponible en esta etapa para que los equipos puedan pausar y retomar cargas grandes sin perder el progreso.
Carga en progreso — manejo de errores por archivo. Los archivos fallidos se marcan individualmente con un mensaje de error específico y una opción de Reintentar, en lugar de detener toda la carga. Esta fue una decisión de diseño crítica: reiniciar una carga de 563 archivos por tres fallas no es aceptable en un contexto operativo. El contador en la parte inferior rastrea el total de archivos cargados y los fallidos simultáneamente. Ver solo los fallidos filtra la lista para que los usuarios se enfoquen donde importa sin desplazarse por cientos de filas exitosas.
Flujo de carga — progreso en tiempo real y seguimiento de errores. El flujo de carga muestra las fallas a medida que ocurren, no al final. Cada archivo se resuelve de forma independiente para que los equipos puedan reintentar fallas individuales mientras el resto de la carga continúa. Este patrón reduce el tiempo entre el inicio de la carga y una entrega limpia y lista para enviar, lo que importa cuando los lotes contienen cientos de archivos y las fechas límite de entrega son fijas.
Edición inline a escala
Tabla de metadatos — edición inline a escala. Cada archivo requiere cinco campos de metadatos antes del envío. Diseñar esto como una tabla inline en lugar de formularios individuales por archivo fue la única solución viable con 1.000+ filas: abrir un formulario por archivo haría que completar los metadatos llevara horas. Los campos requeridos marcados con asterisco rojo guían la compleción. Los filtros de columna y los controles de ordenamiento permiten a los usuarios navegar grandes conjuntos de datos por disciplina, revisión o estado de error sin perder su posición.
Edición inline — sin formularios, sin cambio de contexto. Los campos de metadatos se abren para editar directamente en la fila sin abrir un formulario o modal separado. Con 1.000+ filas, cualquier patrón que saque a los usuarios del contexto de la tabla multiplica el tiempo y la carga cognitiva de completar una entrega completa. La celda se resalta al obtener el foco, los cambios se guardan por campo y el usuario nunca pierde su posición en el conjunto de datos.
Modo pantalla completa — diseñado para la densidad de datos. La tabla de metadatos tiene nueve columnas. En pantallas estándar, algunas quedan ocultas detrás de un scroll horizontal. El modo pantalla completa fue diseñado específicamente para esta restricción: maximiza las columnas visibles simultáneamente, eliminando la necesidad de scroll horizontal durante la edición. Los usuarios avanzados que gestionan entregas grandes pueden cruzar campos en una fila sin perder su posición en el conjunto de datos.
Edición multi-valor — sin salir de la tabla. Algunos documentos pertenecen a más de un número de tag o número de equipo. En lugar de duplicar filas o forzar a los usuarios a navegar a otra parte, un modal maneja la asignación de múltiples valores inline. Los valores se apilan con opciones de eliminación individuales, manteniendo la asignación completa visible. El patrón sigue la misma lógica de interacción usada en otras herramientas enterprise del sistema, reduciendo la curva de aprendizaje para los usuarios existentes.
Tono humano bajo presión
Mensajes de error — tono humano bajo presión. “Valeria, algo salió mal al subir tu archivo. Respirá, preparate un té y volvé a intentarlo.” Dirigirse al usuario por su nombre y usar un lenguaje simple y tranquilo fue una decisión deliberada. Los ingenieros trabajando con fechas límite de entrega experimentan estrés real cuando las cargas fallan. Un tono humano en ese momento reduce la ansiedad y evita que los usuarios abandonen el flujo, lo que significaría perder todo el progreso en una entrega grande.
Una herramienta construida para la precisión operativa, a cualquier escala.
La interfaz permitió a los equipos de ingeniería gestionar entregas complejas de documentos, con control total de metadatos, visibilidad sobre errores y un flujo claro desde la carga hasta el envío. Diseñar para esta densidad de datos a esta escala requirió una atención cuidadosa a la jerarquía, el feedback y los momentos en que las cosas fallan.