El problema
El agro online era un catálogo: se mostraban productos, pero la compra real ocurría por fuera, en llamadas, mensajes e intermediarios. Resultado: fricción, desconfianza y baja escalabilidad.
01 / RESUMEN
El caso en 30 segundos
Si tenés poco tiempo, esto es lo esencial: qué estaba roto, qué hice y qué cambió.
Lo que hice
Rediseñé de punta a punta cinco experiencias clave: publicar, gestionar la post-venta, decidir una compra, pagarla y elegir un plan, y armé un design system para sostenerlas.
El impacto
Un flujo de publicación guiado y transaccional, una post-venta con estados y próximos pasos claros, fichas orientadas a la decisión, un checkout que se entiende en cada paso y planes que se comprenden. Menos confusión, menos errores y más sensación de control.
02 / CONTEXTO
Un ecosistema, cinco sistemas, tres tipos de usuario
TodoAgro centraliza la compra y venta de productos agropecuarios: un marketplace B2B/B2C con pagos digitales, logística, promociones y programas de fidelización. El desafío no era solo diseñar pantallas, sino que todo funcione como un único sistema.
Vendedores
Productores, distribuidores, comercios y empresas del agro.
- Vender más y tener visibilidad
- Publicar de forma sencilla
- Entender costos y beneficios
- Gestionar su negocio en un solo lugar
Compradores
Productores, contratistas y empresas.
- Comprar fácil
- Información clara y confiable
- Seguridad en el pago
- Envíos y devoluciones sin problemas
Promotores
Usuarios que difunden la plataforma.
- Incentivos claros
- Métricas para medir su aporte
Equilibrar sus intereses con los de vendedores y compradores es parte del diseño.
“Diseñar para TodoAgro es equilibrar intereses de múltiples usuarios sin romper la experiencia.”
03 / MI ROL
Traducir decisiones de negocio en una experiencia posible
Fui parte de las reuniones donde se definía la estrategia y mi trabajo fue interpretarla y cuestionarla desde UX, cuidando a la vez lo que el equipo de desarrollo podía construir en cada etapa.
Estrategia UX
Responsable del área de Diseño UX/UI: experiencia end-to-end de compra y venta, onboarding, AgroCarteira, identidad visual y sistema de diseño. Alineé objetivos comerciales con necesidades reales de usuarios.
Colaboración
Trabajo transversal con producto, desarrollo y negocio, con metodologías ágiles y design thinking. Adapté los diseños a la infraestructura y los tiempos reales y co-creé soluciones implementables.
Restricciones reales
Sin un MVP definido, con plazos ajustados, prioridades cambiantes e infraestructura limitada. Mi aporte fue priorizar impacto, tomar decisiones conscientes y aplicar buenas prácticas cuando el contexto lo permitía.
04 / PROCESO
De la incertidumbre a una decisión justificada
No trabajé con un proceso lineal y perfecto, sino con ciclos cortos: entender, ordenar, diseñar, validar y entregar, una y otra vez, a medida que el producto crecía.
- 01
Entender
Reuniones de negocio, feedback de vendedores activos y observación de cómo usan la plataforma, para detectar dónde se traba la gente.
- 02
Ordenar
Arquitectura de información, mapas de experiencia y user flows por actor: vendedor, comprador y promotor.
- 03
Diseñar
Wireframes y prototipos en Figma, de baja a alta fidelidad, construidos sobre un design system propio.
- 04
Validar
Pruebas y feedback de usuarios reales. Cada hallazgo se convierte en una iteración concreta.
- 05
Entregar
Handoff a desarrollo con componentes, specs y, ajustado a lo que la infraestructura permite en cada etapa.
05 / ARQUITECTURA Y USER FLOWS
Antes de dibujar pantallas, ordeno el sistema
Para cada experiencia armé mapas de experiencia y user flows por actor y los traduje a arquitectura de información: qué ve cada perfil, en qué orden y qué decisión toma en cada paso. Esos flujos son la base de las pantallas y también lo que documenta el design system.
MOMENTO EN QUE LA PERSONA ACTÚA O CONFIRMA
VENDEDOR
Publicar un producto
- Datos del producto
- Condiciones de venta
- Envíos
- Resumen (la persona actúa o confirma)
- Publicar
VENDEDOR
Post-venta
- Venta confirmada
- Cargar nota fiscal (la persona actúa o confirma)
- Preparar y etiquetar (la persona actúa o confirma)
- Envío en camino
- Entregado
COMPRADOR
Decidir y comprar
- Descubrir producto
- Evaluar precio y vendedor
- Agregar al carrito
- Pagar (la persona actúa o confirma)
- Recibir o retirar
VENDEDOR NUEVO
Elegir un plan
- Entender cómo vender
- Comparar planes
- Resolver dudas en FAQ
- Activar plan (la persona actúa o confirma)
CAPÍTULO 01
Flujo de publicación transaccional
EL PROBLEMA
Para que una publicación sea realmente transaccional necesita datos precisos: producto, condiciones de venta, alcance geográfico y envíos. Tanta información generaba confusión, errores y abandono, sobre todo en personas que nunca habían vendido online.
RESULTADO
Un proceso informal y fragmentado se transformó en un flujo claro y guiado: menos confusión, menos errores y publicaciones de mejor calidad dentro del marketplace.
DECISIONES DE DISEÑO
- 1Tres módulos guiados: Datos del producto, Condiciones de venta y Envíos, para bajar la carga cognitiva.
- 2Rediseño de las zonas de venta: de activar estado por estado a una lógica simplificada, porque no todo lo técnicamente posible es usable ni sostenible (y la infraestructura tenía límites de performance).
- 3Reducción consciente de pasos para bajar el riesgo de abandono antes de publicar.
- 4Resumen final con comisión, cuánto recibe el vendedor, descuentos, cuotas, envío y tiempo de despacho, para revisar sin recorrer todo de nuevo.
- 5Pedro, un guía contextual con ayudas por sección: soporte cognitivo que reduce errores sin interrumpir la tarea.
“La complejidad no se elimina: se reparte en pasos que la persona puede abarcar.”
Antes: selección manual de estados y departamentos
Después: envío con progreso, resumen y guía contextual
Después: precio, comisión y descuentos a la vista
Después: resumen final para revisar y editar
CAPÍTULO 02
Post-venta y tablero de ventas B2B
EL PROBLEMA
El vendedor veía la información del pedido, pero no siempre sabía qué acción priorizar, dónde descargar la etiqueta de envío ni cómo resolver dudas de cobro o de contacto con el comprador. La post-venta era un tablero de seguimiento, no un punto de control.
INSIGHT
“El sistema deja de asumir conocimiento previo y pasa a explicar la lógica del proceso.”
DECISIONES DE DISEÑO
- 1 Estados operativos claros -Cargar nota fiscal, Preparando envío, Envío en camino, Entregado, Reclamo, Reembolso- alineados al modelo mental del vendedor.
- 2 Bloque “Pasos para concluir la venta” que traduce cada estado en acciones concretas y ordenadas.
- 3 Cargar la nota fiscal pasa de requisito implícito a paso visible y accionable que desbloquea el envío.
- 4 Tipo de entrega visible desde el inicio: AgroEnvios, acordar con el comprador o retiro en tienda.
- 5 Soporte contextual a la vista (“Necesito ayuda”, “No recibí mi dinero”), guía de embalaje paso a paso y detalle de envío con etiqueta y tracking.
RESULTADO
La post-venta pasó de ser pasiva a ser guiada y accionable. El vendedor entiende qué hacer, cuándo hacerlo y qué impacto tiene cada acción: menos errores, mejor eficiencia operativa y más sensación de control.
Ventas: estados, pasos a seguir y tipo de entrega
Sin ventas: un estado vacío que orienta
Detalle de venta: cobro con Pix y próximos pasos
Tablero de la cuenta Oro: indicadores de la tienda
CAPÍTULO 03
Detalle de producto
EL PROBLEMA
La publicación era una ficha técnica extensa pensada para informar, no para convertir: sobrecarga visual sin jerarquía, imagen sin protagonismo, precio y beneficios diluidos y demasiada información técnica al inicio del recorrido.
INSIGHT
“Una compra se concreta primero con los ojos. Si la publicación no atrae, la decisión no avanza.”
DECISIONES DE DISEÑO
- 1 La imagen del producto pasa a tener protagonismo, con galería para explorar.
- 2 Precio, cuotas, envío gratis y garantía jerarquizados junto a la acción principal: Comprar o Agregar al carrito.
- 3 Confianza progresiva: reputación del vendedor, Garantía TodoAgro, medios de pago y opiniones.
- 4 La información técnica baja de nivel y se ordena en ficha, descripción y opiniones.
- 5 Más productos del vendedor para seguir explorando sin salir del contexto.
RESULTADO
Una publicación orientada a la conversión: capta la atención desde el primer pantallazo, construye confianza de forma progresiva y reduce la carga cognitiva inicial en productos de alto valor.
Imagen, precio y acción de compra en el primer pantallazo
Vendedor, garantía, medios de pago a la vista, ficha técnica y descripción
Opiniones del producto
Preguntas y productos similares
CAPÍTULO 04
Carrito y checkout del comprador
EL PROBLEMA
Comprar en el agro implica montos altos, medios de pago muy distintos (Pix, boleto, tarjeta), entregas en zonas rurales con direcciones difíciles. Cada duda en el camino era una razón para abandonar o volver a negociar por fuera.
INSIGHT
“Cuando el monto es grande, cada paso tiene que decir por qué existe.”
DECISIONES DE DISEÑO
- 1 Checkout en cuatro pasos con progreso siempre visible: Carrito, Entrega, Pago y Confirmación.
- 2 Entrega con opciones comparables (más rápida o más económica), dirección visible y editable, y búsqueda por CEP con “No sé mi CEP” para zonas rurales.
- 3 Todos los medios de pago en una sola pantalla -Pix, boleto y tarjeta, con opción de sumar una nueva- con el tiempo de aprobación de cada uno a la vista.
- 4 Datos fiscales (CPF o CNPJ) pedidos en el momento justo, con una frase que explica para qué se usan.
- 5 Resumen para revisar antes de pagar, con cada bloque editable, y avisos claros, como que el stock no se reserva hasta acreditar el pago.
RESULTADO
Una compra que se entiende en cada paso: la persona sabe cuánto paga, adónde llega y qué pasa después.
Carrito: lo que llevás, por tienda
Entrega: opciones comparables y dirección editable
Pago: todos los medios y sus tiempos
Resumen: revisar y editar antes de pagar
CAPÍTULO 05
Membresías y página “Cómo vender”
EL PROBLEMA
La pantalla de membresías tenía información sin jerarquía, beneficios repetidos y textos técnicos. Las personas no entendían qué plan les convenía ni por qué contratarlo. Y aun comparando, muchas no sabían cómo funcionaba vender en TodoAgro.
INSIGHT
“Vender un plan no es listar funcionalidades: es ayudar a tomar una decisión.”
DECISIONES DE DISEÑO
- 1 Un rol claro para cada plan —Básico, Plata y Oro— con una progresión lógica entre uno y otro.
- 2 Tabla comparativa de comisión, exposición, almacenamiento, herramientas y beneficios comerciales.
- 3 Información progresiva: el detalle de cada plan vive en secciones desplegables.
- 4 Preguntas frecuentes construidas con las dudas reales de vendedores activos.
- 5 Nueva página “Cómo vender en TodoAgro”: explica el proceso, qué hace la plataforma y qué hace el vendedor, las herramientas y los cobros con AgroCarteira.
RESULTADO
De una pantalla confusa a una propuesta de valor clara: primero entender, después comparar, recién al final decidir. El feedback real de vendedores generó una página nueva, no solo ajustes de texto.
Propuesta: tu tienda es gratis, elegí cómo vender
Un rol claro para cada plan
Tabla comparativa de funciones
CTA final y preguntas frecuentes
TAMBIÉN EN EL CELULAR
El mismo sistema, en el celular.
El sistema de TodoAgro también está en el celular porque es una herramienta que los vendedores a veces necesitan a mano, y porque los compradores suelen usar más el teléfono.
HOME
CARRITO
ENTREGA
RESUMEN
MIS COMPRAS
06 / DESIGN SYSTEM
Un design system hecho para personas y para IA
Lo armé en un archivo de Figma separado del proyecto real para que desarrollo y una IA como Claude pudieran consumirlo sin ambigüedades.
- Tokens como variables
- Componentes con variants
- Auto layout
- User flows
- Documentación de uso
CÓMO LO ARMÉ
- 1Una base de tokens —color, tipografía, espaciado y radios— con nombres semánticos, como variables de Figma.
- 2Componentes con auto layout, variants y propiedades, pensados con sus estados.
- 3Patrones y user flows documentados: cuándo usar cada pieza, no solo cómo se ve.
- 4Todo ordenado y con descripciones de uso, en un archivo aparte del proyecto.
CÓMO LO USABAN
Desarrollo
Handoff con nombres, specs y tokens consistentes para pasar a código con menos idas y vueltas.
IA (Claude y herramientas con Figma)
Leía el sistema para armar pantallas nuevas con piezas existentes, sin inventar estilos.
Diseño y producto
Pantallas nuevas con piezas ya definidas: menos decisiones repetidas y más consistencia.
IA con criterio
Uso IA generativa para explorar y armar borradores rápido, y siempre la valido contra el sistema, los usuarios y los límites técnicos.
07 / TRADE-OFFS
Tres decisiones donde elegí impacto antes que una solución ideal
En un producto que creció sin un MVP definido, diseñar fue elegir qué no hacer. Estas fueron las decisiones que más pesaron.
Simplificar las zonas de venta
ALTERNATIVA DESCARTADA
Mantener control total por estado y departamento.
POR QUÉ
Generaba sobrecarga cognitiva muy alta y problemas de performance por la infraestructura. Lo técnicamente posible no era sostenible.
Menos pasos y resumen final
ALTERNATIVA DESCARTADA
Un flujo largo donde tardabas 15 min por producto
POR QUÉ
Subía el riesgo de abandono. El resumen da control y seguridad sin obligar a recorrer todo de nuevo.
Página aparte “Cómo vender”
ALTERNATIVA DESCARTADA
Explicar todo dentro de la pantalla de membresías.
POR QUÉ
Volvía a saturar la experiencia. Comparar planes no alcanzaba: faltaba contexto antes de decidir.
08 / LO QUE APRENDÍ
“En mercados poco digitalizados, un guía contextual reduce errores más que simplificar el flujo.”
“No todo lo técnicamente posible es usable.”
“Diseñar con restricciones reales enseña más que cualquier proyecto de concepto.”
¿Hablamos?
Si buscás una diseñadora de producto con foco en marketplaces, B2B y sistemas de diseño, me encantaría contarte más de este caso.