A luxury online store for a Colorado family jeweler with over 2,000 designs

Rubén redesigned the online store of a family jeweler with three generations of history: a warm, luxurious experience that is easy to shop, with a catalogue of over 2,000 designs and a design system of its own.

Client: Family-owned fine jeweler (Colorado, US)
Year: 2026
Type: E-commerce · Luxury jewelry
Role: UX/UI design (Rubén R.) · Design system
Team: Twelve Legs Marketing
Tools: Figma

Project under NDA: the brand, names and data shown in the images are fictitious.

The jeweler's home page on desktop and mobile: the headline “Where Love Finds Its Forever Form” next to a photo of a hand wearing an engagement ring against the mountains.

Context

A family-owned jeweler in Colorado, three generations in the trade, wanted to rebuild its website. It sells engagement rings, wedding bands and fine jewelry, designs custom pieces and offers financing, and it needed a website that lived up to the experience it gives in store.

Rubén worked on it with the Twelve Legs Marketing team, owning the UX/UI design of the whole site and its design system. The project is confidential, so the brand shown in the images is fictional.

Challenge

The brief asked for a delicate balance: a luxury jeweler, but minimal and clean, never overwhelming the shopper. And at the same time, a story of its own. The family wanted the site to convey its Colorado pioneer roots and a subtle touch of patriotism from the owner's military service, without looking like a copy of the big chains.

Behind it sat a huge catalogue, with over 2,000 ring designs, filters for metal, shape, carat and setting, and expensive, emotional purchases where financing and an in-store appointment matter as much as the product.

Process

The client had a clear reference: a large US jewelry chain, for how easy it is to navigate, how it recommends products as you scroll and its bridal inspiration content. Rubén took the ease of use from it and put it at the service of a tone of its own: warm, personal and trustworthy.

He started with the design system: a cream, gold and charcoal colour scale with semantic aliases, Cormorant Garamond for editorial headings, Work Sans for body copy and interface, and a spacing and radius scale. On top of it he designed 13 desktop templates, from the home page to the product page, the family story, financing, the blog, the resource guide, the thank-you page and the 404, plus the six mega menus.

Desktop home page: a headline about the family story, a photo of a ring against the mountains, shopping perks and entry to the four categories. — The home page: the family story in the headline and the four categories right below. Fictional brand.

Solution

Mega menu navigation. Each main section opens its styles, collections and an image, so any part of the catalogue is two clicks away. Booking an appointment is always in view in the header.
A catalogue that filters itself. Styles as quick links at the top, filters for price, metal, shape, carat and setting in the sidebar with result counts, and active filters visible above the grid.
Product pages that answer before you ask. Price with the saving, a monthly payment with 0% financing, metal, carat and size selection, and booking an appointment right next to buying.
The story, in its place. The family legacy and Colorado show up in the tone of the copy, the names of the pieces and pages of their own, without getting in the way of shopping.

Engagement ring mega menu with styles, collections and a photo. — The engagement ring mega menu: styles, collections and an inspiration image.

Engagement ring category with style shortcuts, sidebar filters and a product grid. — The catalogue: styles on top, filters on the left and active filters above the grid.

Solitaire product page with gallery, price, financing, metal, carat and size selection, and buy and appointment buttons. — The product page, with financing and in-store appointments on the same level as buying.

Mobile version

To show it here, Rubén adapted the key journeys to mobile, based on the desktop templates and the same design system. The menu becomes an accordion with styles as buttons, filters open in a bottom sheet that shows how many rings are left, and on the product page the buy and appointment buttons stay fixed at the bottom, within thumb reach.