Skip to content
← TrabajoTateossian

Rediseño e-commerce · Londres

Rediseñando el lujo
para la era móvil

Tateossian — una de las principales marcas de accesorios masculinos de Londres — necesitaba reconstruir su experiencia e-commerce desde cero. El briefing era claro: mobile-first, jerarquía más limpia, y un diseño que dejara hablar al producto.

Mobile-firstEnfoque de diseño
GlobalInvestigación retail
End-to-endMarca y UX
Rol
Branding · Identidad · Web Design · UX/UI
Cliente
Tateossian London
Foco
E-commerce · Mobile-first
Leer el caso de estudio

Tres cosas eran genuinamente innegociables — y estaban definidas antes de abrir Figma. La navegación tenía que funcionar para alguien que no conocía ya el catálogo de productos. El móvil tenía que sentirse como una experiencia considerada, no como una versión reducida a la que no se le había prestado atención. Y el diseño tenía que justificar el precio — al nivel de precios de Tateossian, el ruido visual es un problema de confianza, no una cuestión estética.

El rediseño tenía tres objetivos no negociables: mejorar la experiencia y el flujo de usuario, establecer una jerarquía visual más limpia, y entregar una experiencia que funcionara de forma impecable en móvil — donde una proporción creciente de sus clientes estaba navegando y comprando.

Mobile-first, no mobile-adaptado

El antiguo sitio estaba diseñado para escritorio y comprimido al móvil. Cada interacción — navegar, filtrar, comprar — necesitaba repensarse desde una perspectiva de pantalla pequeña, desde el principio.

Lujo sin ruido visual

Las marcas premium necesitan espacio para respirar. El diseño existente era recargado: demasiados elementos en competencia, tipografía inconsistente y fotografía de producto sin espacio para destacar.

Complejidad retail global

Tateossian vende en boutiques de varios países. La plataforma necesitaba gestionar divisas, disponibilidad regional y necesidades de retailers — sin añadir complejidad al cliente final.

Conversión en todo el funnel

Desde el descubrimiento de producto hasta el checkout, cada paso tenía fricción que perdía clientes. El recorrido necesitaba simplificarse radicalmente sin perder la calidad editorial de la marca.

El camino más rápido al briefing correcto fue hablar con las personas más cercanas a los clientes. Los managers de retail de cuatro regiones respondían cada día las mismas preguntas de los clientes — preguntas que el sitio web debería haber respondido. Cuatro hallazgos consistentes dieron forma a cada decisión de diseño posterior.

A partir de esto construimos un customer journey y desarrollamos personas que se presentaron y validaron con el equipo. Estos ejercicios formaron la base para la ideación de funcionalidades y la priorización — asegurándonos de resolver problemas reales, no asumidos.

Método

Entrevistas con managers de retail

Conversaciones en profundidad con managers de boutiques de Tateossian en todo el mundo revelaron patrones en el comportamiento del cliente, preguntas frecuentes y puntos de fricción que el sitio no resolvía.

Método

Mapeado del customer journey

Mapeamos el recorrido online completo — desde la primera visita hasta el descubrimiento de producto, la selección y el checkout — identificando cada punto de abandono o contacto innecesario con soporte.

Hallazgo

El móvil era el canal mayoritario

Los managers de retail confirmaron lo que sugerían las analíticas: la mayoría de clientes navegaba en tablet o móvil, pero la experiencia en esos dispositivos era inadecuada. Esto hizo la decisión mobile-first innegociable.

Hallazgo

El descubrimiento de producto era el mayor abandono

Los usuarios no podían navegar eficientemente el extenso catálogo de Tateossian. El mega-menú y el sistema de filtros fueron identificados como las áreas de mayor prioridad para mejorar la conversión.

Tres cosas tenían que ser no negociables. No como preferencias estéticas — como restricciones duras que apliqué a cada decisión de layout e interacción, desde la arquitectura de navegación hasta el detalle más pequeño de la tarjeta de producto. — desde la arquitectura de navegación hasta los detalles de cada componente.

01

Mobile first — no mobile last

Cada layout, patrón de navegación e interacción se diseñó primero para pantalla pequeña. El escritorio fue una mejora de la experiencia móvil, no al revés. Esto significó replantear completamente el mega-menú, los filtros, las rejillas de producto y el flujo de checkout.

Llevó a: nuevo sistema de navegación móvil, navegación de producto por gestos, CTAs en zona de alcance del pulgar
02

La limpieza como señal de marca

Para una marca de lujo, el espacio en blanco no es espacio desperdiciado — es una señal de calidad. Eliminamos el ruido visual sin piedad: menos tipografías, espaciado consistente, una paleta oscura y contenida que hacía destacar la fotografía de producto en lugar de competir con la interfaz.

Llevó a: layout hero editorial, navegación simplificada, imágenes de producto a sangre
03

Jerarquía al servicio del comprador

El sitio anterior hacía que cada producto y categoría pareciera igual de importante — lo que significaba que nada destacaba. Establecimos una jerarquía clara: productos hero, colecciones destacadas, luego el catálogo completo — guiando a los usuarios por una experiencia curada en lugar de abrumarlos con opciones desde el primer scroll.

Llevó a: zonas estructuradas en homepage, divulgación progresiva en navegación, landing pages de colección curadas

Desktop

Rediseñando con claridad y lujo

Una experiencia limpia y jerarquizada que deja que la fotografía de producto hable — en cualquier dispositivo.

Tateossian homepage redesign

Homepage — hero editorial con carrusel de producto y navegación destacada

Collections mega-menu

Colecciones con navegación de mega-menú

Product detail page

Ficha de producto — layout limpio, flujo de compra claro

Mobile hero — lifestyle photography
Mobile first

Diseñado para la mano — desde el principio

La decisión mobile-first se tomó antes de colocar un solo píxel. Los managers de retail confirmaron que la mayoría de sus clientes navegaban en tablet y móvil — así que esas superficies debían ser impecables, no una ocurrencia tardía.

Four mobile screens — listing, navigation, product detail, bag

Listado de productos · Navegación por categorías · Ficha de producto · Bolsa — flujos móvil diseñados como un recorrido continuo y sin fricción

Cuatro cambios concretos salieron directamente del trabajo de diseño — no de mejoras generales de la plataforma, sino de decisiones específicas tomadas frente a hallazgos específicos de la investigación.

375px

Cada layout validado mobile-first antes de escalar

1ª

Versión del sitio que de verdad funcionaba en el móvil

✓

Lenguaje visual adoptado como estándar digital de la marca

Enfoque

Mobile first — no el móvil como ocurrencia tardía

Cada layout se validó en una pantalla de 375px antes de escalar. El desktop fue la adaptación, no el punto de partida.

Navegación

El mega-menú acabó con el "no lo encuentro"

El nuevo menú estructurado se validó frente a los fallos de navegación detectados en research. Los responsables de tienda confirmaron que coincidía con cómo describen los productos los clientes en persona.

Experiencia móvil

Un flujo de compra completo y pensado para el pulgar

El sitio anterior no tenía una experiencia móvil intencionada. Navegación, filtrado y checkout se probaron en las combinaciones de dispositivo/SO más habituales de Tateossian.

Alineación de marca

Aprobado como "por fin a la altura del producto"

La paleta contenida, la tipografía editorial y la fotografía a sangre completa se adoptaron formalmente como el estándar visual digital de la marca.

El lujo requiere contención

La tentación con marcas premium es añadir más — más dorado, más efectos, más complejidad visual. Lo opuesto suele ser cierto. Las experiencias de lujo más efectivas eliminan todo lo que compite con el producto en sí.

La investigación de campo supera las suposiciones

Las entrevistas con managers de retail revelaron puntos de fricción que no habíamos anticipado — especialmente en guías de tallas, flujos de regalo y disponibilidad regional de producto. Los insights de quienes están más cerca del cliente son insustituibles.

Mobile-first cambia cómo piensas la navegación

Los mega-menús de escritorio son un atajo para taxonomías complejas. En móvil son un desastre. Rediseñar la navegación primero para móvil forzó un pensamiento más claro sobre la arquitectura de información que mejoró también la versión de escritorio.

Marca y UX son la misma conversación

Trabajar en branding, identidad y UX en el mismo proyecto dejó claro lo inseparables que son estas disciplinas a nivel de marca. Las decisiones tipográficas son decisiones de UX. Las decisiones de color afectan la confianza. Cada decisión visual tiene una consecuencia funcional.

La lección más amplia

El e-commerce para marcas de lujo no trata solo de vender — trata de mantener el contrato de marca con cada clic. Un checkout confuso o una ficha de producto recargada no solo pierde una venta; daña la percepción de calidad que justifica el precio. El diseño debe sostener tanto la conversión como la marca.