Cúnico | Diseño Cúnico | Diseño
  • About Us
  • Portfolio
  • Blog
  • Contact
Steel-WayCaso de estudio · Cúnico
Portal de vendedores

Catálogo y pedidos online

Un portal web que le da autonomía a una red de distribuidores. El vendedor ve el catálogo, hace pedidos y consulta su cuenta corriente, y todo se apoya en Milo Software, el sistema de gestión del cliente.

Cliente
Steel-Way
Rol
UX research, UX/UI y Design System
Año
2026
Plataforma
Web responsive, mobile y desktop
Cuenta corriente en mobile

Catálogo en desktop

Catálogo en mobile

Contexto y desafío

Un canal nuevo para vender mejor

El contexto

Steel-Way suma un sistema online de catálogo y pedidos que complementa su venta directa y suma a los distribuidores independientes. Hasta ahora esos vendedores no cargaban sus pedidos en ningún sistema: se comunicaban por fuera y consultaban con el equipo administrativo.

El desafío

Diseñar un portal web simple para el vendedor, donde pueda ver el catálogo, hacer pedidos y consultar su cuenta corriente. Y hacerlo sobre Milo Software, el sistema de gestión que el cliente ya usa para stock, precios y facturación.

Research

Entender qué necesita el vendedor

  • Reuniones quincenales con el cliente y con el equipo técnico de Milo Software durante 3 meses.
  • Benchmark de modelos de venta indirecta: cómo otras marcas de consumo venden, capacitan y gestionan a sus revendedores.
  • Definición de dos roles: vendedor y administrador.
  • Mapa de casos de uso: qué se hace en el portal y qué queda en Milo Software.
  • Prototipo ajustado en rondas con el cliente.

En el portal

  • Ver el catálogo
  • Armar y confirmar pedidos
  • Consultar la cuenta corriente
  • Pagar cuotas con link de pago
  • Seguir el estado de cada pedido

En Milo Software

  • Stock
  • Precios y descuentos
  • Altas de clientes y vendedores
  • Facturación
  • Registro de pagos
Diseño por flujo

Cuatro etapas, un recorrido

Etapa 1 · Alta

Del alta al primer acceso

El alta del vendedor se gestiona internamente en Milo Software. El portal empieza cuando el vendedor accede.

  • Con el alta hecha, el vendedor ingresa con su usuario y contraseña.
  • Ve el catálogo con los precios de su lista.

Ingreso en desktop

Ingreso en mobile
Etapa 2 · Pedido

Pedir en pocos pasos

Código o nombre, cantidad y listo. Precio, descuento y condición de venta llegan desde Milo Software.

  • Catálogo con carga progresiva de 15 a 20 productos y el buscador primero.
  • Destinatario y transporte en campos propios, no mezclados con las observaciones.
  • Forma de pago a la vista: contado o cuotas.

Revisar pedido en desktop

Revisar pedido en mobile
Etapa 3 · Pago

Cada cuota, su link

El vendedor ve saldo, vencimientos y cuotas, y paga con un link de Mercado Pago.

  • El link vence a las 24 horas y se avisa antes de generarlo. Se acortó para evitar links vencidos.
  • Doble entrada: del pedido a su deuda, y de cada movimiento a su pedido.
  • Anexar comprobante no marca el pago. La cuota sigue pendiente hasta que Milo Software lo confirma.

Link de pago en desktop

Link de pago en mobile
Etapa 4 · Seguimiento y perfil

Saber dónde está el pedido

Lista de pedidos por estado, con detalle de entrega y código de seguimiento.

  • Repetir pedido carga el carrito con precios actualizados y deja revisar antes de confirmar.
  • Los datos del perfil no se editan solos: el vendedor pide el cambio y lo gestiona el administrador.

Detalle de pedido en desktop

Mis pedidos en mobile
Ver el diagrama completo
VendedorAdministradorMilo Software1 · Alta2 · Pedido3 · Pago4 · Seguimiento y perfilIngresa al portalArma el pedido(código y cantidad)Revisa y confirma(pago, transporte)Consulta cuentacorrientePaga con link(Mercado Pago)Sigue el estadode su pedidoPide cambiode datosDa de altaal vendedorAprueba, despacha ycarga el seguimientoActualiza los datosdel vendedorCliente creadocon su lista de preciosRegistra la notade pedidoRegistra el pagoy marca la cuotaEstado y códigode seguimientoDatos del vendedoractualizadosconsulta precio y descuentoMercado Pago acredita el pagoAcción de la personaIntegración con Milo Software
Prototipo

Mobile primero, desktop completo

Una sola app responsive con dos layouts. Por debajo de 768 px: una columna, migas de pan y hojas inferiores. Desde 768 px: barra lateral, tablas y paneles.

IngresoInicioCatálogoRevisar pedidoMis pedidosDetalle de pedidoCuenta corrienteMi perfil

Inicio en desktop

Inicio en mobile
Detalle de pedido en mobile
Design System

Un solo criterio para cada pantalla

Tokens, tipografía y componentes pensados para que el equipo de desarrollo los reutilice en React y la app pueda crecer.

Bordó#A3121C

Bordó hover#8A0F18

Texto#2B1D1A

Texto secundario#6B5650

Borde de card#E5D6CC

Superficie#FBF4EF

Fondo de página#F4EBE4

Tipografía

Catálogo
Figtree para toda la interfaz

Barlow Condensed en mayúsculas para los títulos de pantalla. Escala distinta para mobile y desktop.

Componentes

Generar pedidoRepetirCancelar pedidoPendiente−2+

Más de 20 componentes entre botones, campos, tablas, hojas inferiores, modales y estados del sistema.

Todo lo interactivo es bordó

Botones, links, pestañas y controles se reconocen por un solo color.

Los estados son neutros

Pendiente, enviado o recibido no usan rojo. Los errores se resuelven con texto neutro y la acción en bordó.

Entrega

Listo para conectar

8pantallas en 2 layouts, mobile y desktop
20+componentes documentados, con checklist de accesibilidad
1capa de servicios lista para conectarse con Milo Software