Agathe Gelin
← Todos los proyectos

Bestseller · 2015 – 2016

Una única plataforma de e-commerce responsive para 17 marcas de moda.

Ayudé a crear desde cero la nueva web de e-commerce responsive de Bestseller: una sola plataforma para 17 marcas de moda, entre ellas Jack & Jones, Only, Vero Moda, Vila y Name it. En el mismo proyecto, también diseñé un flujo de «compra ahora, paga después» en tienda en la app de Klarna.

Cliente
Bestseller
Rol
UX Designer & Researcher
Años
2015 – 2016

Cómo trabajé

Trabajé in situ, en la oficina de Bestseller en Ámsterdam, como UX designer y researcher en el equipo que construía la nueva web, día a día con los product owners y los business analysts.

Caso de estudio 1

Plataforma Bestseller.com

¿Cómo podríamos dar a 17 marcas de moda una sola web que encaje con cada una de ellas y que sus equipos de marketing puedan gestionar fácilmente?

Bestseller es dueña de marcas como Jack & Jones, Only, Vero Moda, Vila y Name it. Nos encargaron rediseñar por completo sus tiendas online, como una sola web responsive para todas. El objetivo: una experiencia coherente y sencilla para los clientes de cada marca, y una solución escalable, para que los equipos de marketing puedan llevar 17 tiendas sin multiplicar el trabajo por 17.

La nueva página de producto de Bestseller en ordenador, portátil, tablet y móvil: el mismo diseño se adapta a cada pantalla

Lo que hice

  • Benchmark. Comparé la navegación y los principales flujos con los de competidores clave, para ver qué esperan ya los clientes de una web de moda.
  • Datos. Trabajé con los business analysts sobre los datos de comportamiento de los clientes, para entender cómo navegaban y compraban de verdad.
  • Arquitectura de la información. Rehíce la estructura de la web con wireframes y prototipos interactivos en Axure, desde los menús hasta el checkout.
  • Talleres. Dirigí talleres con los product owners para definir las funcionalidades.
  • Validación. Presenté la solución a las 17 marcas en la sede central, en Dinamarca.

Una plataforma, todas las marcas

Todas las marcas usan las mismas plantillas y los mismos componentes. Lo que cambia es lo que hace reconocible a cada marca: su logo, su color, sus fotos y sus campañas. Los equipos de marketing rellenan los mismos bloques, y cada tienda sigue teniendo su propia personalidad.

Páginas de inicio de Bestseller, Mama.licious, Only & Sons, Only, Y.A.S y Vero Moda, creadas con la misma plantilla, cada una con su logo, su banda de color y sus fotos de campaña

Páginas de inicio: el mismo diseño, seis marcas distintas.

Páginas de listado de Bestseller, Mama.licious, Only & Sons, Only, Vila y Y.A.S, con el mismo menú de categorías, los mismos filtros, la misma ordenación y la misma cuadrícula de productos

Páginas de listado: un menú de categorías, un juego de filtros, una cuadrícula de productos.

Páginas de producto de Vila, Vero Moda, Only & Sons, Mama.licious, Bestseller y Y.A.S, con la misma galería, los mismos selectores de color y talla y el mismo botón verde para añadir a la cesta

Páginas de producto: la zona de compra funciona igual en todas las marcas.

Responsive, del ordenador al móvil

La página de producto se adapta a cada pantalla. En pantallas grandes, las miniaturas están junto a la foto principal. En tablet, pasan debajo, y los botones de talla ocupan dos líneas. En móvil, las fotos se convierten en un carrusel que se desliza, y la información del producto sigue debajo.

La página de producto en tablet: miniaturas bajo la foto principal, botones de talla en dos líneas
Tablet
La página de producto en móvil: las fotos en un carrusel con puntos, el nombre del producto debajo
Móvil

Caso de estudio 2

Checkout con Klarna

¿Cómo podríamos hacer que pagar sea sencillo, desde la cesta en la web hasta pagar más tarde en tienda con Klarna?

La cesta

En la cesta, el cliente puede cambiar el color o la talla de un artículo, o añadir una tarjeta regalo, en un pop-up, sin salir de la página. Prototipé cada interacción en Axure, para que el equipo pudiera probar el flujo antes de desarrollarlo.

Klarna en tienda

Objetivo

Durante nuestro proyecto en Bestseller, nos encargaron revisar y optimizar el flujo de compra dentro de la app móvil de Klarna. El objetivo era mejorar la experiencia de compra en tienda, permitiendo a los clientes comprar ropa y aplazar el pago gracias a la función «Buy Now, Pay Later» de Klarna.

Una clienta se prueba un vestido en un probador de Vero Moda, junto a un cartel «Pay with Klarna» que explica cómo pagar en tienda

Principales mejoras

  • Navegación simplificada: reestructuramos la navegación para que los usuarios accedan más fácilmente a la opción «Pagar después» directamente desde las páginas de producto.
  • Integración fluida: el nuevo flujo se integró con los sistemas existentes de Klarna, para que las compras en tienda se pudieran gestionar sin problemas dentro de la app.
  • Mejor usabilidad: añadimos mensajes y explicaciones claros dentro de la app, para reducir los puntos de fricción y que los usuarios entendieran cómo completar su compra y aplazar el pago.

User flow de la app de Klarna: flujo 1, crear una cuenta de Klarna, y flujo 2, comprar en tienda con Klarna

Wireframes del flujo 2 para un cliente que vuelve: página de inicio, consulta del límite y pago en tienda con un código QR, pedido y confirmación

Wireframes del flujo 1 para un cliente nuevo: página de inicio, información de registro en dos estados y página de aprobación

Pantallas de la app de Klarna para registrarse en tienda: desde introducir el email y el código postal hasta los resultados «aprobado» y «no aprobado»

Todas las pantallas de pago en tienda de Klarna, con los pop-ups de ayuda, los pasos de registro, los estados de error, el código QR y la confirmación del pedido

¿Tienes una gran idea, un producto que quieres hacer realidad o un proyecto complejo que necesita a alguien de confianza?

Hablemos.