theOne

Gigi So
9 min readOct 5, 2016

--

Create a way that enhances the way users purchase their engagement ring or diamond.

The Problem

theOne needs assistance redesigning their current website to create an easy and enjoyable experience for their users to find the right ring.

The Opportunity

With a varied set of tools and methods my partner and I will help theOne redesign an easy navigating process that will also improve users intellectual understanding of diamonds and engagement rings.

The Project Plan

For this user experience consult, my team and I had 3 weeks to complete. We made sure that we had a mandatory sit down meeting with our client to follow up and any new updates as well as issues we might have encountered. Transparency played a very important role in this consult and it was crucial for my team and our client to be on the same page at all times.

Discovering

The Company

Without wasting time we jumped right into analyzing the current website to observe what are some errors we might instantly notice right off the bat. Landing page offers users to either start with diamond or to start with setting as their first step in the customization process. Being offered more than one option isn’t always the best route as users might have a hard time choosing their first step and therefore potentially bring their experience down but, we will first have to conduct some testings to validate that. One thing we really liked was the toggle on the top of the page signifying users where in the process they are currently at.

Contextual Inquiries

We then conducted some contextual inquiries to inspect what were some pain points users would commonly run into. Besides the fact that many users were confused to what a “Solitaire setting” or a “K Color diamond” was, many users addressed that they didn't feel comfortable purchasing from this website mainly because there weren’t any security assurances or image were insufficient and unrealistic.

Heuristic Evaluation

Understanding there were so many pain points that occurred during our usability test we decided to further our analysis and see if we can identify any heuristic issues that exist within the website. After evaluating we discovered issues that ranged from match between system and the real world to error prevention, user control and freedom as well documentation.

Comparative & Competitive Analysis

After noting all the issues that existed in the current website, we were ready to scope out who our competitors were. There were quite some Companies that were already in the market offering the exact thing and even more so it was necessary for us to find innovative ways to reinforce and improve our user experience to be up to par and even better than the rest of our competitors.

Y= Yes N= No

User Research

Survey

Because engagement ring purchases usually happens only once in users lifetime we really want to understand what was their approach and what are some main challenges when making the final purchase. Users recalled that the origin and the specs of the diamond were critical in playing the role of decision making. We also found out that one of the most challenging part of purchasing an engagement ring was overwhelming of selections.

Interview

We selected 3 types of different candidates to interview from so we can identify different types of assessments to adequately help us with our redesign. Group 1 were single, Group 2 were in a serious relationship and Group 3 were married and had experienced the process of ring selection. We were able to interview a total of 9 candidates. We made sure to ask questions that were for all 3 types of party as well as questions that were curated according to their status.

Synthesize

Through the interview we were able to find out that users were far more open in speaking with their significant others before the purchase as their partners opinion is one of the key factors in the final decision of the purchase. Users also stated that one reason they would prefer to visit an actual store would be because they would like to consult with a knowledgeable jeweler or sales representative to explain their options.

Site Map

Before we got started with the designing phase we created a site map to see how we can manipulate the website to improve on the usability. Majority of the interactive actions lies in the customization process while the header and footer remains simple and straight to the point.

Design

Persona

We crafted two types of personas that we think would really represent theOne’s potential user type.

Task: Create an idea board and share it with friends and family for opinions.

We have John, the financially stable mid-aged businessman that’s on the lookout for the perfect engagement ring to surprise his future fiancé at their upcoming trip to the Caribbean. He’s had some sort of knowledge in term of engagement rings and would like to consult with friends and family about his final decision before the final purchase.

Task: Go through the steps in creating an engagement ring and see what are some financial options.

We have Amanda and Carl, young working couple thats openly communicating about marriage and ring expectations. They have absolutely zero knowledge about rings and diamonds and would like to see what kind of choices they have that’s within their budget.

Feature Prioritization

MOSCOW

The features we’ve constructed ranged from the updating all product images to be 360 degree view, having the ability for users to create a customized “profile” on landing page, creating a portal for users to save their creation and send out to friends and family via URL or email for feedbacks and the list goes on.

However, after speaking with our client we discovered that a couple of our features weren’t feasible. Previously when we conducted our contextual inquiries to discover what were some pain points, we realized users had a big issue with trusting our website and that was due to lack of security. We wanted to create a sense of ease for the users so we created a feature that will enable the users to assign their desired delivery concierge provided by our company that will deliver the product right to your door. The delivery concierge will have their personal information listed on our website and users will be able to track in real time where the delivery is located. (Like Uber) We presented this idea to our client and although he thought it was a great idea but it was something that required a lot budget taken from the company. So unfortunately this idea will have to wait until the Company is financially comfortable to fully operate with. With that being said we’ve continued to brainstorm ideas and features that would stay within the Companies ability and budget.

Ideating

For the redesign we wanted to keep the color theme and 3 step process consistency that theOne already offers.

Instead, we wanted to the redesign the formatting and content within each of the process. We found out when users were asked what they like in terms of engagement rings they struggled a bit to narrow down what they had in mind however, if users were asked what they didn’t like, users were quick to acknowledge their dislikes. We created a modal guide using that mentality which would help users with no basic diamond knowledge or usually struggle with overwhelming selection filter out some selections. The guide would ask user to eliminate the diamond shape, setting and price that they didn't favor and be presented with the selections they didn't eliminate.

Another issue users had was language barrier. They didn’t quite understand what was a “VS2 clarity” or a “I colored diamond”. We decided to visualize the filter by implementing symbols along with the terms. For example, “I colored diamond” is slight more yellow than a “H colored diamond”. We would represent that by reflecting the color of the diamond right onto the area of the filter to help users visually understand the difference. For the clarity of the diamond we presented the flaws by showing how many red dots are on that area.

User Test

Knowing our redesign were so different and out of the ordinary we tested the rough prototype to get some feedbacks. After a few rounds of testing we were able to synthesize and come to a conclusion to what we can keep and what needs to go. In terms of what they didn’t like, in our first iteration we decided to visualize the filter but some users still have trouble understanding the terms. Users also still have a hard time realizing they’re on “choose a setting” page. However, our idea board feature seems to please everyone as they like the idea of being able to compare creations.

Reiteration

Because users didn’t feel like there was a need for 2 options to start and how almost everyone would initially feel confused in the “choose a setting” page we decided to eliminated “start with setting” option. Choosing either option previously wouldn’t affect the end process but instead caused a lot of unnecessary confusion for the users. Users are now presented with only one option on landing page to start with.

We also refined the visualization of the filters, added some information reassuring the users their status to help users from guessing. Users are now able to view their diamond results in grid view as well as list view, when grid view is enabled, thumbnail image would be shown as diamond compared to hand for size reference.

On the review creation page we’ve added the ability for users to make last minute changes with a single click. Last but not least we’ve introduced a “build a profile” feature for users to create a fixed profile where they can select ring size and skin color which automatically filters out all the products that are in that size shown in selected skin color.

Final Product

After our final iteration our feedbacks came back really positive. Users said they can really visualize how the engagement ring would look potentially and wouldn’t hesitate to purchase from here if there were some kind of insurance provided.

We’ve presented our final redesign to our client and he happily confirmed with my team and I that he’ll be using our idea and have his team of developers integrate it as soon as possible.

--

--