dataAgro, una plataforma de gestión comercial para el trading de granos
Rediseño UX/UI completo de una plataforma de gestión comercial legacy para una de las mayores empresas agropecuarias de Argentina, simplificando flujos operativos densos sin reconstruir el sistema desde cero.
Una herramienta interna compleja para una de las mayores empresas agropecuarias de Argentina
Molinos Río de la Plata necesitaba una plataforma interna para su equipo comercial de trading de granos, que cubriera contactos con proveedores, contratos de compra, fijaciones de precio y reportes de actividad para cuatro roles de usuario. Fui la única diseñadora del proyecto, integrada directamente con el PM, el arquitecto de sistemas y el equipo de desarrollo, y también responsable del HTML/CSS responsive.
La restricción: rediseñar sin empezar de cero
No había tiempo ni presupuesto para reconstruir desde cero. La navegación, el encabezado y la estructura subyacente debían mantenerse. Las tablas se renderizaban dentro de iframes, lo que hacía que el layout heredara un ancho fijo que hacía sentir apretada cada pantalla con datos densos.
El problema más visible: los filtros de la barra lateral ocupaban el ya limitado ancho de la tabla, dejando a los traders mirando columnas truncadas. La solución era directa: mover los filtros arriba y dejar que la tabla use el ancho completo.
Sistema anterior — filtros en la barra lateral compitiendo con la tabla por el espacio horizontal. Con las tablas dentro de iframes, el margen era mínimo.
Una interfaz, cuatro roles
CompraNet conectaba a los compradores de Molinos con los proveedores de granos a través de un sistema compartido de gestión de contratos y fijaciones de precio. Cuatro roles — Visualizador, Mesa, Analista y Jefe — necesitaban distintos niveles de acceso sin una interfaz diferente. Un Visualizador ve datos de solo lectura y un único botón Cerrar. Un Jefe puede editar contratos confirmados, ajustar cantidades e iniciar la finalización. La UI lleva la lógica de permisos, no un manual de capacitación.
La tabla de contratos — el núcleo operativo de CompraNet. Filtrado multi-columna, badges de estado codificados por color en 5 estados (Confirmado, Pendiente, Finalizado, Oferta, Error) y acciones inline sensibles al rol. Diseñada para manejar 50+ registros sin perder escaneabilidad.
Progressive disclosure en los filtros — la vista por defecto se mantiene limpia con 5 filtros primarios; las opciones avanzadas (campaña, rango de fechas, estado) aparecen bajo demanda. Un patrón que funcionó igual de bien en escritorio y en móvil.
Mismo modal, diferente control
El lenguaje visual es consistente entre roles. Lo que cambia es qué es editable, qué acciones aparecen y cuántos datos se exponen.
Visualizador — solo lectura. Todos los datos visibles, sin acciones salvo Cerrar.
Mesa — puede editar contratos en Oferta y Pendientes, confirmar recepción. No puede crear ni finalizar.
Jefe — puede editar KG y extensiones en contratos confirmados, e iniciar la finalización.
Cinco estados, legibles de un vistazo
Los contratos avanzan de Oferta → Pendiente → Confirmado → Finalizado, con Error como excepción recuperable. El color y la etiqueta hacen que el estado sea legible directamente en la fila de la tabla — no hace falta abrir el registro para saber en qué punto está.
Pendiente — formulario editable. La barra de estado en la parte superior ancla el estado actual antes de que el usuario lea un solo campo.
Error — un estado recuperable con una advertencia clara y una única acción de recuperación. El usuario nunca queda sin un camino a seguir.
Creación en página completa, edición inline
Crear un contrato es una tarea puntual y enfocada — tiene una página dedicada. La edición ocurre en el flujo de revisar muchos registros, por eso vive en un modal que mantiene la tabla visible debajo. El formulario de creación también usa progressive disclosure: los atributos adicionales del contrato (grano sustentable, precio dolarizado, términos en pesos fijos) están ocultos por defecto y se expanden solo cuando se necesitan.
Creación de contrato — página completa, layout de dos columnas. Campos relacionados agrupados lado a lado para reducir el scroll sin sacrificar la claridad.
Datos adicionales expandidos — los campos condicionales aparecen solo cuando se marca la opción correspondiente, evitando que campos vacíos recarguen el formulario.
Vista responsive en móvil — el problema de diseño más difícil de la plataforma. Una tabla de 12 columnas reconstruida para móvil sin perder editabilidad ni información crítica. Resuelto íntegramente en HTML/CSS, sin un build móvil separado.
Lanzado. Usado en el campo. Llevó a un segundo proyecto.
La plataforma cubrió el flujo comercial completo — contactos, contratos, fijaciones de precio, reportes — responsive en todos los dispositivos, sirviendo a cuatro roles a través de una única interfaz adaptativa. El feedback de los usuarios fue positivo, el equipo lo adoptó sin capacitación formal, y el trabajo derivó directamente en un segundo proyecto con Molinos.