Hero
UX/UI Design
UX/UI Design
Fine Jewellery Retail

Diamond and Ring Configurator UX Overhaul for an Online Fine-Jewellery Retailer


Let's Connect

Overview

What we built

An online fine-jewellery retailer's ring configurator, built a decade earlier across 10 showrooms, took eleven steps and still could not show a shopper their chosen diamond on their chosen setting until checkout. 68% of shoppers abandoned before pairing the two. We redesigned it as a guided flow, and completion rose to 58%.

In plain terms: this retailer sold engagement rings online through a configurator that had not meaningfully changed in a decade, spread across its 10 showrooms. Getting from browsing to a finished ring took eleven sequential steps, diamond filters were written in trade jargon like table percentage and girdle thickness rather than anything a first-time buyer would recognise, and nothing showed the chosen stone sitting on the chosen setting until checkout. 68% of shoppers who started a configuration abandoned before ever seeing the two paired together.

We interviewed 18 recent ring buyers and ran 4 rounds of prototype testing, then rebuilt the journey as a guided flow that lets a shopper start from either the diamond or the setting, translates the 4Cs into plain-language quality tiers with visual comparisons instead of jargon, and renders the combined ring in an interactive preview from early in the process. A save-and-share feature now lets partners and showroom consultants review a configuration together. Completion rose from 32% to 58%, configuration-to-purchase conversion rose 44%, median time to finish a configuration fell from 24 minutes to 9, and showroom appointments arriving with a saved configuration reached 38% of all bookings.

The Problem

Eleven steps to a ring

The configurator sold one of the most considered purchases a shopper makes, and it had been designed a decade earlier for a much less patient audience than it now served. Eleven sequential steps stood between browsing and a finished ring, each one a chance for a shopper to lose momentum before ever reaching the two decisions, diamond and setting, that actually mattered.

The language made things worse. Diamond filters were written in trade jargon, table percentage, girdle thickness, terms a jeweller would recognise instantly and a first-time buyer would not, forcing shoppers to either research terminology mid-purchase or guess. Even a shopper who understood every filter could not see their choices combined: the chosen stone never appeared on the chosen setting until checkout, so the ring itself stayed imaginary until the moment of payment.

Eleven steps to finish

Getting from browsing to a completed ring took eleven sequential steps, giving shoppers eleven separate chances to lose momentum before ever reaching a decision.

Jargon-heavy diamond filters

Diamond filters used trade terms like table percentage and girdle thickness rather than plain language, leaving first-time buyers to research or guess mid-purchase.

No combined preview

The chosen diamond never appeared on the chosen setting until checkout, so shoppers had to imagine the finished ring rather than actually see it.

Most configurations abandoned

68% of shoppers who started a configuration abandoned before ever pairing a diamond with a setting, the exact combination the tool existed to help them choose.

What it was costing them

Every abandoned configuration was a shopper who had shown real intent to buy an engagement ring and left without ever seeing their own choices combined, and at 68% abandonment across the retailer's 10 showrooms that represented the large majority of everyone who tried. Consultants in showrooms were left starting conversations from nothing rather than from a configuration a customer had already half-built and trusted.

The Solution

Guided design-your-ring journey

We interviewed 18 recent ring buyers to understand where the eleven-step process actually lost them, and ran 4 rounds of prototype testing to check whether each change we made actually helped. That combination kept the redesign anchored in how people shop for an engagement ring rather than in how a jeweller organises diamond inventory.

The rebuilt journey lets a shopper start from either the diamond or the setting, whichever feels more natural, instead of forcing one fixed order. The 4Cs, previously buried in trade jargon like table percentage and girdle thickness, became plain-language quality tiers with visual comparisons, and the combined ring now renders in an interactive preview well before checkout, so shoppers can see what they are actually choosing as they choose it.

A save-and-share feature closed the gap between online configuration and the showroom. Partners and showroom consultants can now review a saved configuration together, carrying a shopper's online decisions straight into the in-person conversation instead of starting that conversation from nothing, with appointments across all 10 showrooms able to pick up exactly where the online session left off.

Key decisions

01

Interview buyers about the process

18 interviews with recent ring buyers identified exactly where the eleven-step configurator lost people, before any screen of the redesign was built.

02

Let shoppers start anywhere

The guided flow lets a shopper begin from either the diamond or the setting, instead of forcing everyone through the same fixed sequence.

03

Translate the 4Cs into plain language

Trade jargon like table percentage and girdle thickness became plain-language quality tiers with visual comparisons, so first-time buyers no longer needed to research mid-purchase.

04

Show the combined ring early

An interactive preview now renders the chosen diamond on the chosen setting well before checkout, replacing a ring shoppers previously had to imagine.

05

Connect online configurations to showrooms

A save-and-share feature lets partners and consultants review a saved configuration together, carrying online decisions into the appointment across all 10 showrooms.

Measurable Impact

What changed after launch

The redesigned configurator turned browsing into finished configurations far more often. Completion rose from 32% to 58% within one quarter of launch, and configuration-to-purchase conversion on completed designs rose 44%, evidence that shoppers who could finally see their diamond and setting together were readier to buy.

The guided flow was faster as well as clearer: median time to complete a configuration fell from 24 minutes to 9. The save-and-share feature also changed how shoppers arrived in showrooms, with appointments carrying a saved configuration growing to 38% of all bookings across the retailer's 10 showrooms.

Configuration steps

Eleven sequential steps to a finished ring

A guided flow starting from diamond or setting

Completion rate

32% of configurations completed

58% of configurations completed within a quarter

Diamond terminology

Trade jargon like table percentage and girdle thickness

Plain-language quality tiers with visual comparisons

Showroom appointments

Consultants starting from nothing

38% of bookings arrive with a saved configuration

Headline results

Configurator completion rate improved from 32% to 58% within one quarter of launch

Configuration-to-purchase conversion on completed designs rose 44%

Median time to complete a configuration cut from 24 minutes to 9

Showroom appointments arriving with a saved configuration grew to 38% of all bookings

Tech & Tools Used

What powered the build

Every tool below earned its place in this engagement. Here is the part each one played.

Figma logo

Figma

Held every screen of the guided configurator flow, from the plain-language 4Cs tiers to the save-and-share layouts, through the prototype testing rounds.

FigJam logo

FigJam

Mapped the original eleven-step configurator against shopper drop-off, giving the team a shared view of exactly where the old flow lost people.

Maze logo

Maze

Ran the 4 rounds of prototype testing with recent ring buyers that validated the guided flow before development began.

UserTesting

Carried out the 18 interviews with recent ring buyers that shaped which trade terms needed translating into plain language.

Hotjar logo

Hotjar

Recorded shopper sessions on the live configurator, showing where the eleven-step flow and jargon-heavy filters caused hesitation before the redesign.

Google Analytics 4 logo

Google Analytics 4

Tracked completion and configuration-to-purchase conversion after launch, surfacing the shift from 32% to 58% completion.

Storybook logo

Storybook

Documented the diamond and setting selection components so the same interactive elements stayed consistent across the retailer's 10 showrooms' digital touchpoints.

React logo

React

Built the guided configurator flow, including the plain-language 4Cs tiers and the save-and-share feature, for production.

Three.js logo

Three.js

Rendered the interactive combined preview of the chosen diamond on the chosen setting, replacing the checkout-only reveal of the old configurator.

Ready to Build your Fine Jewellery Retail Business with UX/UI Design

Ask Byte

Ask Byte

Typically replies instantly

just Now

Hi! I'm OrganByte's assistant. How can I help you today?

AI-generated content may be incorrect


OrganByte

Building innovative software solutions that transform businesses and drive digital success.

© 2026 YourCompany. All rights reserved.