Diseño de un panel privado para que los clientes de un distribuidor de materiales eléctricos armen sus pedidos solos, con precios propios, stock real y descuentos por volumen, sin llamadas de ida y vuelta.
Cientos de clientes pedían entre miles de productos con una planilla. Funcionaba, pero cada pedido costaba tiempo, errores y llamadas.
Los pedidos llegaban por planillas de Excel que circulaban entre clientes. Eso exponía los precios a la competencia, no mostraba stock real y obligaba al back office a llamar para confirmar cada pedido.
La planilla circula y la competencia conoce la lista. Se pelea por precio cliente a cliente.
NegocioEl cliente pide lo que no hay y se entera recién en la llamada.
ClienteCantidades fuera de caja, SKUs mal copiados, filas corridas.
AmbosCada pedido requiere una o más llamadas antes de cerrarse.
Back officeLos pedidos viven en mails y planillas: difícil saber en qué estado están.
AmbosIniciales del proyecto
| SKU | Descripción | Precio | Caja | Cantidad | |
|---|---|---|---|---|---|
| 2 | PH-A60-09E27 | Lámpara LED A60 9W E27 | $2.180 | 10 | 60 |
| 3 | SE-A9F-2P20 | Termomagnética 2×20A | $18.950 | 6 | 13 1 |
| 4 | SC-FC-1OA 2 | Fotocélula 10A 220V | $4.350 | 12 | 24 |
| 5 | JZ-SM360-T | Sensor movimiento 360° | $12.400 | 1 | 5 |
| 6 | CB-S22-TD | Tapa toma doble S XXII | $1.120 | 20 | |
| 7 | ML-STR-5050 | Tira LED 5050 5m | $8.920 | 5 | 20 |
| 8 | SC-IC-3P-25 | Interconector 3P 25A | $640 | 50 | 30 3 |
Recreación ilustrativa a partir del análisis de planillas reales. Datos ficticios.
Dos fuentes, foco en dónde nacían los errores y qué necesitaba cada lado para cerrar un pedido sin llamar.
Con quienes recibían las planillas: qué revisaban, qué corregían y por qué llamaban a cada cliente.
Revisión de pedidos reales para clasificar errores frecuentes y patrones de compra.
En un contexto de devaluación de la moneda local, la lista se manejaba en dólares y los clientes convertían a mano cada pedido para saber cuánto iban a pagar.
→ Precios en USD con conversión automática al tipo de cambio del díaSi el cliente no puede reservar lo que está por llegar, compra en otro lado. Y sin la llegada garantizada, tampoco puede comprometerse con sus propios clientes ni cerrar acuerdos. Ver el stock futuro le permite planificar y vender con anticipación.
→ Pedidos en backorder sobre los próximos arribos de importaciónLos precios y descuentos por volumen viven en otra hoja. El cliente no ve cuánto le falta para pagar menos.
→ Escalas junto a la cantidad + aviso "te faltan X u."Muchas planillas son variaciones de la anterior. Pero cuando cambian los SKUs, la planilla vieja deja de servir y hay que armar una nueva desde cero.
→ Listas guardadas y pedido rápido por SKUPrimero el flujo y la estructura. Después, el componente más difícil: una card que tenía que decir mucho sin volverse ilegible.
El comprador mayorista piensa en marcas ("¿qué tenés de Philips?"). Un selector Marcas / Categorías mantiene las dos lógicas sin duplicar el menú.
Con cientos de productos por marca, el árbol se abre solo donde el usuario está. El resto queda contraído con su conteo.
Pedido del cliente: ambos siempre visibles. Esto se volvió el principal desafío de espacio (ver decisión 05).
Una card tenía que mostrar imagen, marca, SKU, color, atributos, specs, stock, precio, oferta, 3 escalas, cantidad mínima, selector de cantidad y CTA. Probamos tres estructuras y, sobre la elegida, iteramos cómo mostrar las escalas.
La interfaz resuelve el pedido del cliente. Las integraciones resuelven lo que pasa después: conectan el portal con los sistemas internos para que el back office deje de ser el puente manual entre ellos.
Al confirmarse, el pedido llega al sistema del depósito como orden de preparación, sin pasar por las manos del back office.
Los productos en tránsito al país se muestran con su fecha estimada de llegada y se pueden pedir en back order, para que el cliente planifique y reserve en lugar de preguntar.
Depósito, ventas y portal comparten un único dato de stock que se actualiza en todos a la vez, y suman el stock futuro: lo que ya está en camino con su fecha de arribo.
Minimalista y neutral: el color se reserva para lo que comunica algo (oferta, stock, escala, acción).
Prototipado directamente en HTML/CSS/JS para validar interacciones reales con el equipo y el cliente.
Front-end navegable: no conectado a datos reales.
El indicador más directo del problema original.
Objetivo: ↓Cantidades, SKUs o faltantes corregidos después del envío.
Objetivo: ↓Mide si el aviso "te faltan X u." cambia la decisión.
Objetivo: ↑