Date:
febrero 19, 2021
Empatía y Definición
Comprendiendo la esencia para trazar el rumbo
Objetivo inicial:
Karmele buscaba establecer su presencia digital mediante un sitio web con tienda en línea. El principal reto era crear un e-commerce funcional que permitiera la venta diaria de productos en cantidades limitadas, tanto en presentación individual como en cajas. Era clave que los pedidos pudieran programarse con al menos 24 o 48 horas de anticipación, integrando la gestión de entregas a domicilio, con rutas definidas y número limitado de espacios por día.
Necesidades claves del cliente:
- Vender productos dulces y salados por unidad o por caja.
- Mostrar disponibilidad diaria por producto en un calendario visual.
- Configurar entregas a domicilio con límite de espacios diarios (7 de lunes a viernes, 5 los sábados).
- Delimitar zona de entrega por código postal, con precios diferenciados según la zona ($60 o $90).
- Aceptar pagos en línea con tarjeta o PayPal.
- Registrar pedidos con anticipación mínima de 24h.
Preguntas clave:
- ¿Cuál es el objetivo principal del sitio web?
Construir un e-commerce para panadería artesanal con control de producción diaria, pedidos anticipados y entregas a domicilio programadas. - ¿Quién es el público objetivo?
Personas entre 20 y 50 años con perfil socioeconómico A/A+. Clientes con gusto por la panadería artesanal, masa madre y repostería de alta calidad. - ¿Qué tipo de contenido debe mostrar el sitio?
Catálogo de productos permanentes y de temporada, segmentado por categoría. Detalles de disponibilidad diaria y opciones de compra anticipada. - ¿Tienen branding previo o habrá que desarrollarlo?
El cliente ya contaba con identidad visual. Se proporcionaron archivos base pero no existía un manual. Se utilizó como base un template preseleccionado por el cliente (Le Truffe), al cual se le realizaron ajustes para integrar el material gráfico y mantener coherencia con sus campañas previas. - ¿Qué sitios web admiran o quieren tomar como referencia?
Principalmente el sitio de Marisa, por su limpieza visual y flujo de compra intuitivo. También se analizaron experiencias en línea de Paulette y OK Pastelerías. - ¿Qué dispositivos usan sus usuarios?
La mayoría de los usuarios navegan desde móvil, aunque el sitio fue optimizado para ambos dispositivos. - ¿Qué plataformas de contacto o venta usan actualmente?
Contacto a través de formularios dentro del sitio. Ventas mediante WooCommerce con pasarelas integradas de OpenPay y PayPal.
Contexto del cliente:
Karmele Repostería es una cafetería y panadería ubicada en Guadalajara, especializada en productos artesanales, elaborados con masa madre. Reconocida por su producto estrella, los “Karmelitos”, también ofrece muffins, panqués, tartas y opciones de desayuno. Su ambiente acogedor y su enfoque en ingredientes de calidad la han convertido en una referencia gourmet en la ciudad.
Análisis de competencia:
Se realizó un análisis funcional centrado en la experiencia de compra online, campos requeridos, presentación de productos y flujos de navegación en sitios como Marisa, Paulette y OK Pastelerías.
Buyer Personas identificados:
Mujer de 25 a 35 años, ingresos A+, interesada en productos gourmet para consumo propio o regalos.
Madres de 40 a 55 años, con hijos adolescentes, ingresos A+, que compran para ocasiones especiales o consumo familiar.
Definir – Enfocar los requerimientos
Delimitando el reto de diseño y priorizando funcionalidades
Objetivo general del proyecto:
Desarrollar un e-commerce personalizado que permita a Karmele vender productos de panadería y repostería con entregas planificadas y una producción limitada por día. Se requería una solución funcional que contemplara el control de disponibilidad, logística de entregas, registro del usuario, pasarelas de pago seguras y calendarización de pedidos.
Requerimientos principales:
- Estructura de tienda en línea basada en categorías clave: Karmelitos, Panadería dulce/salada, Tartas & Pasteles.
- Calendario para controlar producción diaria y permitir compras sólo con mínimo 24 horas de anticipación.
- Integración de calendario de entregas, con capacidad limitada por día (7 entregas de lunes a viernes y 5 los sábados).
- Filtrado y control de zonas de entrega según código postal (con tarifa diferenciada por zona).
- Checkout personalizado para capturar datos completos del cliente y mostrar opciones de entrega o recolección.
- Métodos de pago: OpenPay (tarjeta de crédito/débito) y PayPal.
- Validaciones en tiempo real para evitar pedidos fuera de rango, sin disponibilidad o fuera de tiempo de anticipación.
Elementos clave por tipo de sitio (e-commerce):
- Catálogo de productos, con imágenes atractivas y navegación intuitiva.
- Carrito de compras con opción para editar cantidades y ver totales dinámicos.
- Checkout personalizado, con validación por código postal y selector de fecha disponible para entrega.
- Pasarelas de pago seguras, mostrando opciones desde etapas tempranas del flujo.
- Calendario dinámico para selección de fecha de entrega y control de inventario diario.
Lista priorizada de funcionalidades:
- Catálogo por categorías + búsqueda interna
- Carrito de compras
- Checkout personalizado con validación de zona de entrega
- Calendario de producción y entregas
- Métodos de pago con OpenPay y PayPal
- Confirmación de pedido con detalle y correo automatizado
- Módulo de facturación en línea
- Formulario de feedback post-compra
Requerimientos técnicos y de integración:
- WooCommerce como base del e-commerce
- Plugins adicionales para:
- Calendario de disponibilidad por producto (stock diario)
- Selector de fecha en checkout con límite de espacios por día
- Cálculo de costos de envío por código postal
- Integración de OpenPay y PayPal
- Sitio completamente responsivo (mobile-first)
- Optimización para velocidad y SEO on-page
- Hosting gestionado con soporte para certificados SSL y backups diarios
Idear – Concepto y estructura
Explorando soluciones visuales y funcionales para una experiencia centrada en el usuario
Enfoque creativo y funcional:
El diseño para Karmele se centró en combinar una estética minimalista con una estructura clara e intuitiva. Se aprovechó el template “Le Truffe” como base visual por su estilo limpio y elegante, realizando ajustes para reflejar la personalidad de la marca. El contenido visual se construyó a partir de las fotografías de producto, del local y de sus campañas en redes, aportando calidez y coherencia con su presencia física.
La estructura del sitio fue diseñada pensando en facilitar la exploración del catálogo, segmentar productos de forma clara y ofrecer un proceso de compra sencillo, especialmente desde dispositivos móviles.
- Decisiones clave en la experiencia visual:El template se modificó para alinear la paleta cromática a un turquesa oscuro, reemplazando el naranja original.
- Se conservaron las tipografías originales (Butler Sans y Abel Sans) por su claridad y estilo elegante.
- Se diseñaron cajas de categoría en la tienda para facilitar el acceso directo a cada tipo de producto.
- Se eliminaron secciones decorativas innecesarias del template original, enfocando el diseño en la conversión y la claridad.
Arquitectura de información:
Se definió con base en las prioridades del cliente:
- Mostrar claramente las categorías y productos desde la página principal.
- Accesos visibles a facturación, términos y condiciones.
- Calendario de entrega visible en el checkout.
- Formulario de contacto simplificado, enfocado en resolución rápida de dudas.
User Flow principal:
- Inicio / Home
↓ - Tienda en línea
↓ - Listado de productos
↓ - Producto individual (ver disponibilidad y detalles)
↓ - Carrito de compras (resumen + botón “Finalizar compra”)
↓ - Checkout personalizado- Formulario con validación de zona y fecha- Selección de método de pago
↓ - Confirmación de compra + correo automático
Componentes UX/UI trabajados:
- Banners con promociones estacionales
- Cajas de categoría con filtros por producto
- Calendario dinámico (producción y entrega)
- Checkout con validaciones personalizadas
- Confirmación de pedido visual y funcional
Propuesta visual UX/UI inicial:
La propuesta fue presentada en forma directa sobre el entorno real de WordPress con WooCommerce, optimizando la estructura base del template. Se priorizó el flujo completo de compra, asegurando que cada paso fuera claro, fluido y confiable.
Prototipar – Dar forma al diseño final
Construyendo una experiencia funcional, visual y adaptable
Objetivo del prototipo:
Transformar la estrategia en un sitio funcional y navegable, aplicando las decisiones gráficas y estructurales definidas en las fases anteriores. Se priorizó la usabilidad, la adaptación a dispositivos móviles y la claridad en el proceso de compra, asegurando una experiencia confiable para el usuario final.
Componentes del prototipo:
- Diseño UI completo, adaptado a desktop y móvil.
- Contenido visual integrado, usando material fotográfico del cliente y su ambientación original.
- Checkout adaptado, con campos personalizados para entrega, selección de fecha y validaciones por código postal.
- Calendario de producción y entrega, visible en el flujo de compra.
- Interacciones funcionales, como el cálculo automático de envío según C.P. y stock limitado por día.
Herramientas y entorno:
El prototipo fue directamente implementado en el entorno real de WordPress + WooCommerce, sobre el template base, optimizando los recursos disponibles. No se realizó prototipado en Figma, ya que el cliente requería una entrega funcional desde la primera etapa.
Ajustes realizados en la implementación:
- Se eliminaron secciones no necesarias del template (como blog, banners de eventos, etc.).
- Se rediseñaron los campos de facturación y envío en el checkout para adaptarse al sistema de logística interna.
- Se insertaron módulos adicionales para controlar stock diario y espacios de entrega con anticipación mínima de 24h.
- El sitio se probó intensivamente en dispositivos móviles, considerando que más del 60% de las compras se realizan desde smartphones.
Entregables de esta fase:
- Sitio funcional en ambiente de pruebas (staging)
- Prototipo navegable con estructura final
- Calendario operativo para entregas y disponibilidad de producto
- Guía visual para mantenimiento del sitio y actualización de contenido
- Manual básico de uso para el cliente (gestión de pedidos y productos)
Evaluar y Entregar – Validar y publicar
Afinando detalles y asegurando una experiencia sólida antes del lanzamiento
Objetivo final:
Realizar pruebas exhaustivas, optimizar el rendimiento del sitio y validar que el sistema de compra cumpla con los flujos definidos. Asegurar la experiencia desde desktop y móvil, con un enfoque especial en tiempos de carga, claridad en el proceso de compra, y confianza durante el checkout.
Acciones realizadas durante esta fase:
- Pruebas de usabilidad internas:
Se probaron todos los flujos posibles de navegación y compra desde múltiples dispositivos (desktop, tablet y móvil). Se validó la correcta visualización del calendario de entrega, stock diario por producto y segmentación por código postal. - Optimización del sitio:
- Reducción de peso de imágenes sin perder calidad.
- Minificación de archivos CSS y JS.
- Optimización para velocidad con caché y compresión.
- Configuración de CDN en el servidor del cliente (cuando aplica).
- Validación de SEO on-page básico (titles, alt text, estructura jerárquica de encabezados).
- Pruebas de pasarelas de pago (sandbox):
Se realizaron simulaciones con OpenPay y PayPal para garantizar transacciones exitosas, errores controlados y redirecciones claras. - Pruebas de calendario y stock:
Se probaron escenarios de compra con 24h y 48h de anticipación, verificación de bloqueos fuera del rango permitido, y limitación de espacios por día. - Validación de entregas y zonas:
Se verificó el cálculo correcto de costos de envío según código postal ($60 / $90) y su integración en el checkout. - Integración de analítica:
Se instaló Google Analytics y eventos básicos para rastrear visitas, compras y abandonos de carrito. - Capacitación al cliente:
Se entregó un manual de administración con capturas de pantalla para:- Revisar y procesar pedidos
- Gestionar disponibilidad en calendario
- Editar zonas de entrega y precios
Entregables finales:
- Sitio publicado en hosting final con certificado SSL activo
- Manual de uso básico para administración de productos y pedidos
- Checklist de mantenimiento mensual sugerido
- Copia de seguridad completa del sitio antes de publicación
- Documentación técnica de integraciones y plugins usados
Resultados Destacados:
- +3,800 pedidos realizados en el periodo
Un flujo constante de ventas, reflejo de un sitio intuitivo y confiable. - Más de 10,000 artículos vendidos
Con un promedio de 2.6 productos por pedido, lo que indica compras múltiples por visita y buena estrategia de cross-selling. - Altísima satisfacción del cliente
Solo 0.05% de los pedidos fueron reembolsados, demostrando que la experiencia de compra cumple expectativas. - Consistencia mensual en ventas
El ingreso mensual promedio se mantuvo estable a lo largo del tiempo, clave para la sostenibilidad del negocio. - Recuperación de costos logísticos
Se implementó una estrategia de cobro de envío que permitió cubrir el gasto logístico sin sacrificar la conversión. - Sin dependencia de descuentos o promociones
0% de ventas involucraron cupones, lo que refleja la fortaleza de marca y la percepción de valor pleno en los productos.
Conclusión:
Gracias a un diseño web orientado a la conversión, claridad en la navegación y enfoque en la experiencia del usuario, Karmele consolidó su tienda online como una plataforma estable, rentable y con proyección de crecimiento, logrando resultados sobresalientes sin necesidad de recurrir a promociones agresivas.
