responsive website for a local business

E-Commerce Jewelry Website

screens from museum app
Context

During the the spring 2020 pandemic lockdown, I would take walks around my neighborhood, wistfully passing by local business shopfronts that had closed down. I missed the bustle of the area that was replaced with an eerie silence. So, when I came across the opportunity to support a small business in their UX and branding journey, CREAM Jewelry, I was eager to take it on.

CREAM Jewelry is a local, family-owned, Atlanta jewelry business that has been in operation for over 20 years. It is both a wholesaler and an online retail store, but the focus of this project was the retail website.

The Problem

The brand was pretty outdated and in need of a refresh. Additionally, business was pretty slow, and the business owner wanted the website to retain more customers on its site and increase sales.

GO TO PROTOTYPE
CLIENT:
CREAM Jewelry
ROLES:
UX Research & Design
UI Design
Branding
Prototyping
TOOLS:
Figma
Illustrator
Gsuite
Whimsical
SOURCES:
Pexels
Unsplash
King Ice (jewelry
examples)

01 research

Goal

I needed to understand how people like to shop for jewelry. This would help me create an updated online experience that is easier to navigate, bolsters website traction, and increases revenue.

arrow pointing right
methodology

+ Competitor analysis
+ Contextual inquiry
+ Customer interviews
+ Survey

Research insights
Competitor Analysis

The client already had a list of competitors that she shared with me. You can read the full summary of the research and the competitor analysis below or in Figma.

research summary and notes of competitor businesses
Customer interviews

I chatted with 3 people who really enjoyed shopping for jewelry and investing in quality pieces. This was an opportunity to understand customer expectations and how they like to shop for jewelry as well as a chance to ask them about their impressions of the CREAM brand.

Across the board, every participant indicated the importance of reviews as well as the quality of the jewelry itself, like the material and authenticity of the metals. They wanted to ensure that the jewelry they purchase is high quality, at a good price, and long lasting. Participants also wanted to see a wide selection of jewelry but paired with a website that is easy to use and included sections that recommended certain styles or pieces.

The branding of the existing site took a hard hit. Most of the comments were about the photos being inconsistent or poor quality, and overall that there was a lack of personality and personable-ness that they wanted from a shopping experience. Participants wanted to feel inspired by the site's visuals and feel more intention behind the branding.

contextual inquiry

During the interview, I also had participants complete a couple of simple tasks on the existing site and share their honest feedback so I could pinpoint what already works well and what doesn't.

The first task was to find a specific chain. Overall, they had problems with finding the piece they were looking for and expressed their frustrations with the inconsistencies of the photos, descriptions, and filters. Also, details like misspellings and un-clickable links added to their challenges.

The second task was to go through the existing check out flow. I noticed the hesitation and confusion among all 3 users, that resulted from small things like how they have to constantly scroll up to find where they left off when they move on to the next section and the lack of other payment options aside from Paypal.

View the full interview and contextual inquiry notes here.

user persona
user persona, David
top survey insights
87% of 15 participants said the most useful way to categorize jewelry is by jewelry type (ex. watches, chains, pendants, etc)
Most important homepage section for returning customers:
1 New Arrivals (60%)

2 Sale/Clearance (54%)

3 Recently Viewed Products (47%)
What makes online shopping unpleasant?
1 Too much info or clutter and you can’t find what you need (ex. bad or no filters)

2 Inaccurate or poor product descriptions
product roadmap
Product roadmap

02 information architecture

Site map

The original navigation for the website was confusing and redundant, so the main objective was to streamline the options and get customers to where they want to be more quickly.

The site map was informed by the competitor analysis, looking at other sites’ navigation menus, and then incorporating the responses from the customer interviews and survey on what people expected and preferred.

site map

03 interaction design

Task Flow and User flow

Because we want to improve website traction and increase revenue, I created a task flow for a returning customer and my user flow shows the path to purchasing an item.

You can also view the task flow and user flow in Whimsical.

task flow and user flow
low fidelity wireframes

Initially, I came up with some sketches on paper, and then moved the best ones over to Figma. I wanted the client to have an idea of what direction I was heading with the design, and took this opportunity to explain to her each of the wireframes and what was beneficial about each of the variations. Below is what we ended up going with.

+ Clear sections on the homepage showcase the company's diverse selection and also helps the business promote new arrivals. The review section was strategically placed at the bottom for the time being because the company doesn't have any reviews and will need time to build its customer base. Ideally, as the business grows and more reviews come in, this section can be moved up further to build trust with new customers.

+ The landing page has standard filters that shouldn't bring up any unexpected surprises like the original, which had non-functioning parts.

+ The product page has space for displaying multiple images at once as well as a place for a brief but impactful description and an accordion for useful details--all using effective visual hierarchy to keep the page organized and clutter-free. The recommended section at the bottom guides customers to view more products and encourage additional sales for the business.

low fidelity wireframes

04 branding & ui design

Logo & Branding

Before getting started with logo sketches, the client and I came up with a simple word map that would guide the logo design and overall branding process.

The main descriptors we landed on were
+ Powerful
+ Eye-catching
+ Hip Hop
+ Balance between trendy and classic
+ Streamlined

The final UI kit is shown in the following image.

UI kit
home page: before
home page before re-design
home page: after
home page after re-design

05 iterate & implement

Usability Testing

I was able to recruit 3 people for usability testing. Overall, there weren't a lot of challenges or suggestions that came up during testing, and the participants mostly commented on the ease and simplicity of navigating the website. This made my job easy with minimal changes.

affinity map of usability test notes
design changes

The most significant change was adding a page in the checkout process where customers could sign in as a member, create a new account, or continue as a guest.

member sign in page

06 prototype

07 reflections

Returning to the problem

CREAM Jewelry wanted to bolster website traction and increase revenue. So, I wanted to understand what would make customers want to come back to the site and purchase items. Turns out, customers were looking for a more visually inspiring, cohesive, and streamlined experience that they can trust. They also wanted to know more about the vendor and where the materials are sourced. For this project, most of the changes that catered to user experience were also beneficial for the business.

For example, I had to improve the visual hierarchy by narrowing down what main actions customers needed to take and prioritizing the most necessary links and CTAs. This not only prevents confusion and saves customers the time and frustration of winding up in the wrong place, it also helps build trust between the customers and the business, which supports retention.

Additionally, building a more cohesive brand experience & UI kit serves as a source of visual inspiration that the customers want, and it also helps the business know exactly how elements on the website should look and saves time from fixing arbitrary design decisions.

back to top arrow