E-commerce · Diseño UI · Moda

Ambición de marca dentro de
las restricciones de plataforma.

Rediseño completo de la plataforma e-commerce de moda de XTI — equilibrando la ambición de marca con las restricciones reales de una migración a Magento, informado por análisis competitivo, testing de arquitectura de información y datos de comportamiento de Hotjar.

Flat 101 E-commerce Moda 2021 — 2023
ClienteXTI Store
AgenciaFlat 101
Mi rolDiseñador UX / UI
Período2021 — 2023
AlcanceRediseño E-commerce · AI · Diseño UI
Contexto

Un retailer de moda nacional migrando de plataforma

XTI es una marca española de calzado y moda con presencia retail nacional y una operación digital directa al consumidor significativa. El rediseño se planificó para coincidir con una migración de plataforma a Magento — lo que significaba que el trabajo de diseño tenía que operar dentro de las restricciones de lo que Magento podía entregar, no sobre un lienzo técnico ideal.

Este es un reto común y subestimado en el diseño e-commerce: la plataforma sobre la que estás construyendo no es neutra. Su modelo de componentes, su estructura de URL, su lógica de filtrado — todo esto da forma a lo que es posible en el UX antes de que se tome una sola decisión de diseño. Entender esas restricciones desde el principio es esencial para entregar algo que realmente pueda construirse.

Investigación & discovery

Datos de comportamiento primero

La fase de discovery utilizó grabaciones de sesiones Hotjar, mapas de calor y análisis de funnel del sitio existente — junto a un análisis competitivo estructurado de experiencias e-commerce de moda comparables en un nivel de mercado similar. El objetivo era entender dónde la experiencia existente estaba perdiendo usuarios y por qué, antes de proponer cambios.

El testing de arquitectura de información también fue parte del proceso: ejercicios de card sorting y tree testing para validar la estructura de categorías y navegación propuesta antes de comprometerse con el diseño de alta fidelidad. Vale la pena hacerlo para cualquier rediseño e-commerce con catálogo amplio — los problemas de AI descubiertos en testing son mucho más baratos de resolver que los problemas de AI descubiertos en datos de usuarios reales.

Analytics de ComportamientoScrollmaps Hotjar &abandonos en checkout Auditoría de Fricción UXRevisión heurística expertadel funnel legacy Objetivos de StakeholdersAlineación de marca &objetivos de conversión NÚCLEO DE RESTRICCIÓN TÉCNICA Magento 2 Core · Esquema de checkout OOB · APIs nativas de pedidos e inventario · Plantilla rígida y segura · Reglas de codificación performance-first ✓ FILTRADO POR VIABILIDAD Checkout Simplificado5 pasos complejosa 3 conformes con esquema Formularios ResponsiveAutorellenado & error inlinepara cero fricción Librería UI ConformeSistema visual validadoalineado al alcance del sprint
Restricciones mapeadas primero. Múltiples entradas de investigación se filtran a través de la restricción de plataforma — el briefing de diseño se convirtió en: ¿cuál es el mejor UX posible dentro de lo que realmente puede construirse?
Diseño

Equilibrando marca y conversión

El diseño e-commerce de moda implica una tensión que no existe del mismo modo en otros sectores: la marca quiere presencia editorial, impacto visual y una sensación de aspiración. El argumento de conversión defiende la claridad, imágenes de producto prominentes y caminos de compra sin fricción. Las mejores experiencias de moda e-commerce sostienen ambos — pero requiere decisiones deliberadas sobre dónde la expresión de marca se gana su espacio y dónde cede a la función.

Para XTI, las decisiones de diseño se centraron en la página de listado de productos y la página de detalle de producto — las dos etapas de mayor tráfico y mayor abandono en cualquier funnel de moda. El UX de filtrado y ordenación, la presentación de imágenes de producto, la selección de talla y la interacción de añadir al carrito se rediseñaron con los datos de conversión como medida de éxito principal.

Aprendizajes

Las restricciones de plataforma son un briefing de diseño, no un obstáculo

La experiencia de diseñar dentro de una restricción específica de plataforma — conocer qué es posible y qué no antes de empezar — es valiosa de una manera que no es obvia hasta que lo has hecho. Elimina una gran categoría de trabajo de diseño desperdiciado: la solución elegante que no puede construirse, el patrón de interacción que la plataforma no soporta.

También agudiza el problema creativo. La pregunta pasa de "¿cuál es el UX ideal para esto?" a "¿cuál es el mejor UX posible dentro de estas restricciones?" — que es, en la mayoría de los contextos del mundo real, la pregunta más útil a la que responder.

Los datos de rendimiento específicos de este encargo están sujetos a NDA.