Rediseño y desarrollo del e-commerce
Frikko es una marca líder en México, especializada en productos de aire acondicionado. El proyecto requirió un rediseño visual completo y una reestructuración profunda del catálogo de productos para mejorar la experiencia del usuario y la gestión interna de la información de los productos.
Benchmark de la competencia
Analicé directamente los sitios de la competencia en el sector de electrónica y línea blanca. Identifiqué áreas de oportunidad y pero también mejores prácticas para presentar los productos y su información técnica de forma más limpia y accesible.
Wireframes y arquitectura de la Información
En mis primeras propuestas reorganicé lógica e intuitivamente la manera en cómo se navegaba a través de los productos. Para esto, tracé wireframes priorizando la jerarquía visual y la reducción de fricción en la ruta de compra del usuario.
Posteriormente fui avanzando a un diseño más hi-fidelity. Creé design tokens, variables de Figma y algunos componentes esenciales para pasar al desarrollo de forma fácil.
Desarrollo en WordPress
Traducción exacta del diseño en Figma utilizando Elementor Pro y conectando todo con el back-end de cada producto. Además de CSS personalizado para llevar los límites de Elementor más allá: desarrollé componentes modulares reutilizables e implementé tipografía fluida utilizando CSS clamp() para garantizar una adaptabilidad perfecta en cualquier resolución.
El principal reto
La etapa de desarrollo fue tardada por que el catálogo carecía de información en el backend (todo estaba en el frontend). Tuve que reordenar y mover toda la información como documentos descargables, tablas, etc. del frontend al backend, para poder implementar el rediseño sin perder la información en el proceso.
Arquitectura de Datos
Se implementó una estructura robusta con ACF Pro para gestionar las especificaciones dinámicas de los equipos de aire acondicionado, incluyendo tablas comparativas automatizadas, galerías de video y módulos de descarga para fichas técnicas. El uso de ACF Pro me permitió usar un sólo diseño que se ajustara a cualquier producto, así que el frontend dinámicamente mostraba o escondía información dependiendo de los datos del producto.
Control de Calidad (QA) y Mejora Continua:
Ejecución de pruebas de estrés visual y funcional, usando herramientas como PageSpeed Insights.
Apliqué una optimización estricta de assets, carga de scripts y reducción del DOM. Sobre todo, hice algunos componentes con CSS en vez de usar los de Elementor para evitar cargar scripts y mejorar el rendimiento en móviles.
Evolución y Rebranding en 2026
Este año la marca introdujo una nueva campaña publicitaria lo que exigió una actualización en los design tokens y demás assets de la identidad.
Integré este nuevo lenguaje gráfico en la interfaz existente. Gracias a la escalabilidad de los design tokens y la modularidad de los componentes en Elementor, el rebranding se aplicó de manera transversal sin destruir la arquitectura de la información original ni penalizar las métricas de rendimiento (PageSpeed) que ya se habían asegurado.
