Diamond Hedge

Helping customers find the best value when purchasing a diamond

Overview

DiamondHedge is an e-commerce website that allows you to purchase and select from over 1 million diamonds from various leading diamond companies using Augmented Reality. 

Challenge

DiamondHedge has a lot of traffic to the website, but a big percentage of the users drop off after the landing page. Customers were confused by the industry jargon and this prevented them from making a purchase.

 

The AR feature that DH advertises is out of date and difficult to use. All of these difficult user experiences has made the customer apprehensive about buying an expensive item on this website.

Solution

1. Clarify the process of buying a diamond ring by redesigning the search engine and providing more search options. 

2. Give confidence in the customers to purchase items on the website. 

3. Improve AR features

Role

UX Designer | UX Researcher | In a team of 3 UX Designers 

 

Research

Investigating the Problem

It was important to understand the customer and what role the male and female play.

Creating a user flow with the client helped clarify that this app was initially made for the male since he will ultimately be purchasing the ring, but aspects of it are for the female too. The app needs to be redesigned with both users in mind.

Customer Journey Map

The Male persona was identified as the primary user. He is spending extra time going to stores, then researching diamonds. Once he gets this information, he will try to get hints from his partner on the kind of diamond she wants. He also gets suggestions from his family members about the perfect diamond.

The Female is also involved in this process because she needs to have an idea of what diamond she is going to be "surprised" with. This involves dropping hints to her Partner to even telling close friends and family what she wants, knowing they will let her Partner know. Sometimes they go to stores together and browse the different diamond ring choices.

 

Diamond Hedge comes into the journey when the user is in the middle of doing research. In order to benefit the user, Diamond Hedge can be introduced in the beginning of the diamond search.

Diamond Hedge has the potential to establish trust with the user early on in the diamond search and save the user time and stress throughout the engagement ring process.

Competitive Comparative Analysis

Rare Carat is the biggest competitor.

The stand out features on the website are :

 

  • A simplified call to action 

  • Creates customer connections with testimonials from engaged customers

  • Allows users to save favorite diamonds and show recently viewed items

Takeaways : 

  • Adding a way to save searches and favorite items can enhance the customer experience 

  • Testimonials creates more trust in the user

User Interviews & Testing

Out of the 5 user interviews, all of them have been through the process of either buying of looking for a diamond engagement ring.

  • ​Most of the customers are not educated about diamonds when they start the search, so industry terminology confuse and frustrate them.

  • They feel a lot of pressure as their planned proposal date approaches and wish the buying process was simpler.

  • For most customers their Partners are involved in the buying process to varying degrees - some peripherally, some deeply.

  • Budget and carat are the most important criteria for customers. 

Out of the 5 user testings, all of them experienced obstacles in navigating the current website.

  • Overall usability was 1/10

  • The home page had such an excess amount of information that users barely made it to another page.

  • The lack of information and education of diamonds confused the user.

  • Not having any information hierarchy deterred the user from selecting diamonds.

Hotjar Analysis

To get further insight into the technical aspect of the site, we wanted to numbers. How often are users falling off the home page? How often are users understanding the website's call to action ?

Customers were dropping off from the homepage at 100%.

Most Used Feature (26%) The search engine.

Even though the customer came to this section of the website the most, they did not continue to purchasing a diamond, This could be due to confusion of the search and being uneducated about the diamond.

 

Least Used Feature (3%) AR technology.

Customers expressed DH did not provide a positive experience. 

Mobile most popular device : Mobile.

More than 70% of the users preferred mobile over desktop. 

Key Takeaways

Where can Diamond Hedge add value ?

 

  • Simplify the process of educating oneself about diamonds. 

  • Simplify the process of buying a diamond - the less stressful the better. 

  • Make AR a better virtual experience. 

  • Implement the Partner’s involvement with buying a diamond.

  • Make the process of how and where they can purchase the diamond clear to the user.

  • Design for mobile first - most popular device.

  • Involve customers more with ratings and ability to save/share searches - customers like to read reviews and share with social media.

 

Design Solutions

Current Website - What we are working with

Based on user research we identified these key issues :

  • Color scheme has an unrefined aesthetic.

  • Business model is not clear as to what the website provides for the user.

 

  • Text & layout's legibility are poor.

  • AR's virtual experience features are visually hard to see (poor accessibility) and technically present an outdated usability.

Landing Page 

Search Page

Diamond Results 

AR Page

Sketches - Lo Fi Wireframes 

We approached wire-framing by creating an overall feel of simplicity.

  • Simplifying the process of searching for a diamond.

  • Providing more education (clarify education page and add videos) to make the customer feel more knowledgeable in their decision making.

 

  • Additional features that can be add to the existing app such as filters, more options to search, and adding a customer profile.

1st phase of Iteration

Landing Page / Search

Diamond Results 

AR Page

Visual design has room for improvement

  • The color scheme needs to differentiate from competitors and other diamond search engines. 

Business model needs clarification 

  • We redesigned the home page and created a 3 step system :

    • Explore - Compare - Prepare

  • This should help the give the customer a clear path of how to use the website.

 

Icons in AR needs improvement

  • Create a more polished look for the virtual experience.

  • Change the location of where to access AR from the homepage to the diamond. results page (So the user can try on the diamond they are currently viewing).

User Testing

  • Overall usability was 8/10.

 

  • Availability of multiple search options like the parameter search, wizard search, and free-form search were appreciated. Wizard search was valuable for those who were not educated about diamonds. 

 

  • Price badges, recommendation, and similar diamond features were beneficial.

 

  • AR feature was found intuitive.

 

  • Icons for AR feature needs improvement 

 

  • Addition of videos to education section received very good responses.

 

  • Business model needs more clarification.

 

Final Designs

Landing Page 

  • The current website has no clear to action for the customer and does not clarify the business model of Diamond Hedge.

  • The goal here is to simplify the business model for the customer and immediately show how to search for a diamond.

  • Visually we wanted to create the cleanest and aesthetically unique appearance.

Search Results

  • The current site has no space for the eye to focus on.

  • With creating more white space it establishes a visual hierarchy -  along with sensible icons and more legible text.

  • Added a label that lets the customer know if the diamond is a great, good, or fair price. This allows them to get a faster comparison of price.

  • New features that enable the customer to directly share the diamond with someone, and an icon that brings them to the AR feature.

  • Minimized content to show what is only relevant.

  • Rethought information hierarchy that does not have relevance to purchasing decision.

AR Page

Creating a virtual experience to allow the customer to see the product in context

  • We started with lo-fi wireframes that makes the ring options easier to see, more accessible. 

  • Trying out different layouts and updated icons, the dial shape presented a more visually appealing design. 

  • Updates were added such as a step-by-step guide on how to use AR, displaying diamond information in real time, and a new feature allowing the customer to compare diamonds, shop, and share via social media. 

Outcome

The new designs are currently in development and being applied to the mobile application and desktop website. 

Based on User Testing we expect to see a higher conversion rate and at least a 50% decrease in users leaving the landing page (users advancing to other pages beyond the home page!) More traffic to other pages of the application and creating more trust in the user will result in more money and success for the Owner of Diamond Hedge. 

Search Engine Optimization

  • Multiple search options like the search wizard, free-form search, and parameter search, helped the non-educated customer feel more trusting. 

AR Page

  • Guides customer on how to use AR

  • Allows them to share on social media

  • Provides real time diamond updates

Design System / Component Library

Being a main contributor to the Style Guide and revisions for the final Hi-Fi Wireframes, I wanted to make sure our team had a thorough amount of components to present to the Developers. I also played a role in deciding the final color scheme and typography. 

Prototype

Key Takeaways

This app was built for mobile and desktop, but I only showed the mobile in this case study.

I learned a lot about UI and visual design when working with a client who does not know the aesthetic he wants. As a designer for over 13 years I have come to have patience and flexibility when working with clients who want a re-design but do not know what they want, while presenting options in order to help the client feel comfortable and confident.

In terms of the app design : for this case, the owner of the company wanted to focus on the main user being a Male purchasing a diamond for the Female. If I could do this again I would design this app to be more gender neutral and allow more options for who is purchasing the diamond and who is receiving the diamond.