Online presence is becoming essential, especially after the world has been turned upside down by COVID-19 pandemic. As UX/UI designers, we can help local businesses to be more competitive in the current market by to attracting customers and sell jewelry through their website.

The Client

Littleton Jewelry is a local family-owned jewelry store in the suburb of Denver, CO that is ready to conquer national market and adapt the eCommerce model for their business. They pride themselves in family-friendly attitude and personalized approach to each customer.

The Problem

Littleton Jewelry mainly sells jewelry in their physical store. The lockdowns and social distancing reduced the number of sales significantly, and the founder decided to attract more customers to their website and start selling jewelry nationwide. The current website already showcased the inventory, but there was no option to purchase directly on the website.

The Goal

I needed to develop an online shop page that will allow the business to sell their products online while maintaining a brand image: “small shop” appeal and and great customer service. Improving current website to make the pages consistent was another important task. The deliverables to include user research and a high fidelity prototype.

MY ROLE

In this project I was a sole UX/UI designer and I completed it within 2 weeks timeline.

1. DISCOVER

I visited Littleton Jewelry current website to understand how the business was presenting itself on the local market. I made some evaluations and came up with the hypothesis of possible pain points.

I conducted 5 contextual inquiries on Littleton Jewelry’s current website, and these were the main takeaways:

Poor description of the items
Not enough photos to showcase the product
Filters didn’t work or work poorly
There were no prices or reviews on the website

I also interviewed 5 users about jewelry shopping, and I found that these criteria are important to them : other clients reviews, price, price delivery, return conditions, precise informations on the product (size, material). When customers go to a shop it’s because they need an advice or to try the jewel. It concerns value purchase because the risk of doing a wrong choice is bigger.

**Competitive and comparative analysis** based on four competitors – Matheu’s, Trice, Walmart Jewelry, and Amazon Jewelry.

Through Competitive and Comparative Analysis I discovered that most competitors had:

Easy and clear navigation systems
Intuitive product categories
Multiple filter options to single out
only related products
Clear and extensive product description
with minimum of 3 photos per product

Littleton Jewelry has a lot of potential but its website doesn’t reflect the real essence of the brand. Redesigning the website will be an opportunity to bring the brand to a new level and attract more customers. To do this, I had to reprioritize the information and add the essential elements that were missing with the goal to enable successful online purchases.

2.DEFINE

From the research findings, I defined our persona – Jane. She is a careful critic and always reads the reviews, product description, and pays attention to how easy it is to return the product in case it doesn’t fit.

Jane: “When I want to buy a jewel, I want to have as much information as possible so I can be reassured and buy without the fear that it’s not as I expected.”

The Problem Statement

Mila needs a better way to shop for jewelry online because she would like to support local small businesses.

How Might We

improve Jane’s jewelry selection process?

supply Jane with all necessary tools to make her search and checkout process easier and quicker?

Before I started to sketch my concept, I rebuilt the Information Architecture of the website. Some items in the global navigation needed to be renamed because they were not clear enough to fit to customers’ mental model, and besides but they weren’t at the right place. Here is a visual of a new site map:

For this, I conducted an open card sort with 11 users that helped me improve global navigation and made the search more intuitive.

User Flow

I chose to focus on this happy path – the two tasks for our persona Jane was to a) find an engagement ring and add it to the cart and b) pick a pair of best-selling earrings and then purchase those two items.

3.DESIGN

The Design System

To build the design style tile I decided to go with pink color palette as the color pink is thought to be a calming color associated with love, kindness, and femininity.

The Littleton Jewelry logo, due to research findings, had a corporate vibe, so I redesigned it. I picked a script font as its hand-written nature would be more suitable for a family-owned small business like this one and to also provoke ideas of femininity, elegance, and creativity.

Navigation and Filters

As mentioned previously, contextual interviews and user interviews revealed that the navigation needed to be improved as it wasn’t intuitive. This new navigation showed all product categories that could be accessed quickly through the navigation bar.

When users were on the shop page, they unanimously reported that current filter and sort options were not helpful when it came to finding the right product. I made improvements by adding more relevant options to enable the shoppers find desired jewelry in a more efficient way.

Sketching and Wireframing

After the initial research was completed, I started sketching the possible solutions on the paper to layout the information hierarchy quickly and visualize the big picture. From there, I used Figma to create mid-fidelity wireframes.

TESTING AND ITERATIONS

After creating interactive grayscale prototype, I conducted 5 usability tests and discovered that some additional improvement was needed.

Key Takeaways

Adding cart icon to the homepage for easy access to the shopping cart
Adding reviews to individual product page
Moving my account | wishlist to the right side of the page

I then iterated on my designs and reflected the changes in a high-fidelity prototype. Testing had a high success rate – all three users completed the tasks in minimal time with no errors.

4.DELIVER

Final Prototype

The biggest challenge for me in this project was to translate the main research findings into UI solutions, and due to the time constrains I needed to prioritize which changes to work on first.

NEXT STEPS

Thanks to my redesign, Littleton Jewelry has a solid base to improve and to go further in the costumer experience.

Here are the features we would like to develop:

improve the description of the inventory so the right item becomes even easier to find
explore the VR to improve customer experience by offering them to try the product on though their smartphone
redesign other pages so they are more consistent with the new branding

Thank you for reading!