Una tienda en línea más clara y autónoma para una marca de cosmética artesanal

Volviendo al Origen elabora cosmética sólida hecha a mano en Aguascalientes desde 2012. Su sitio ya tenía una identidad artesanal reconocible, pero la propuesta de valor tardaba en entenderse, varios elementos competían por atención y comprar requería demasiados pasos.

Además, buena parte de la atención era manual: las preguntas sobre envíos, formas de pago y el estado de cada pedido llegaban una por una por WhatsApp.

Redactamos una propuesta de 25 páginas: diagnóstico del sitio actual, una nueva página de inicio en ocho secciones, arquitectura de contenido, cuentas de cliente, un flujo de pedidos con seis estados operativos, un calendario de 22 semanas y la inversión.

También comparamos opciones reales de chat de atención, rastreo de envíos y pasarelas de pago en México, con precios y una recomendación para cada una, para que el cliente decidiera con información completa y sin costos externos sorpresa.

Para aprobar la experiencia antes de invertir en el desarrollo final, construimos un prototipo navegable con el catálogo real:

• Tienda con filtros sincronizados con la URL y fichas de producto con variantes.
• Carrito lateral con cupones y medidor de envío gratis.
• Checkout en dos pasos con envío o recolección en tienda, y pago con tarjeta, Mercado Pago, SPEI u OXXO.
• Rastreo de pedidos, cuentas de cliente con historial y direcciones, y un asistente que responde preguntas frecuentes.

• Next.js con App Router: las páginas de contenido se generan en el servidor y solo las partes interactivas envían JavaScript.
• Carrito, cuenta y pedidos con Zustand y persistencia local, cargados después de hidratar para que el HTML del servidor y el del navegador coincidan.
• Filtros de la tienda con la API de historial, sin recargar la página.
• Accesibilidad: navegación con teclado, foco atrapado en paneles, etiqueta en cada campo y contraste AA.
• 23 recorridos de compra probados con Playwright en escritorio y móvil.

El cliente puede recorrer la tienda completa en su teléfono y validar cada flujo antes de comprometerse con el desarrollo final. El prototipo también sirve como especificación: colores, tipografía, componentes y textos ya están definidos.