Distinctive Gem

The purpose of this project was to explore the nuances and best practices for user interface design. To accomplish this I was tasked with redesigning an e-commerce site. By leveraging usability testing, information architecture and design conventions I set out to make research backed suggestions for improving usability.

‍

Overview

Project Brief: Re-design an E-Commerce website
Duration: 2 weeks
Skills: User interviews, Heuristic Analysis, Task Analysis, Usability testing, Competitive & Comparative Analysis, User Flow, Figma
Final Deliverable: Clickable Mid-Fidelity prototype

I chose a website called Distinctive Gem, a small, online jewelry retailer focusing on high-quality, innovative designs and affordable lab grown diamonds and moissanite gems. They have a strong presence across social media platforms, and do all the cutting, design and work in house.

‍

Problem

Distinctive Gem has a dated look that makes it seem unprofessional and untrustworthy, the searching and shopping experience is confusing and unpredictable causing users frustration to the point of not wanting to purchase such expensive items that are unique and represent a specific time in their lives.

‍

Solution

Redesign Distinctive Gem to offer the user an efficient way to purchase rings and diamonds with confidence by presenting educational content and efficient searching and purchasing methods that appear with clean and attractive aesthetics.

‍

Bold tactile image | Elegant affluent product?

Distinctive Gem really stuck out to me from a wide variety of E-Commerce projects that I had the choice to work on. I have to admit that the first thing that stuck out to me was the bizarre logo choice. Diving deeper I started to gain interest in the proprietor and really wanted to learn more, mostly it was his driving passion for lab diamonds, even though he does appear to have trouble creating digestible content for the potential clients.

I was really curious about many aspects of the diamond and engagement ring business even before conducting any user research. Do people really buy such a personal item that costs so much money like they would anything else online?

‍

Discover & Define

‍

Heuristic Analysis

Using Jakob Nielsen's heuristic analysis to discover the major issues with the site and prioritize those that need fixing. Click here to view full LEMErS Chart

‍

Learnability

A quick look into the system architecture revealed that there could be some serious issues with learnability. I created a site map and immediately discovered confusing links and loops that revealed how disorganized the site is and troublesome for users who might be visiting the site for the first time, something which is to be expected when buying diamonds and engagement rings. Click to view sitemap of Distinctive Gem

I also noticed that any time I navigated to a different page, there were noticeable variations in the search functions. Regardless of which version used, the results were always unpredictable.

‍

Aesthetics

The website looks crude and poorly organized. While the navigation is very simple, it is not very clean, having a stacked appearance on the left side. Link to Distinctive Gem

There is a noticeable lack of consistency between all the products available, so many of the images are generated by CAD design programs that are capable of delivering detailed images that represent the product well, however not all the images are given the same treatment, some of the frames are different sizes.

‍

There is also a website within a website when Settings by Stuller is clicked on under engagement rings creating an entire mismatch of visual languages.

‍

Consistency & adherence to standards

I also noticed that there was a lack of educational content on the products that were available, part of the shopping process for an engagement ring includes learning about something that you will be buying for the first time, while there is tab named School of Rock, the content is confusing and discombobulated, users skimmed through it and often dismissed it as being over their heads.

‍

‍

Error handling

What happens when you try to add 2 diamonds into your cart that cost half a million dollars each?

We can't know for sure why this error message appears, it could be due to the items not being in stock or even worse, site not working properly in which case, this could translate to huge revenue losses if it is not fixed soon.

‍

‍

Task Analysis & Journey Mapping

5 users were given the task of searching for an engagement ring.

0 Users are able to complete the task when trying it for the first time.
4 users made two attempts to find a ring they liked, each involved 1 failed task of clicking on engagement rings and then searching by designer.
The fifth user found a ring within the Stuller Showcase but was unable to proceed since you can’t buy directly from the Distinctive Gem site.
All 5 users commented that they would never trust this site with a purcahse of this value

‍

View full journey map in Figma

‍

Market Research

Interviews

5 female participants, all of which are expecting to get engaged in the upcoming year

All 5 participants explained that they would prefer to go to an actual brick and mortar store for an item like an engagement ring
3 out of 5 participants mentioned that they would want to see customer reviews or testimonials
4 out of 5 participants had reservations about trusting delivery services to safely deliver to their doors

Competitive Analysis: Feature Inventory

Here is a summary of my findings after analyzing 6 direct competitors

all six competitors have an educational section that that features informative content on lab diamonds
5 out of 6 competitors feature a buying guide which includes content on the four C's
all six competitors use reviews to demonstrate emotional value in the product and service
all six competitors include hand model photos to better show the size and perspective of the rings
all six competitors have size selection or ring size help
all six competitors have a live chat feature
unique additional features include 360 degree inspection, showrooms, concierge and virtual appointments
4 out of the six competitors have a four step purchase process that helped users navigate through a process that they would likely be going through for the first time.

‍

‍

Feature inventory chart

View full chart here

‍

How might we make the appearance of Distinctive Gem more aesthetically pleasing?

How might we increase user confidence so they will trust the site to purchase such an expensive item?

How might we entice potential customers to shop online for a product that would normally be purchased in a brick and mortar store ?

‍

Realizing brilliant solutions

It was during the market research phase that I learned something very valuable. Somebody has walked this path before me and embraced technology to the fullest to create experiences that can easily rival a brick and mortar store. CAD imaging, and the ability to create your own ring while learning about the benefits of lab diamonds from your own home/device coupled with concierge services makes businesses like “Brilliance” and “with clarity” very enticing options for anybody who is purchasing an engagement ring.

‍

Develop & Deliver

‍

Designing for a Persona

From this point I focused on the needs and goals of this persona which would be defined by the following problem and solution statement. View full User Persona in Adobe XD

‍

Simplified Architecture

I revised the site map for Distinctive Gem and created a user flow that would work for my persona, by creating a simplified search process and accessible education section, I know I could create an efficient flow that would assist her in finding the ring that she needs and informing her of the products available on the site.

View proposed site map in FigJam

‍

During market the research phrase I took note of the way competitors sites always included a call to action buttons on the landing page that would invite the user into the experience of ring shopping

‍

‍

User Flow Ideation

Another essential part of the user flow was the search process, through these sketches I ideated a visual method that would be appealing and intuitive to my end user.

View User Flow ideation in FigJam

Explanation of next user flow step

‍

Mid-Fi Progress

During competitive analysis I noticed that 4/6 site used a progress bar to help guide the user through the experience.

‍

To create a working prototype I made a plan to include the following screens that would guide my persona through the user flow (purchasing the item), I decided to prioritize this flow over the education aspect since it could generate revenue.

‍

Returning to realistic business expectations

I spent tons of time on this iteration and learned so much about Figma, sometimes I felt like I was simply copying the brilliant ideas of the better websites I had selected for market research. This means that I have surely been influenced by the most complex ideas that have also been costly to develop. Ultimately the business and financial constraints of Distinctive Gem might affect the possibilities. I’m currently working on a further “dialed back” iteration that will still carry the elegant appearance and still be within reach of a lower budget.

‍

Deliver

elegance & sophistication

After the initial 2 week period of researching and developing the mid fidelity prototype, I wanted to delve deeper and use my graphic design skills to introduce an elegant appearance that the users would find attractive and trustworthy. So made the following decisions to the improve the overall aesthetics of the site

‍

Introduced sophisticated and elegant font combination, Playfair and Josefin Sans

Sourced a selection of hero images that capture the emotional value of the product

Created a cool split complementary color palette with subtle vibrant hues

‍

I also removed the sporty rhinoceros head logo. Although it is something that attracted me to the project, I feel like I could convince the owner of this business that Distinctive Gem and The Rhino School of Rock are two very different entities and should be represented appropriately.

‍

Before

‍

After

To review the clickable prototype, please click here

‍

Final thoughts

I spent 2 weeks on this as a project and a further 2 weeks revamping the prototype and the case study. I’ve probably spent more time looking at Diamond sites than half the young brides in California and the advertising algorithms are targeting me for a well priced lab diamond ring.

I truly enjoyed this project and feel it is the closest to a real life solution. I feel confident that if I showed this to the owner he would be impressed by the research and prototype enough to consider a redesign.

My biggest takeaway was when I started to realize that the problem I sought to solve had already been discovered and solved by previous UX teams. By making full use of the CAD technology used to create the rings in an E-Commerce site the user is on the verge of being in an augmented reality state. It's possible for the user to enjoy an experience that offers more than the brick and mortar option which the potential customer might favor due to the perceived risk of shopping for an expensive item online. Adding hybrid options such as virtual meetings, in store pick ups, showroom options and concierge can also really compliment and enhance the E-Commerce experience for expensive products like these.

Maybe it's possible to push the concept further. I visualize a day when an app that works like Adobe Aero can scan your hand and combine the CAD representation to further enhance the shopping experience.

‍

Next Steps & Learnings

‍

Conduct further usability testing

Add and develop the live chat function

Develop mobile and tablet versions

‍

By making full use of the CAD technology used to create the rings in an E-Commerce site the user is on the verge of being in an augmented reality state. It's possible for the user is able to enjoy an experience that offers more than the brick and mortar option which the potential customer might favor due to the perceived risk of shopping for an expensive item online. Adding hybrid options such as virtual meetings, in store pick ups, showroom options and concierge can also really compliment and enhance the E-Commerce experience for expensive products like these.

‍