Recreación con los textos y el orden reales del sitio. Abrilo para recorrerlo completo.
BASE Córdoba
Catálogo para una mayorista de herramientas, riego, repuestos y química automotor. El comercio arma el pedido, completa sus datos y lo envía por WhatsApp, donde un vendedor confirma precio y stock.
- Cliente
- Mayorista de Córdoba (cliente real)
- Mi rol
- Investigación, branding, textos, decisiones de diseño, inclusión, planilla de precios, métricas y mantenimiento diario
- Duración
- 2 meses
- Hoy
- Publicado y en uso, con pedidos reales registrados.
- Mantenimiento
- Administro la planilla de Google Sheets del catálogo (precios, productos y promos). Se lo ofrecí al cliente y aceptó.
- Resultado
- Pedidos más ordenados, imagen más profesional ante sus clientes y menos tiempo tomando pedidos a mano.
Problema e investigación
La mayorista tomaba pedidos de forma oral, en papel y de boca en boca, con poco uso de tecnología. Hablé con el dueño original y con el actual, escuché cómo trabajaban y observé sus anotaciones y planillas. El pedido: un e-commerce gratuito, confiable y atractivo para comercios y revendedores, con precio fijo por volumen y mínimo de compra.
Decisiones de diseño
- Mínimo de compra de 6 unidades mezcladas o 1 bulto, con dos selectores por producto. El envío se bloquea hasta llegar al mínimo.
- Catálogo editable desde una planilla de Google Sheets publicada como CSV: 100 productos con código y 99 fotos, sin tocar código.
- Facturación según la condición frente al IVA, con botones de ayuda "?" en los campos fiscales, y pedido listo por WhatsApp.
- Pensado para celular: botones de 48 px con letra de 16 px, filtros que no invaden la pantalla y el gesto "atrás" cierra la foto o el pedido en vez de sacarte del sitio.
- Métricas anónimas propias (búsquedas, filtros, productos agregados y clics en WhatsApp) registradas en una planilla de Google.
- Panel de accesibilidad que surgió de pruebas con usuarios y familiares: tamaño de texto, espaciado, enlaces subrayados, movimiento reducido y cursor grande. Basado en WCAG 2.2 AA (autoevaluación), con declaración de accesibilidad.
Cómo lo construí con IA, paso a paso
- Brief. Definí el público (comercios y revendedores), el precio por volumen y el mínimo de compra.
- Dirección visual con el cliente. Partí de la paleta que ellos sugirieron y la mejoré a su gusto con la regla 70/25/5: probamos un acento verdoso, tres rojos y, por pedido del cliente, tres verdes. Quedó el esmeralda
#0F7B4A. - Catálogo real. Partí de su planilla (82 y después 100 artículos), definí las categorías, creé códigos para organizar cada producto, investigué y conseguí la imagen de cada uno, y lo conecté al sitio.
- Reglas de negocio. Mínimo de compra, carrito que se guarda, datos de entrega y facturación (CUIT, condición frente al IVA, razón social).
- Textos. Tono cordial con voseo y mensajes de WhatsApp predefinidos para cada punto de contacto.
- Celular y fotos. Filtros, botones más grandes, "Quitar" destacado en el carrito, miniaturas y foto ampliada.
- Medición y promos. Métricas anónimas, promociones desde la planilla (12 llevás 13, 5 llevás 6) y lista de precios oficial en PDF.
- Versión ampliada. Envíos, quiénes somos, preguntas frecuentes y accesibilidad.
- Iteración constante. Cada avance lo revisé con el cliente: corregí errores chicos, ajusté textos y sumé lo que pedían.
Lo que aprendí
Lo que más me costó fue la distribución de las imágenes en celular. Hoy definiría desde el inicio un formato y una proporción fijos para todas las fotos de producto, y diseñaría primero la versión móvil (mobile first). También fue un desafío lograr un sitio fluido con criterios de inclusión y trabajar con las planillas de precios de la empresa. Trabajé con Claude como compañero de equipo: iteramos juntos con prompts y conversaciones, y las decisiones finales fueron mías.
