Semi-Mount Engagement Rings

One of the more interesting challenges when working on the launch of a jewelry product Shopify storefront was discovering that a large number of engagement ring products we had imported from initial product lists were not, in fact, complete engagement rings as their images would indicate. This is when I first learned of the existence of semi-mount engagement rings - this are engagement ring settings that do not contain a center stone by default, but allow the customer to select a center stone with the jewelry store to create their own semi-custom ring experience should they choose to opt for that finish. While selection of a center stone is very commonly done through the store offering the semi-mount engagement ring, we wanted to be sure not to cut off the option for someone to purchase the setting only. In cases where a customer may want a setting to incorporate a stone from a cherished heirloom, or where they may have a local trusted diamond source but want to obtain the setting separately, why not allow that as a possibility? But while offering that possibility, we needed to clearly communicate to all customers that the ring they are looking at is not a finished ring - but also offer the option for them to select a diamond and purchase all in one simple process.

Our solution was to add diamond selection as an option to the product and modify the "Add to Cart" CTA to clearly indicate something was different in this case, hinting to them to read further and look at the details of the options if they hadn't fully taken in the page content already. We, of course, had included a disclaimer statement, but felt this information needed to be reinforced with all of the elements of the product page to avoid a situation where a customer who isn't familiar with the term "Semi-Mount Engagement Ring" doesn't unintentionally purchase a ring without any center stone.

The default options for the Shopify theme cart drawer created a nightmare of wrapped text and details that were sometimes completely illegible due to the way they wrapped so quickly mid text, so incorporating these options as we did (with the diamond as a line-option add on) also necessitated editing of the cart area as well.

In this image you can see the before and after results of this revision, which also improves the clarity the price details between the setting and diamond.

The diamond selection process had to also be designed from scratch to accommodate the options available from the API being used to manage diamond inventory and options. Several options from the source were eliminated as pre-set filters in the backend of that process, which allowed us to refine the filters available as well. These images present two stages of development for this process, one that presents using a "Select" button to indicate whether a diamond is selected, and includes an "Add to Cart" CTA from the diamond selection process, eliminating an additional return to the product page. The mobile design (which was a refinement but was not executed by the team), presents a simple one tap on a diamond to select it, option to clear the selected diamond or add it to the options selected on the product, which then returns the customer to the page to review their selections and add to cart (Add Center Diamond is the flow currently in live status on the site). While there are revisions I would advise based on the current execution on the website, I believe our use of clear language and transparent view of the product option state in all contexts allows the product the best approach. Presenting filters using trying to accommodate the type of selections being made with the most suitable input options. Further refinement on these filter inputs is evident in designs for the Custom Ring Builder Tool, which I believe were not implemented, but I do feel represent a better interpretation.