Asumí el desarrollo integral de HAPI, una marca de alimentación infantil que utiliza tecnología HPP (Alta Presión en Frío) para romper con los estándares industriales. El objetivo del proyecto era claro: materializar un diseño de alta fidelidad proporcionado por Blouandrooi en una tienda online robusta. Mi enfoque se centró en construir una arquitectura «Update-Proof» en Shopify, permitiendo que la marca crezca y actualice su tema base sin comprometer las personalizaciones avanzadas que inyecté en el código. El scope técnico abarcó desde el desarrollo Liquid a medida hasta la integración de un ecosistema de marketing automatizado con Klaviyo.
Este proyecto no ha sido una simple instalación de tema; se ha realizado una ingeniería de software aplicada al retail. Coordiné la implementación de funcionalidades no nativas para gestionar un modelo de negocio complejo que combina venta directa y suscripciones recurrentes.
Diseño UI/UX
Diseño Web
Desarrollo E-Commerce
Identidad Visual Aplicada
Desarrollo web:
Albert Carmona
Diseño web:
Blou and Rooi
Para el proyecto de HAPI, mi responsabilidad principal fue actuar estrictamente como el puente técnico entre el cliente y una identidad de marca extremadamente potente. Todo el universo de diseño, incluyendo la selección tipográfica de Instrument Serif para titulares e IBM Plex Sans para cuerpos, así como la paleta cromática dinámica (Coral, Fresh, Sky), vino completamente definido, cerrado y aprobado por la agencia de branding Blou and Rooi. Mi rol no consistió en diseñar o alterar estos elementos, sino en ejecutar una implementación técnica impecable que respetara al milímetro la frescura y honestidad visual del proyecto original dentro del entorno de Shopify.
Desarrollé un UI Kit a medida en la plataforma que garantiza que cada botón, contenedor y espaciado replique con absoluta fidelidad las guías de estilo offline entregadas por la agencia. Este enfoque de desarrollo me permitió asegurar una consistencia visual rigurosa en todo el Customer Journey, traduciendo layouts complejos a código limpio sin diluir la fuerza de la marca en las limitaciones habituales de las plantillas comerciales. El resultado es una interfaz pixel-perfect que funciona como una extensión exacta del trabajo estratégico de Blou and Rooi, proyectando una estética limpia, moderna y marcadamente profesional.
Diseñé e implementé una arquitectura técnica avanzada utilizando Custom Code Blocks y Dynamic Classes para superar las limitaciones estructurales de Shopify. En lugar de realizar modificaciones intrusivas en el núcleo del tema (lo cual impediría actualizaciones futuras), desarrollé un sistema donde el código personalizado se inyecta dinámicamente mediante JavaScript. Utilizando selectores de proximidad como .c-custom-section, logré que cada bloque de diseño específico esté vinculado a su funcionalidad sin depender de los IDs internos de Shopify, los cuales suelen cambiar drásticamente entre versiones.
Esta metodología de desarrollo permite una resiliencia total del sitio ante actualizaciones del sistema. En la Home Page, gestioné la complejidad visual duplicando estructuras específicas para Desktop y Mobile, optimizando cada píxel sin penalizar la velocidad de carga. Esta solución técnica garantiza que el cliente tenga total libertad para reordenar bloques en el editor visual de Shopify mientras yo mantengo el control absoluto sobre la lógica de estilos y scripts, logrando un equilibrio perfecto entre flexibilidad editorial y rigor técnico.
Para materializar la estructura de contenidos requerida por la marca sin comprometer la flexibilidad del editor, desarrollé un conjunto de archivos .liquid programados desde cero. Entre ellos, implementé el componente avanzado hapi-testimonial-slider-pro.liquid, concebido específicamente para dar salida a un diseño de testimonios muy concreto y fluido. También programé el archivo hapi-product-features.liquid, un módulo estructurado que sitúa la imagen del producto en el centro para desplegar textos perimetrales interactivos que resaltan sus beneficios nutricionales y valores de marca de forma instantánea y visual.
Adicionalmente, desarrollé el componente hapi-section-sidebar.liquid enfocado a optimizar la arquitectura de la página de preguntas frecuentes (FAQs). Esta sección utiliza un sistema de acordeones dinámicos que distribuye los bloques de consultas a la derecha mientras mantiene un menú lateral de navegación por apartados a la izquierda, facilitando una lectura limpia y organizada. Cada una de estas secciones personalizadas fue integrada de manera nativa en el panel de administración de Shopify, permitiendo al cliente gestionar y actualizar los contenidos de forma autónoma y sin necesidad de tocar una sola línea de código en el futuro.
Configuré e integré una infraestructura de Marketing Automation profunda utilizando Klaviyo, conectando cada punto de contacto de la web con una estrategia de datos sólida. Diseñé flujos complejos que incluyen la Bienvenida y Diferenciación (educando sobre la tecnología HPP), recuperación de Carritos Abandonados con recordatorios dinámicos y ecuencias de post-compra. No me limité a la conexión técnica; personalicé cada plantilla de email para que fuera una extensión exacta de la web, manteniendo la fidelidad visual que la marca requería en cada comunicación.
Desarrollé una lógica de segmentación avanzada basada en el comportamiento del usuario y las etapas de crecimiento de los bebés. Gracias a la integración de datos entre Shopify y Klaviyo, la marca puede enviar mensajes hiper-personalizados que aumentan el LTV (Lifetime Value). El sistema de suscripción también está vinculado a estos flujos, notificando automáticamente sobre renovaciones o pausas, lo que reduce drásticamente el churn y posiciona a HAPI como un servicio conveniente y confiable para las familias modernas.
