The client
Gemlox is a UK bridal and fine-jewellery label selling diamond engagement rings, wedding bands and loose diamonds. The tagline says it · "You'nique Jewellery" · but the real product is the choice architecture: unlike a template storefront where every ring ships as a fixed SKU, every Gemlox ring is built by the customer · pick the setting, pick the diamond, pick the metal.
That's not a decoration on top of an "add to cart" flow. It's the whole purchase. A £700 setting + an £8,000 diamond is a different product from the same setting with a £2,400 diamond · and the site has to hold both variants across the same customer journey without losing anyone in the middle.
The brief
Build a storefront that mirrors how people actually buy diamond rings: they pick the stone and the setting separately. Nobody scrolls to a product called "Gemlox Radiance with 2.01-carat VVS1 Heart" and adds-to-cart. They build it. So the site has to make that build-it flow the primary path.
Secondary constraints: this is a £700–£180,000 price range, so the site has to feel trustworthy on the £180k end and affordable on the £700 end. Same design system, same photography treatment, same CTAs.
What we built
- Three-step ring configurator · a persistent progress bar across the top of every configurator page showing 1 Select Your Setting → 2 Diamond → 3 Complete Ring. The visitor always knows where they are in the flow and can jump back a step without losing state.
- Setting detail pages with four metal swatches (yellow gold, rose gold, white gold, platinum) · clicking a swatch swaps the ring photograph live so the customer sees the exact metal before committing. Each swatch has a pre-rendered photograph set rather than a tinted CSS filter · details matter at £700/setting and up.
- Rotating angle views · every setting has 3 short product videos (front-on, 3/4, rotation) so the customer can see how the setting sits on the hand before booking a viewing.
- Filtered loose-diamond catalogue · 50+ stones with eleven filter axes (Natural/Lab-Grown toggle, Shape: Round / Princess / Cushion / Oval / Pear / Emerald / Heart / Radiant / Asscher / Marquise, Cut: Good / Very Good / Excellent / Ideal, Colour: D–L, Clarity: SI2 → FL, Carat range slider 0.10ct → 30.00ct, Price range slider £0 → £100,000). Every filter pre-renders server-side so the URL is shareable, a bride can send her partner a pre-filtered shortlist link.
- Natural vs lab-grown positioning · the catalogue foregrounds both, with education copy on the distinction so the price gap never feels like a trap. A 2.01-carat fancy pink natural heart diamond (£179,679.59) sits in the same grid as a lab-grown equivalent at a fraction of the price · the customer picks.
- Education section · a dedicated nav entry for explainer content (cut, colour, clarity, carat, what "ideal" means, natural vs lab) because a £50k purchase is a learning curve, not an impulse.
- Ex-VAT pricing throughout · honest at-checkout clarity · the setting price is clearly labelled "Price is for setting only. Price excludes VAT" with an info-tooltip breakdown. No £3,499 → £4,199 surprises at the last step.
- WhatsApp-first support · a persistent WhatsApp bubble bottom-right on every page · because a ring conversation is a conversation, not a ticket.
Why it's on the portfolio
Gemlox is an example of e-commerce that bends to the product instead of forcing the product through a stock checkout. Diamond rings don't fit a template storefront · they need a configurator, an education surface, and honest pricing discipline. The stack underneath can be whatever the client's team will maintain · the decisions about how the customer builds their ring are the value we added.
