CMS de catálogo para proveedores

Contexto

Uno de los proveedores principales opera desde la India, con casi 12 horas de diferencia. Cada actualización de su catálogo (precios, presentaciones, vigencia de la información, disponibilidad) llegaba por correo y alguien la capturaba a mano en el ERP. Entre la diferencia horaria y la captura manual, un cambio podía tardar días.

Mientras tanto, los ejecutivos de venta cotizaban con información desactualizada: productos que ya estaban disponibles seguían apareciendo como descontinuados.

Para quién

Para un equipo que conoce sus productos mejor que nadie, trabaja en inglés y dependía de que alguien al otro lado del mundo capturara cada cambio. Y, de forma indirecta, para los ejecutivos que cotizan con lo que hay en el ERP.

La propuesta

En lugar de acelerar el ir y venir de correos, eliminarlo. Un portal donde el proveedor administra su propio catálogo y cada cambio llega al ERP automáticamente, sin intermediarios y sin depender de que los dos equipos coincidan en horario.

Mi rol

Lideré el diseño UX/UI en un equipo de dos personas durante tres meses: investigación, user flow, mapeo de datos, sistema de diseño, interfaces, prototipo y pruebas, hasta la salida a producción. La otra persona de diseño construyó las pantallas en las distintas resoluciones y mantuvo al día el sistema de diseño; yo revisaba todo antes de entregarlo.

Antes de las pantallas mapeé el flujo del proveedor y las familias de productos del catálogo, con la especificación de cada dato. Después diseñé cada pantalla en tres resoluciones, de 1366 a 2560 px, con sus estados de carga, error y búsqueda sin resultados.

La vigencia como idea central

En un catálogo de estándares de referencia, un producto con información vencida no se puede vender. Por eso el estado de cada producto organiza todo el portal: el catálogo se divide en vencidos, por vencer, en aprobación y descontinuados, y el inicio abre con lo que necesita atención.

Cada cambio deja rastro

La información la editan dos partes, el proveedor y el distribuidor. Para que nadie tenga que escribir un correo preguntando quién cambió qué, cada producto guarda un historial con autor, fecha, hora y huso horario, y el valor anterior junto al nuevo.

Detalle del producto

Ciprofloxacino, estándar primario

RS-1724-006 · CAS 85721-33-1

Vigente

Historial de cambios

TodosProveedorDistribuidor

1. DI

   Distribuidorcatalogo.mx16 ago 2026, 20:08 (UTC−6)

   Descripción

   Ciprofloxacina estándarCiprofloxacino, estándar primario

   Catálogo

   RS-1724-60RS-1724-006

2. PR

   Proveedorproveedor.ana16 ago 2026, 18:30 (UTC+5:30)

   Vigencia de la información

   01 jun 202630 jun 2027

3. PR

   Proveedorproveedor.luis15 ago 2026, 15:28 (UTC+5:30)

   Contenedor

   CajaBlíster

Alta de producto sin salir del catálogo

Agregar un producto abre un formulario sobre el catálogo, con los campos obligatorios marcados y los estados de carga, error y formulario incompleto ya diseñados. El proveedor no pierde el lugar donde estaba.

Pruebas

No era posible probar con el proveedor, así que hicimos pruebas simuladas con dos usuarios internos que tomaron su rol. Observamos dónde se atoraban al dar de alta un catálogo y dónde se perdían al navegar.

El hallazgo más importante fue el buscador. La primera versión buscaba dentro de filtros específicos, pero los usuarios esperaban algo como Google: escribir lo que sea y encontrarlo en todo el CMS. Lo rediseñamos como una búsqueda global sobre toda la base de datos. El resto fueron ajustes de navegación, interacción, color y traducción.

Un sistema de diseño para sumar proveedores

El portal se diseñó para un proveedor, pero con la idea de abrirlo a cualquiera. Por eso construí un sistema de diseño propio, versionado y con changelog, en una biblioteca de Figma separada del producto.

Está organizado con Atomic Design: fundamentos, 7 familias de átomos, 15 de moléculas y 15 de organismos. Suma 117 componentes y 599 variantes, porque cada componente incluye sus estados y no solo su versión ideal. Los colores viven en dos capas: 104 variables primitivas definen la paleta y 133 tokens semánticos le dan un rol a cada color, como color/background/button/primary-normal. Si un color cambia, cambia en un solo lugar.

variantes en 117 componentes

599variantes en 117 componentes

variables: 104 primitivas y 133 tokens

237variables: 104 primitivas y 133 tokens

íconos propios

46íconos propios

estilos tipográficos

38estilos tipográficos

Elige una cadena

Primitiva

color/ink/900

Token semántico

color/background/button/primary-normal

Componente

Agregar

Construir el sistema tomó tiempo al inicio de un proyecto de tres meses. Es también lo que hoy permite sumar proveedores sin rediseñar.

Resultado

Las actualizaciones dejaron de depender del horario: lo que el proveedor cambia se ve en el ERP al momento. Con el catálogo al día, los ejecutivos cotizan con información vigente y pueden recuperar ventas, como las de productos que pasan de descontinuados a disponibles.

La plataforma salió a producción con un proveedor y hoy la usan tres. Está lista para cualquier proveedor nuevo.

Lo que aprendí

Lo que funcionó. La prueba más valiosa fue la más simple: ver a alguien buscar un producto. De ahí salió el buscador global, el cambio más grande del proyecto.

Lo que haría distinto. Buscaría validar con el proveedor real desde el inicio, aunque fuera de forma asíncrona, con grabaciones o encuestas. Los ajustes de traducción aparecieron tarde y se habrían detectado antes.