← Todos los proyectos
UX/UI · Enterprise Tool · Data Management

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.

DropZone — delivery dashboard with status overview

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

DropZone — delivery dashboard with four status states

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

DropZone — upload screen with delivery context and drag and drop area

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.

DropZone — upload in progress with per-file status and error flags

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.

DropZone — animated upload flow showing real-time progress

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

DropZone — metadata table with inline editing

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.

DropZone — metadata table with active inline editing

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.

DropZone — metadata table in fullscreen mode

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.

DropZone — multi-value editing modal

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

DropZone — humanized error toast message

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.

1K+
archivos por entrega — diseñado para escalar
4
estados de entrega con lenguaje visual diferenciado
3
niveles de notificación — Error, Warning, Notice
Hablemos

¿Tenés un desafío que vale la pena resolver?

Me encantaría escuchar sobre tu próximo producto, equipo o proyecto de transformación —
ya sea que necesités dirección estratégica, ejecución de diseño o una combinación de ambas.

Disponible para consultoría, roles senior y colaboraciones.
Remoto, híbrido o presencial en Europa. Abierta a reubicación.