Iniciar un proyecto
  • eCommerce
  • UX/UI
  • Responsive

Caso de estudio — Collections

Una tienda serena
para comprar con calma.

Collections es una plataforma de eCommerce de muebles (sofás, sillas, lámparas y mesas) pensada para propietarios e interioristas que comparan con calma antes de comprar. Una tipografía editorial, una paleta neutra y cálida y una fotografía generosa hacen que navegar se sienta como hojear un catálogo, no un marketplace.

Sector
eCommerce de muebles
Servicios
UX/UI · Diseño responsive
Pantallas
1280 escritorio · 430 móvil
La tienda de muebles Collections

01Contexto

Navegar como en un catálogo,
no en una cuadrícula.

Italiana para los titulares, Instrument Sans para el texto y una paleta tomada de los productos (de #FDF9F4 a #1F1B15) marcaron el tono antes de cualquier interfaz. Después, cada página se diseñó a 1280 y a 430 a la vez.

Alcance: página de inicio, listado de productos con filtros, detalle de producto, newsletter y footer, con las versiones responsive tratadas como pantallas de primera clase y no como una simple adaptación.

Página principal de Collections en una laptop

Que el producto
marque el ritmo.

02Página de inicio

Hero, colección,
reseñas, newsletter.

La página de inicio avanza en una sola dirección: una foto de ambiente a todo lo ancho, el selector de colecciones (sofá, silla, lámpara, mesa), un bloque editorial con un punto de compra interactivo, citas de clientes y un bloque de newsletter. Sin carruseles compitiendo por la atención.

Página de inicio de Collections en escritorio y móvil

03Listado de productos

Filtros a la izquierda,
productos sin ruido.

Categorías, rango de precio, color y disponibilidad filtran una cuadrícula de tres columnas con lista de deseos al pasar el cursor y añadido rápido. En móvil, los mismos filtros quedan detrás de un único control de filtro sobre una cuadrícula de dos columnas.

Listado de productos de Collections en escritorio y móvil

04Detalle de producto

Una decisión
por pantalla.

Precio, descuento, stock, código de producto y las dos acciones (Buy now, Add to cart) están junto a la galería; la descripción, la información adicional y las reseñas siguen en pestañas, y los productos similares y populares cierran la página.

Detalle de producto de Collections en un teléfono

A continuación: la experiencia móvil

05Móvil

Diseñado primero
para el teléfono.

Las páginas de listado y de producto se compusieron primero a 430 px: el carrusel del hero conserva sus puntos, los filtros se pliegan en un panel y la galería del producto va primero, con las muestras de color debajo.

Lista de productos de Collections en un teléfono
Detalle de producto de Collections en escritorio y móvil

Diseño sereno.
Decisiones claras.

Las versiones de escritorio y responsive de la página de producto, presentadas juntas.

Página de producto de Collections en dos pantallas

Más proyectos

Más proyectos.
El mismo criterio.

Una muestra más amplia de proyectos de eCommerce, SaaS y web. Desliza para recorrerlos y abre los que te interesen.

Ver proyectos

¿Tu proyecto tiene
un reto similar?

Comparte el producto, la página o el embudo que quieres mejorar. Recibirás una respuesta directa sobre si encajamos, el alcance y los plazos.

Iniciar un proyectoEscribir a Dylan

Estudio independiente: trabajas directamente con Dylan Allynder.