Product Design · B2B · Supply Chain
Convertir una orden internacional de varios meses en algo que el buyer pueda seguir
Rediseñé la Order Page de Marteu para que los buyers B2B entiendan el progreso, las acciones pendientes y la logística sin depender del soporte.
Marteu conecta buyers de EE.UU. con fabricantes en India para compras internacionales de tiles. Una sola orden puede durar semanas o meses, incluir varios pagos, hitos de producción, QA/QC y varios contenedores con timelines distintos.
- Producto
- Marteu
- Rol
- Product Designer
- Usuarios
- Buyers (EE.UU.)
- Alcance
- Experiencia de gestión de órdenes
- Timeline
- 2023 - 2026 · Rediseño Order Page · Nov 2025
- Equipo
- Producto, desarrollo y operaciones
Industria
B2B Marketplace / Supply Chain
Plataforma B2B que conecta buyers de EE.UU. con fabricantes en India para compras internacionales de tiles, desde cotización y producción hasta QA/QC y logística.
Los previews conceptuales se actualizarán con capturas finales del producto.
Overview
Una Order Page B2B para operaciones que duran semanas, no minutos.
Antes de diseñar pantallas, el trabajo fue entender qué necesita el buyer para confiar en una compra que cruza países, equipos y meses.
Marteu es una plataforma B2B que ayuda a buyers de EE.UU. a gestionar compras internacionales de materiales, especialmente tiles, con fabricantes en India. El producto está en la intersección de comercio, producción, control de calidad y logística.
El usuario principal de este trabajo es el buyer: quien confirma la orden, la financia, sigue producción y envío, y recibe la mercadería en EE.UU. Necesita confianza en un horizonte largo, muchas veces sin conocimiento profundo de freight, QC o liberación de fondos.
La Order Page es la fuente principal de verdad del buyer durante el ciclo de vida de una compra. Debe responder preguntas de orientación rápido, reducir incertidumbre en esperas largas, destacar acciones requeridas y permitir profundizar cuando hace falta.
Orden #MRT-2847
Tiles cerámicos · 3 contenedores
Actualizado 12 mar · $48,200 total
Acción requerida
Revisar dirección de entrega antes de iniciar el trucking
Confirmada
Producción
Envío
Entrega
Lista
Hito actual
En tránsito · CNT-01 salió del puerto de origen
Preview conceptual de la Order Page
El desafío
Condensar una operación larga sin perder verdad ni claridad.
La página tenía que condensar la realidad operativa en una sola experiencia sin caer en dos modos de falla: demasiado detalle o etiquetas de estado demasiado simplificadas.
La página tenía que responder
- ¿En qué estado está mi orden?
- ¿Qué pasó recientemente?
- ¿Qué viene después?
- ¿Tengo que hacer algo?
- ¿Cuánto pagué y cuánto queda pendiente?
- ¿Qué productos incluye la orden?
- ¿Qué ocurre en producción?
- ¿Cómo avanza el envío?
- ¿Hay varios contenedores?
- ¿Cuándo podría llegar la mercadería?
- ¿Qué documentos respaldan cada etapa?
Demasiado detalle
Mostrar cada subestado interno y documento a la vez replica la complejidad del backend y abruma a quienes solo necesitan orientación.
Demasiada simplificación
Colapsar todo en una etiqueta como "En producción" oculta qué pasó, qué sigue y si hace falta actuar.
Ciclo de la orden
Mapear el sistema antes de diseñar la interfaz.
Las macro etapas orientan. Los subestados dan contexto. Hacían falta ambos.
Recorrido operativo completo
Macro etapas visibles para el buyer
Etapa 1
Orden confirmada
Etapa 2
En producción
Etapa 3
Envío
Etapa 4
Entrega
Etapa 5
Completada
Macro etapas (orientación)
- Orden confirmada
- En producción
- Envío
- Entrega
- Completada
Subestados operativos (contexto)
- Pending acceptance
- Accepted
- Pending funds
- Paid
- Packaged
- QC
- Shipment booked
- In transit
- Destination port
- Trucking
- Delivered
Ejemplo dentro de Envío
Problemas clave de UX
Cinco fricciones que moldearon el rediseño.
Estado sin contexto
Una etiqueta como "En producción" no dice qué cambió, qué viene después, si el buyer debe actuar o si un delay es normal.
El estado no es información. El contexto sí.
Información fragmentada
Productos, pagos, producción, QA/QC y logística pertenecían a distintas partes de la operación, pero el buyer vive una sola orden.
La página necesitaba una narrativa coherente, no un espejo de los sistemas internos.
Ambigüedad entre acción e información
El buyer tenía que distinguir información pasiva, progreso que puede monitorear y acciones que debe tomar ahora.
Las acciones requeridas necesitan otra jerarquía que las actualizaciones de estado.
Una orden, varios envíos
Una orden podía incluir CNT-01, CNT-02 y CNT-03 avanzando a distinta velocidad. Una barra lineal única distorsiona la realidad.
El tracking debía funcionar a nivel orden y contenedor.
Largos períodos de incertidumbre
Las operaciones internacionales pueden durar semanas o meses. Los cambios de estado pequeños importan mucho en ese contexto.
La experiencia debía reducir incertidumbre de forma continua, no solo en hitos grandes.
Principios de diseño
Reglas que mantuvieron la complejidad bajo control.
Mostrar progreso antes que detalle
Primero dónde está la orden en su ciclo de vida; después la profundidad operativa.
Hacer imposible pasar por alto una acción requerida
Pago, confirmación e inspección no deben competir visualmente con actualizaciones pasivas.
Revelar complejidad de forma progresiva
El buyer entiende estado, próximo paso y progreso primero. Pagos, contenedores y docs pueden venir después.
Separar información comercial, operativa y logística
Dinero, contenido de la orden, producción y envío se agruparon según la intención del buyer, no la estructura del backend.
Diseñar para excepciones, no solo el happy path
Delays, envíos parciales, fondos pendientes e inspecciones son normales en este dominio.
Arquitectura de información
Estructurar la página según las preguntas del buyer, no los módulos del backend.
No todos los bloques están visibles todo el tiempo. El revelado progresivo controla la profundidad.
01
Overview de la orden
ID, etapa, fechas, valor
02
Estado actual
Macro etapa + subestado
03
Acción requerida
Solo cuando el buyer debe actuar
04
Timeline de progreso
Pasado, presente, próximo
05
Detalle de la orden
Comercial y admin
06
Productos
Ítems incluidos
07
Pagos
Pagado vs. pendiente
08
Producción
Contexto de manufactura
09
Envío / contenedores
Nivel CNT cuando aplica
10
Entrega
Trucking, llegada, inspección
11
Documentación
Archivos por etapa
Experiencia rediseñada
De la orientación al detalle, en capas.
La Order Page funciona como bandeja de acciones, tracker de progreso y registro de la operación.
Overview inmediato de la orden
La parte superior responde en un scan: ID de orden, macro etapa actual, fechas relevantes, valor y el resumen más importante. Optimizado para visitas recurrentes cuando el buyer ya conoce la orden.
Orden #MRT-2847
Tiles cerámicos · 3 contenedores
Actualizado 12 mar · $48,200 total
Acción requerida
Revisar dirección de entrega antes de iniciar el trucking
Confirmada
Producción
Envío
Entrega
Lista
Hito actual
En tránsito · CNT-01 salió del puerto de origen
Preview conceptual de la Order Page
Un modelo de progreso que el buyer puede entender
Cinco macro etapas dan un modelo mental estable. Los subestados aportan contexto operativo sin obligar a aprender terminología interna de entrada. La macro etapa es el capítulo; el subestado, la escena actual; el timeline, historial y lo que sigue.
Orden #MRT-2847
Tiles cerámicos · 3 contenedores
Actualizado 12 mar · $48,200 total
Acción requerida
Revisar dirección de entrega antes de iniciar el trucking
Confirmada
Producción
Envío
Entrega
Lista
Hito actual
En tránsito · CNT-01 salió del puerto de origen
Preview conceptual de la Order Page
Acciones separadas de la información pasiva
Completar pago, confirmar datos o inspeccionar mercadería recibida se trataron como un modo distinto. Actualizaciones pasivas como "Packaged" o "In transit" no deben verse igual que "Payment required".
Detalle de interacción (preview conceptual) para Acciones separadas de la información pasiva
Diseñar para múltiples contenedores
Cuando la orden incluía CNT-01, CNT-02 y CNT-03, cada contenedor necesitaba estado, hito, fechas y contexto de tracking propios. Resumen a nivel orden más detalle por contenedor evitó una falsa simplicidad.
Resumen a nivel orden
Orden #MRT-2847 · Envío
3 contenedores · Hitos mixtos
CNT-01
In transit
Océano Pacífico
CNT-02
Shipment booked
Esperando salida
CNT-03
Packaged
Producción completa
Revelado progresivo
La vista por defecto prioriza estado actual, próximo paso y progreso general. Capas más profundas exponen desglose de pagos, productos, contenedores, documentos e historial de eventos.
Detalle de interacción (preview conceptual) para Revelado progresivo
Decisiones clave
Problema, decisión y rationale.
Problema
Los estados internos eran demasiado granulares para la navegación principal.
Decisión
Agrupar estados operativos bajo cinco macro etapas.
Por qué
El buyer necesita orientación a nivel capítulo antes que precisión operativa.
Problema
Las macro etapas solas eran demasiado amplias en fases largas.
Decisión
Mantener subestados visibles como contexto secundario de la etapa actual.
Por qué
El contexto reduce ansiedad sin enseñar el modelo completo del backend de entrada.
Problema
El buyer necesitaba historial y visibilidad hacia adelante, no solo una etiqueta.
Decisión
Usar un timeline que combine eventos recientes, hito actual y próximos pasos.
Por qué
En procesos B2B largos, el timeline es un mecanismo de confianza.
Problema
Tareas importantes se perdían entre actualizaciones pasivas.
Decisión
Separar acciones requeridas en una superficie dedicada y de alta prioridad.
Por qué
La claridad de acción es parte de la confiabilidad del producto operativo.
Problema
Un solo modelo de progreso no representaba envíos divididos.
Decisión
Soportar resumen a nivel orden más tracking por contenedor.
Por qué
La precisión importa más que la simplicidad visual cuando los envíos divergen.
Problema
Datos comerciales, operativos y logísticos vivían en sistemas distintos.
Decisión
Agrupar información por intención del buyer: overview, productos, pagos, producción, envío, entrega, docs.
Por qué
Coincide con cómo preguntan los buyers y reduce reconstrucción cognitiva.
Iteraciones y trade-offs
Exploración y discusiones de producto, sin user testing validado.
Durante la exploración, varias tensiones definieron la dirección.
Tensión
Timeline completa vs. timeline simplificada
Tensión
Todos los subestados vs. solo el subestado actual
Tensión
Página única vs. secciones expandibles
Tensión
Tracking a nivel orden vs. contenedor
Tensión
Lenguaje operativo vs. lenguaje comprensible para buyers
Iteraciones de wireframes (preview conceptual)
Más proyectos
B2B • Marketplaces • SaaS / herramientas de gestión
Diseñando el flujo que convierte campañas y postulaciones en colaboraciones
Campaña en vivo, postulaciones entrando, creador por elegir. Diseñé el puente entre marca y creador sin perder contexto hasta colaborar.
Fintech
Diseñando claridad para cartera, posiciones, movimientos y operatoria financiera
Plataforma white label de trading y cartera para agentes de bolsa. Pantallas densas donde claridad y operatoria tenían que convivir.