3D Jewelry Configurator App
Contribution Areas
Product overview and context
Jewelith Studio is a 3D configurator app built for jewelry brands on Shopify and WooCommerce. It’s a B2B product that lets jewelers offer custom engagement rings, bracelets, and necklaces directly on their sites. While we sell to jewelers, the UX is designed around end-customer decision behavior, improving confidence through a real-time 3D model and live pricing. When we started, the market had no mature, interactive jewelry configurator, unlike automotive or footwear, which shaped the product vision.
I led the end-to-end product experience, from information architecture to final UI. The ring, bracelet, and necklace flows were designed as a unified system, with a guided interaction model that simplifies complex configuration choices. I also designed the admin interface that allows jewelers to manage pricing, options, and rules. The 3D assets were built within my team using a workflow I defined for modeling and optimization.
Defining the configuration logic for engagement rings
I started from the structure of an engagement ring. The information architecture breaks the product into shank, head, stone, and supporting options such as matching band, engraving, and purity. Each branch has its own rules for styles, metals, shapes, price tiers, and options that can or cannot be combined. This map became the foundation for UX decisions and made the flow predictable for developers and 3D artists.
Learning from mature configurators in other industries
Since jewelry lacked good references, I researched configurators in industries where customization is already standard. Porsche, Royal Enfield, Tag Heuer, and Nike provided the patterns I needed. Clear step navigation, price visibility on every change, and large 3D previews helped shape the interaction model. I adapted those UX patterns to a fine jewelry context by simplifying choices and keeping only the information that supports a purchase decision.
Designing the real time 3D builder and the ring flow
The real time 3D builder opens with a clean ring model and a focused configuration stack. The primary steps are shank, head, and stone. Each step exposes one decision at a time. This reduces decision fatigue, especially for first time buyers, while still letting experts explore deeper combinations.
The shank flow handles the most complex decisions. Style, matching band, metal, purity, and engraving sit in a guided workflow. When someone chooses a shank style, only relevant secondary options appear. Micro interactions and quick help text show how each choice affects the look and the price. Every change updates the 3D model live, so users do not need to imagine the result.
Head and stone configuration with diamond transparency
The head and stone flows handle shape, carat, quality levels, and color types for natural and lab diamonds. The layout keeps the navigation consistent with the shank flow so users do not feel like they entered a different tool. A simple slider controls carat and clear grouping breaks complex diamond language into choices that shoppers can understand without needing a salesperson.
Mobile first interaction model
Most ring exploration starts on mobile. I designed the interaction model for small screens first. The 3D model sits in a stable frame with steps at the bottom, placed within thumb reach. Price stays pinned near the top. This lets users build a design casually on a phone and return to it later on desktop with the same flow.
Extending the system to bracelet and necklace configuration
When the ring builder was stable, I extended the same interaction model to bracelets and necklaces. Both flows are based on two elements. Bracelets have chain and charms. Necklaces have chain and pendant. Users can pick the base design, change metal and purity, and build their own combinations. Because both tools share the same logic and layout, they feel like a single product system.
Admin experience for jewelers
The app includes an admin dashboard inside Shopify and WooCommerce for jewelers to manage configuration rules. Here they can enable or disable a configurator, choose which categories they want to sell, change pricing for styles, metals, and quality tiers, and control how their designs appear in the builder.
The right side of the screen shows a clear image of the part that is being configured. For example, if the jeweler edits pricing for a head style, the image highlights that head on the ring. This reduces confusion for non technical store owners and makes the backend safer to use.
Pricing matrix and inventory control
A separate settings view exposes the full pricing matrix. Each shank style, matching band, head style, and stone option can have different prices for purity and quality. The layout uses a clean table structure so jewelers see what they are editing without losing context. It feels familiar for anyone used to managing inventory or spreadsheets inside their store backend.
3D modeling workflow and asset pipeline
The configurator relies on high quality 3D assets. I built the 3D workflow for rings, chains, pendants, and diamonds to ensure they look realistic and load quickly on web.
We downloaded ring models and cleaned them in Blender and Rhino by separating parts into shank, head, and stone. I handled texturing for metals and diamonds, lighting, and model compression for web. I also set the SOP for other 3D modelers and coordinated the delivery of final assets to developers. This extra skill helped me speed up the process and ensured the visual quality of the rings matched the UX goals.
Outcomes for jewelers and customers
Jewelith Studio gives jewelry brands a way to sell custom rings online with clarity and confidence. The interface turns a complex product into a guided flow and supports both beginners and experienced buyers. Real time pricing and visuals reduce guesswork and increase purchase intent.
For jewelers the app is a scalable tool that uses their own designs instead of templates. It works on Shopify and WooCommerce, supports their pricing logic, and gives them full control of product configuration without needing designers or developers. This combination of 3D experience, guided UX, and practical backend tools positions the app as a complete solution for custom jewelry ecommerce and supports higher order values for engagement rings and personalized pieces.