Tienda online de lujo para una joyería familiar de Colorado con más de 2.000 diseños

Rubén rediseñó la tienda online de una joyería familiar con tres generaciones de historia: una experiencia de lujo, cálida y fácil de comprar, con un catálogo de más de 2.000 diseños y un sistema de diseño propio.

Cliente: Joyería familiar de alta gama (Colorado, EE. UU.)
Año: 2026
Tipo: E-commerce · Joyería de lujo
Rol: Diseño UX/UI (Rubén R.) · Design system
Equipo: Twelve Legs Marketing
Herramientas: Figma

Proyecto bajo acuerdo de confidencialidad: la marca, los nombres y los datos que aparecen en las imágenes son ficticios.

Home de la joyería en escritorio y en móvil: titular «Where Love Finds Its Forever Form» junto a la fotografía de una mano con un anillo de compromiso frente a las montañas.

Contexto

Una joyería familiar de Colorado, con tres generaciones en el oficio, quería rehacer su web. Vende anillos de compromiso, alianzas y joyería fina, diseña piezas a medida y ofrece financiación, y necesitaba que la web estuviera a la altura de la experiencia que da en tienda.

Rubén lo hizo con el equipo de Twelve Legs Marketing y se encargó del diseño UX/UI de todo el sitio y de su sistema de diseño. El proyecto es confidencial, así que la marca que aparece en las imágenes es ficticia.

Reto

El brief pedía un equilibrio delicado: una joyería de lujo, pero minimalista y limpia, que no abrumara a quien compra. Y a la vez, una historia propia. La familia quería que la web transmitiera sus raíces pioneras en Colorado y un toque discreto de patriotismo por el servicio militar del propietario, sin parecer una copia de las grandes cadenas.

Detrás estaba un catálogo enorme, con más de 2.000 diseños de anillos, filtros por metal, forma, quilates y montura, y decisiones de compra caras y emocionales, en las que la financiación y la cita en tienda pesan tanto como el producto.

Proceso

El cliente tenía clara una referencia: una gran cadena de joyerías estadounidense, por lo fácil que es navegarla, por cómo recomienda productos mientras bajas y por su contenido de inspiración nupcial. Rubén tomó de ahí la facilidad de uso y la puso al servicio de un tono propio: cálido, cercano y de confianza.

Empezó por el sistema de diseño: una escala de colores crema, dorado y carbón con alias semánticos, Cormorant Garamond para los titulares editoriales, Work Sans para el texto y la interfaz, y una escala de espaciado y radios. Sobre él diseñó 13 plantillas en escritorio, de la home a la ficha de producto, la historia de la familia, la financiación, el blog, la guía de recursos, la página de gracias y la 404, además de los seis menús desplegables.

Home en escritorio: titular con la historia familiar, fotografía de un anillo frente a las montañas, ventajas de compra y acceso a las cuatro categorías. — La home: la historia de la familia en el titular y las cuatro categorías justo debajo. Marca ficticia.

Solución

Navegación con megamenús. Cada sección principal despliega sus estilos, colecciones y una imagen, para llegar a cualquier parte del catálogo en dos clics. La cita en tienda está siempre a la vista en la cabecera.
Un catálogo que se filtra solo. Estilos como accesos rápidos arriba, filtros por precio, metal, forma, quilates y montura en el lateral con el número de resultados, y los filtros activos visibles sobre la rejilla.
Fichas que responden antes de preguntar. Precio con el ahorro, cuota mensual con financiación al 0 %, selección de metal, quilates y talla, y la opción de pedir cita junto a la de comprar.
La historia, en su sitio. El legado familiar y Colorado aparecen en el tono de los textos, en los nombres de las piezas y en páginas propias, sin estorbar la compra.

Megamenú de anillos de compromiso con estilos, colecciones y una fotografía. — El megamenú de anillos de compromiso: estilos, colecciones y una imagen de inspiración.

Categoría de anillos de compromiso con accesos por estilo, filtros laterales y rejilla de productos. — El catálogo: estilos arriba, filtros a la izquierda y filtros activos sobre la rejilla.

Ficha de un solitario con galería, precio, financiación, selección de metal, quilates y talla y botones de compra y cita. — La ficha de producto, con la financiación y la cita en tienda al mismo nivel que la compra.

Versión móvil

Para mostrarlo aquí, Rubén adaptó a móvil los recorridos clave a partir de las plantillas de escritorio y del mismo sistema de diseño. El menú pasa a ser un acordeón con los estilos como botones, los filtros se abren en una hoja inferior que muestra cuántos anillos quedan, y en la ficha el botón de compra y el de cita quedan fijos abajo, al alcance del pulgar.

Tres pantallas móviles: home, categorías con anillos destacados y menú desplegado. — Descubrir: home, categorías con recomendaciones al bajar y menú en acordeón.

Tres pantallas móviles: listado de anillos, filtros en hoja inferior y ficha de producto. — Comprar: listado, filtros en hoja inferior y ficha con las acciones fijas abajo.

Resultado

Rubén entregó el diseño completo del sitio junto con su sistema de diseño documentado, para que el equipo pudiera construirlo y ampliarlo sin perder coherencia.