dataAgro, una plataforma de gestión comercial para el trading de granos
Rediseño UX/UI end-to-end de una plataforma legacy de gestión comercial para una de las mayores compañías agroindustriales de Argentina, simplificando flujos operativos complejos sin reconstruir el sistema desde cero.
Una herramienta interna compleja para una de las mayores empresas agroindustriales de Argentina
Molinos Río de la Plata necesitaba una plataforma interna para su equipo comercial de trading de granos, cubriendo contactos de proveedores, contratos de compra, fijaciones de precio y reportes de actividad para cuatro roles de usuario. Fui la diseñadora única, 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 tenían que mantenerse. Las tablas se renderizaban dentro de iframes, lo que significaba que el layout heredaba un ancho fijo que hacía que cada pantalla con muchos datos se sintiera apretada.
El problema más visible: los filtros del sidebar consumían el ancho ya limitado de la tabla, dejando a los operadores entrecerrar los ojos ante columnas truncadas. La solución fue directa: mover los filtros arriba y dejar que la tabla usara todo el ancho disponible.
Sistema anterior — filtros del sidebar compitiendo con la tabla por el espacio horizontal. Con 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 — cada uno necesitaba un nivel de acceso diferente 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 y activar la finalización. La UI lleva la lógica de permisos, no un manual de capacitación.
La tabla de contratos — el corazón operativo de CompraNet. Filtrado por múltiples columnas, 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 legibilidad.
Filtros con disclosure progresivo — la vista por defecto se mantiene limpia con 5 filtros primarios; las opciones avanzadas (campaña, rango de fechas, estado) aparecen a demanda. Un patrón que funcionó igualmente bien en escritorio y mobile.
El mismo modal, diferente control
El lenguaje visual es consistente en todos los roles. Lo que cambia es qué se puede editar, qué acciones aparecen y cuántos datos se exponen.
Visualizador — solo lectura. Todos los datos visibles, sin acciones excepto Cerrar.
Mesa — puede editar contratos en Oferta y Pendiente, confirmar recepción. No puede crear ni finalizar.
Jefe — puede editar KG y extensiones en contratos confirmados, y activar la finalización.
Cinco estados, legibles de un vistazo
Los contratos pasan por 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 — sin necesidad de 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 enfocada y puntual — tiene una página dedicada. La edición ocurre en el flujo de revisión de muchos registros, por lo que vive en un modal que mantiene la tabla visible debajo. El formulario de creación también usa disclosure progresivo: los atributos adicionales del contrato (grano sustentable, precio dolarizado, condiciones en pesos fijos) están ocultos por defecto y se expanden solo cuando son necesarios.
Creación de contrato — página completa, layout de dos columnas. Campos relacionados agrupados uno al lado del otro para reducir el scroll sin sacrificar claridad.
Datos adicionales expandidos — los campos condicionales aparecen solo cuando se marca la opción correspondiente, evitando que los campos vacíos sobrecarguen el formulario.
Vista mobile responsive — el problema de diseño más difícil de la plataforma. Una tabla de datos de 12 columnas reconstruida para mobile sin perder editabilidad ni información crítica. Resuelto completamente en HTML/CSS, sin build mobile separado.
Entregado. 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 la adoptó sin capacitación formal, y el proyecto llevó directamente a un segundo trabajo con Molinos.