Creating a More Intuitive, Accessible E-Commerce Experience for Users

Cut + Clarity

My Role: UX design contractor and researcher

Case Type: User Research, Heuristic Evaluation, Accessibility Design

What is Cut + Clarity?

Cut + Clarity is a jewelry e-commerce site that specializes in custom, handcrafted jewelry. The brand seeks to eliminate waste and increase efficiency by using 3D printing and laser cutting, which also has the added effect of making the jewelry sold more affordable.

Figuring Out the Problems

I was brought on by the company to find inefficiencies and usability issues, and then design solutions to solve those problems, so as to bring more sales by decreasing user drop-off.

I began by performing a user experience audit on the site and trawled every single page on the site, including product pages for every inventory item, about pages, and promotions pages.

The things I looked for included:

Utilizing research tools — Heuristic Evaluation

I compiled every issue into a Google Sheets spreadsheet, so that the stakeholders could collaborate on tackling the issues I uncovered.

I decided to do a heuristic evaluation to identify and organize the problems I encountered on the site, because I wanted to see what the Cut + Clarity team should tackle first, and to prioritize all their issues for efficient and agile implementation.

After identifying the issue, the location of the issue, and the description of what the issue entails, I assigned a severity and ease of implementing score:

I then organized the spreadsheet by putting the items with with the highest severity score first, and it cascaded down from there.

Here is a glimpse at the spreadsheet I created:

What are the issues?

After deep-diving through the entirety of the Cut + Clarity website, I summed up the overarching and core issues that needed to be resolved, whittling it down to 7 main issues. A sampling of these included:

Brainstorming Solutions

Next came the fun part — figuring out user-friendly solutions via sketching and brainstorming. Using different colored dry erase markers and post-its on a whiteboard, I compiled the following:

On the left-hand column, I detailed the issues, and on the right-hand column I wrote a potential solution, followed by sketches of how that could look.

Users Like The Site, But Struggle with Navigation

Overall, the Cut + Clarity site was very solid as far as an e-commerce site. During user testing, one user noted that the site looked “beautiful” and she immediately wanted to have her husband purchase one of the pieces for her birthday. The site was relatively easy to navigate, and for the most part reflects e-commerce norms.

Despite the clean interface, user tests also indicated that they had some trouble with searching and navigating the site. During the test, I told users to find a bracelet that would have their zodiac sign on it, and it took longer than it should have for users to find the product.

A look at the original Cut + Clarity page

After compiling my audit and user research findings, I showed the stakeholders my assessment of their site, and explained the main things that needed to be fixed. There were small things that they could easily fix on their own (such as the excessive pop up problem and fixing broken links), but there were other issues that needed to be designed and iterated upon until an effective solution could be found.

The stakeholders agreed with my critiques, and they wanted me to focus on redesigning the homepage to reflect user needs.

Iterating the Design for Accessibility and Readability

Because I was focusing on the homepage, I recreated the homepage in Figma, and created wireframes focusing on each specific issue I was tasked with solving.

One issue I needed to figure out was the accessibility and readability of the fonts and color system. Specifically, in the section dedicated to featuring "stackable rings"

"Stackable Rings" before iterating:

The gray font faded into the skin-tone of the hand model in the image, rendering it nearly illegible, and the fonts were extremely thin, which only exacerbated the illegibility. To correct this usability issue, I needed to increase font weight and color contrast.

Solving font and color accessibility

The site's style guide and design system incorporated two fonts: Avenir and Sackers Gothic STD. In the case of the stackable rings section, the title used Sackers Gothic STD and the "shop now" button used Avenir.

Once I identified the brand's fonts, I attempted to increase the font weight. However, while Avenir contained different font weights in its font package, Sackers Gothic came in only one font weight. And I couldn't increase the font weight of one font and not the other one — that would cause consistency issues:

The original lighter font weight of Avenir (iteration on the left) matches the aesthetics of Sackers Gothic and the Cut + Clarity brand better than the thicker font weight (iteration on the right)

And the original font weight also fit the refined brand sensibility of Cut+ Clarity, and it was important to maintain that throughout the redesign.

So the next course of action was experimenting with contrast. I wireframed two different potential approaches.

With the first, I surmised that the Sackers Gothic STD text could be white like the button text beneath it, which would contrast better with the image than the original gray. This would also enable more visual consistency between the title and button.

For the hover state, instead of changing the color of the text to the brand's sophisticated orange-brown shade (which, like the gray color, blended into the image behind it, rendering the text even more illegible), I thought an overlay over the image could fit with the elegant brand sensibility quite nicely.

Solution #1 — change font color to a more readable and sophisticated white, and the hover state to a gray overlay over the whole image

The solution was elegant, and fit the brand's needs, but I wasn't satisfied by the lingering accessibility issues caused by the lack of color contrast. The white color, while more readable against the model's hands in the image, still wasn't fully visible, and some users (especially older users who require reading glasses) would have difficulty reading it.

This solution also exposed the readability issues of the "shop now" button, which was also in white. Before, the poor visibility of gray color of the title masked the color contrast issues with the button because the gray color was so bad in comparison.

I realized the image needed an overlay in both the regular and hover state. But I didn't want to totally obscure the quality of the image by hiding it behind a sheer layer, since the image was a key part of the aesthetic presentation of the product on the homepage. So I came up with an overlay that would only take up the lower portion of the image, that would get more opaque upon hover. Here's how it looked:

Solution #2 — keep the font color white, and add a very sheer overlay at the bottom of the image that becomes more opaque upon hover

This second solution stayed true to the brand's visual identity while also maintaining accessibility standards. This is why, upon presentation to the stakeholders, this was the solution I recommended out of the two I came up with.

And so we ended up using the second solution, albeit without the hover state increased opacity since the stakeholders felt that was unnecessary.

"Stackable Rings" after iterating:

The final version has an overlay that is less gray and more black, which fits the richness and warm tones of the brand's color palette

Here's a before and after to showcase what a difference these tweaks made:

Solving navigation for usability

Another issue that needed to be resolved was the navigation on the homepage. This was how it looked originally:

The original navigation dropdown only divided products by "type", and the navigation bar had a lot of elements that didn't necessarily help a user find a specific product

At first glance, the navigation bar and dropdown seemed to follow basic e-commerce best practices. However, it wasn't intuitive, which could lead to users to finding difficulty navigating the site. Here were the main issues:

To help understand how I could make the brand's homepage navigation better, I looked to successful brands like TopShop for competitive research and design inspiration.

I then fixed the navigation bar by coming up with a high fidelity wireframe. This is what I changed:

The high fidelity wireframe I presented to stakeholders

I presented this to the stakeholders, who were mostly happy with my design solutions, but they didn't like that I eliminated a whole collection section in the navigation bar by getting rid of "design your own".

After brainstorming together, we came up with an alternate solution: instead of having that be a singular navigation element, it should be a dropdown element similar to the "jewelry" dropdown element, with all the personalization products nested within.

And instead of using hyper specific brand terms like "custom names", the brand should use terms that colloquially describe succinctly this important aspect of the brand's business. The term I came up with was "personalized", which would indicate to a user that they could personalize their jewelry in a broad sense. And then, in the dropdown, the brand could list all their collections that are customizable.

This was a solution that satisfied the stakeholders while also helping the user understand the Cut + Clarity product while browsing through the site.

This is what the final result currently looks like on the site:

And just to give you a sense of how this navigation bar evolved, here is a video showcasing the before, the first iteration, and the after:

What's Next?

This is an ongoing project, one where the design will constantly evolve as the needs of the brand evolve.

The stakeholders told me that they've noticed a significant increase in user retention after they implemented my designs and critiques, and that the user drop-off rate decreased by approximately 50%. which underscores how important usability is to attracting users to an already aesthetically pleasing website.

Going forward, we will be doing more UX copywriting to decrease confusion and help our users understand the brand better. We will also be continuing to strategize on how to fix outstanding (but not severely impactful) UX design issues despite working with a limited developer team.