Uncover the Gems

A Website Redesign to Enhance Online Jewelry Shopping Experience

My Role:

  • UX Research: usability testing, heuristic analysis, competitor analysis, research synthesis

  • UI Design: wireframe, prototypes

Time: 2 Weeks

Team: Sole Designer

Problem

Did you know 70% of shopping carts are abandoned by customers during online shopping?

While shopping carts could be abandoned for a variety of reasons, a frustrating experience with the e-commerce website can easily turn customers away.

Distinctive Gem Inc. is a small jewelry business fully operated online with no physical stores. While customers love Distinctive Gem’s products, they need an easier, more intuitive way to navigate the website and browse products so they can find the products that they want more easily.

Background & Goals

https://www.distinctivegem.com

Distinctive Gem has tremendous potential to grow its business through improving the usability of its e-commerce website

Distinctive Gem Inc. is an online jewelry retailer and offers services such as custom cutting program and free diamond concierge.

I was shocked to find out that this business is completely operated online with no physical stores given how unintuitive the website was. According to a customer, no one uses the website! Most transactions and communications are completed over emails and phone calls between customers and the business owner.

The goal of this project is to identify the critical areas for improvement and develop a mid-fidelity prototype within the project timeframe.

Process

Getting direct user feedback and researching the gaps in usability are critical to identifying improvement areas

As a recent ring shopper, I found Distinctive Gem’s website incredibly difficult to use; however, I tried my best to keep my bias out of the process.

Competitive Analysis

As an online retailer, Distinctive Gem’s website lacks many table-stakes features

I compared Distinctive Gem’s website to those of White Flash, Blue Nile and Tiffany Co. To my surprise, Distinctive Gem had a few advanced features such as online chatbot and 360-degree view for products. However, some table-stake functionalities are lacking, making the shopping process challenging for users.

Heuristic Analysis

The heuristic issues ranged from lack of consistency to excessive use of jargons.

I used the 10 Heuristic Evaluation and severity definition from Jakob Nelson in this analysis.

1

2

3

4

5

Clicking on the jewelry tab takes users to a completely different interface.

Heuristic Violation: Consistency & Standards

Severity: 4

Users can only access the specs filters through two options, and they are unable to filter the search results without modifying the search.

Heuristic Violation: Flexibility & Efficiency of Use

Severity: 4

The navigation is not intuitive. Users need to click around to understand how the website organizes the information.

Heuristic Violation: Learnability

Severity: 4

The website uses industry jargons
(e.g., Fluorescence) without providing explanations, which is challenging for users unfamiliar with jewelry purchase.

Heuristic Violation: Match between system & real world

Severity: 3

The website has lengthy paragraphs and clunky layout, making it difficult for users to digest the information.

Heuristic Violation: Aesthetics & Minimal Design

Severity: 3

“I give up. I will just go to a different retailer.”

— Usability Test Participant

Usability Test

To validate my assumptions on the usability problems, I conducted a usability test with 5 participants with various level of familiarity with jewelry shopping

Usability Test Scenario:

You and your partner are planning to get engaged and you are looking to purchase an engagement ring.

Tasks:

  1. Purchase the stone with the specifications (e.g., carats) that you like

  2. Purchase the setting for the stone that you selected

  3. Purchase a wedding band

Usability Test on Zoom

Usability Test on Zoom

  • All five participants found the website difficult to use and had trouble completing the tasks; two of them chose to give up.

  • Only 13% of the completed tasks made users feel confident enough to proceed with the purchase if they were to use the website in real life.

Usability Test Key Takeaways

While the participants felt confused and frustrated by the website, I was exited to gain insights on the pain points:

  1. The key navigation did not effectively direct users

  2. Users found the separate website and purchase process confusing

  3. Lack of filter options forced users to keep scrolling

  4. Inconsistent and insufficient product information lowered user confidence

  5. Non-responsive content (when they were supposed to be responsive) triggered confusion and frustration

User Personas

I created three proto personas to represent Distinctive Gem’s target customer groups

  • The Diamond Connoisseur

    Users who tend to do their research on a product and users who have a fair amount of knowledge of jewelry purchase

  • The Ring Novice

    First-time customers with limited knowledge of jewelry purchase and users who prefer learning about a product on the go

  • The Jewelry Enthusiast

    Users who check out the website for daily jewelry purchase and enjoy exploring different products

Design Vision

To address the most prominent pain points, I prioritized three aspects in the redesign

The new information architecture received 100% success rate in tree testing

Efficiency & Learnability: Redesign information architecture and navigation

One Interface: Streamline multiple purchase process into one

Card Sorting, Site Map & Tree Testing

Consistency & Clarity: Update language and standardize product information

Since one of the biggest issues is how the website organizes its information, I conducted card sorting with 4 participants to get a general understanding on grouping patterns.

With the card sorting results and inspirations from well-designed jewelry websites, I revamped the sitemap:

  • Regrouped information based on logics and conventions

  • Relabeled categories to remove jargons and establish naming conventions

  • Added “Education” to the top navigation to support users in the purchase process

  • Added “Services” to the top navigation to showcase the unique offerings from Distinctive Gem

Before | Original Site Map

After | Redesigned Site Map

Tree Testing

To make sure the new design truly makes it easier for users to navigate, I conducted a Tree Test in Optimal Workshop with 3 participants and gave them the following tasks:

  1. You want to purchase a natural diamond and browse some product options.

  2. You are interested in the lab diamonds custom cutting program and want to find out more.

  3. You want to build your own engagement ring and you want to start with picking a stone.

  4. You are planning for your wedding and want to create a registry on the website.

  5. You are interested in buying a wedding band on this website.

The results were exciting: 5 tasks done in 1 minute 37 seconds, 100% success rate, 93% of destinations were chosen without backtracking.

Given the substantial improvement required, I decided revamping the entire layout and visual design would yield the most effective results.

Mid Fidelity Wireframes & Protoype

Check out the mid-fidelity wireframes and prototype of the new design!

  • Distinctive Gem Home

  • Ring Setting Product Page

  • Diamond Finder Page

Mid-Fidelity Prototype

“The new design is so much more user friendly!”

— UX Designer

Reflection

What went well:

  • The usability tests offered valuable insights into the redesign priorities, and I truly enjoyed the process of observing users. When users shared a problem that I haven’t noticed, it felt like uncovering hidden treasure.

  • Conducting Tree Testing showed that the new information architecture work! I was excited to see that users found the new navigation clear and efficient.

What I would have done differently:

  • Gaining a full picture of what users think: I wish I had checked the customer reviews of Distinctive Gem earlier in the research process. While most customers gave excellent reviews on the quality and customer services, a few mentioned the website was “great” and “easy”. If I could talk to those customers, it would have been beneficial to understand what they love about the website

  • Collecting user feedback on the design: I wish I took the time to collect feedback on my sketches, wireframes and prototype so I can capture the improvement areas

Check out other projects!

Enhance Hiring Experience
Recruiting Analytics Dashboard for Job Search Site

Heal the Healer
Well-Being Web App for Medical Professionals