Un catálogo digital para clientes mayores que compran a mayoreo
> EN BREVE_
Diseñé desde cero y desarrollé el sitio de mayoreo de Tres Distribuciones. Lo pensé como un catálogo digital y no como una tienda en línea moderna, porque la mayoría de sus clientes son personas mayores con poca experiencia con computadoras. Hoy entre el 70 % y el 80 % de los pedidos se hacen por el sitio.
Ficha del proyecto
- Mi rol
- UX/UI + Frontend
- Empresa
- Tres Distribuciones
- Estado
- ● En línea
- Figma
- React
El problema
- Los vendedores compartían un PDF larguísimo con todos los productos, y muchas veces no podían compartirlo.
- Clientes de otros estados no podían acudir a la bodega a ver los productos, y los vendedores pasaban mucho tiempo al teléfono con un solo cliente explicándole cómo funcionaba todo y describiéndole los productos.
- La mayoría de los clientes son personas mayores con poca experiencia con computadoras. No necesitaban una tienda en línea moderna ni un sitio complejo.
Qué hice
- Hablé con los vendedores y con los clientes que visitaban la bodega para entender cómo compraban y qué les costaba trabajo.
- Diseñé en Figma, desde cero, un catálogo digital: inicio con productos, tarjetas con botón de agregar, categorías limpias y un carrito como ticket.
- Lo desarrollé en React yo solo, con un compañero que hizo las APIs del backend.
Decisiones de diseño
- Agregar desde la misma tarjeta: un botón de agregar y, después, aparecen [ − ] y [ + ] ahí mismo para elegir la cantidad.
- SKU visible en el catálogo y en cada producto, para que los vendedores identifiquen más rápido lo que pide el cliente.
- Vista de producto limpia: imágenes grandes, título, descripción, campo de cantidad y botón de agregar. Nada más.
- Categorías limpias, con varias subcategorías dentro de la página de cada categoría.
Lo que mejoró
- Entre el 70 % y el 80 % de los pedidos se hacen por el sitio
- Los vendedores dejaron de enviar el PDF
- El sitio atrajo nuevos clientes gracias a la publicidad
- Los clientes más leales siguen yendo a la bodega
Lo que aprendí
Optimizar espacios y tamaños. Al ser clientes mayores, varios me dijeron que les costaba ver las letras pequeñas. Por eso dejé solo blanco, negro y los colores de alerta, sin animaciones y con tipografías grandes. Aquí, quitar fue la mejor decisión de diseño.
Hablar con las personas cambia el diseño. Conversar con los vendedores y con los clientes que visitaban la bodega me mostró qué no había que complicar.
Lo que mejoraría. En el carrito falta mostrar el SKU, que los vendedores usan para identificar productos, y el precio debería verse más grande.
Dos sitios, dos públicos. Tienda Venus vende al público general con compra en línea; este es un catálogo sin pagos para mayoristas. Adaptar el diseño a cada público importó más que repetir una fórmula.
