Skip to content
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.

E-commerce Moda
ClienteXTI Store
AgenciaFlat 101
Mi rolLead UX/UI Designer
Período2022 — 2025
AlcanceRediseño E-commerce · IA · 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 estudiando cómo los líderes de la categoría de moda como Zara y Adidas gestionan la navegación, el filtrado y la presentación de producto. El objetivo era entender dónde la experiencia existente de XTI 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 realizados en Optimal Workshop para validar la estructura de categorías y navegación propuesta antes de comprometerse con el diseño de alta fidelidad. Los problemas de IA descubiertos en testing son mucho más baratos de resolver que los problemas de IA descubiertos en datos de usuarios reales — especialmente en una migración a Magento donde los cambios estructurales post-lanzamiento tienen un coste de desarrollo significativo.

Listado de producto — sobre el pliegue: hero editorial de categoría y controles de ordenación
Listado de producto — mitad de scroll: chips de filtro y grid de producto
Listado de producto — scroll inferior: inserción editorial de marca a mitad de página
Listado de producto — scroll móvil — hero de categoría, chips de filtro y densidad de grid, inserción editorial a mitad de página. Tres pantallas de un solo scroll.
INVESTIGACIÓN Analytics de Comportamiento Scrollmaps Hotjar · abandonos en checkout Auditoría de Fricción UX Revisión heurística del funnel legacy Objetivos de Stakeholders Alineación de marca · objetivos de conversión RESTRICCIÓN TÉCNICA Magento 2 Core Checkout OOB · APIs nativas Plantilla de layout · reglas de rendimiento RESULTADOS DE DISEÑO Checkout Simplificado 5 pasos a 3 · conforme con esquema Formularios Responsive Autorellenado · error inline · cero fricción Librería UI Conforme Sistema visual alineado al sprint
Restricciones mapeadas primero. Las entradas de investigación se filtran a través de la restricción de plataforma — el briefing de diseño pasa a ser: ¿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.

La dirección creativa tomó referencias del editorial de moda — layouts limpios, espacio blanco generoso, jerarquía liderada por la tipografía y fotografía de producto con espacio para respirar. Ese registro era alcanzable dentro de las restricciones de Magento porque se basa en la contención más que en la complejidad técnica. La colaboración con desarrollo se integró desde el inicio: involucrar al equipo técnico desde el principio significó entender qué funcionaría dentro del modelo de plantillas de Magento y evitar patrones que requerirían desarrollo personalizado costoso.

Detalle de producto — sobre el pliegue: imagen de producto, precio y carrito sticky
Detalle de producto — mitad de scroll: selector de talla, colores y acordeones
Detalle de producto — scroll inferior: carrusel de productos similares y valoraciones
Detalle de producto — scroll móvil — hero de producto y carrito, selección de talla y color, productos similares y valoraciones. El punto de mayor abandono en el funnel.
Home Page Entrada de marca · tono editorial Categoría Estructura de navegación · testada con IA FOCO PRINCIPAL Listado de Producto UX de filtrado · densidad visual FOCO PRINCIPAL Detalle de Producto Añadir al carrito · selección de talla Carrito Reducción de fricción SIMPLIFICADO Checkout 5 pasos reducidos a 3
El rediseño concentró el esfuerzo en las etapas de mayor abandono — listado y detalle de producto. La expresión de marca tiene su espacio en la parte superior del funnel; las mecánicas de conversión toman el control desde el listado hacia abajo.
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.

Disponible

Tu problema más difícil
es un buen punto de partida.

Abierto a roles de product design senior y proyectos de consultoría selectivos — en inglés o español.