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:

• Accessible Design — Was there enough color contrast between backgrounds and fonts?
• Consistency — Did every product page have a similar format to make shopping more intuitive? Were there any broken links or images? Was the design system (color, font, buttons, text hierarchy, layout) being closely adhered to?
• Navigation and Overall Experience Issues — Did the product pages feel similar (and therefore more intuitive for a user) to other e-commerce product pages on other sites? Was there any awkward navigation issues that a user may potentially find difficulty with? Was there anything annoying a user may have to deal with which would discourage the user from using the site in the future?

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:

• The severity score was assigned on a scale of 1 through 5, with 1 being a minor issue that doesn't have urgent need of being fixed, and 5 being an issue that severely impacts the user experience and needs to be addressed as soon as possible.
• The ease of implementing score was also assigned on a scale of 1 through 5, with 1 being an issue that would only need minimal work and minor coding to fix, and 5 being an issue that would require a lot of work and major coding to fix (on both the front and backend).

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:

• Issues with customization — Custom jewelry is an important part of Cut + Clarity brand, with the user being able to create a custom phrase (or name) accentuated by a wide variety of gemstones to choose from. For the custom jewelry with multiple stones, there were multiple buttons to click on to choose each stone. Although it was organized and separated by stone number, there were so many gemstone options that it crowded the page.
• Readability issues — The font style used on the site is very thin and the colors used for those fonts are, in some places, very difficult to read due to lack of color contrast, causing accessibility issues.
• Excessive pop ups — Constant pop-ups encouraging users to subscribe be notified of updates are extremely annoying, and every time a user clicked onto a new page, a pop-up appeared, and it still popped up even after creating an account.
• Awkward product scrolling — On the product pages, the images scrolled through first, followed by the product description. But not seeing the full product description before scrolling through the images (both up and down), would require the user to have to go all the way up and all the way down to see the product description after viewing the images, which can create a clunky user experience.

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.

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:

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.

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:

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:

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:

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:

• The "zodiac charms" section in the navigation bar was perpetually bolded, even when not in a hover state. I understood that from the brand side they were trying to highlight this specific collection, but it was inconsistent with the rest of the navigation bar, which could lead to confusion.
• The "zodiac charms" was also the first item in the navigation bar, followed by the "jewelry" section which had the dropdown to navigate to all collections offered by the brand, and then the "custom names" and "design your own", which, like "zodiac charms" are collection names. It seemed unorganized to not put "zodiac charms" next to "custom names".
• Another issue was the "custom names" and "design your own" section in the navigation bar. They seemed to be describing the same thing (both involve customization). However, upon clicking, the "design your own" collection was more about the custom gem selection for a classic jewelry piece, while the "custom names" involved creating a personalized word or message along with the custom gem selection.
• The "jewelry" dropdown, although it was decently organized by product type — i.e bracelets, rings, necklaces, earrings — when it was further organized by jewelry material, there was consistency issues with the order the "gold" and "diamond" type of each product were listed. Some products had "gold" listed first, others had "diamond listed first.
• Also, users wanted a section in the "jewelry" dropdown that listed all of the brand's special collections for easier browsing.

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:

• All items on the navigation bar rendered in a regular font-weight; no bolding.
• In the "jewelry" dropdown I put diamond products first, followed by gold. I also added a "collections" section in the dropdown.
• I removed "design your own" and moved the "jewelry" dropdown to the left in order for it to be the first item on the navigation bar.

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.