top of page
Cover page more.png

Bespoke Jewellery Website Design

Role

UX Researcher

UX Designer

Visual Design

Prototyping

Duration

3 Months

Tools

  • figma
  • Abobe Photoshop
  • artboard Studio

Challenge

The pandemic has reinforced the importance of businesses having an online presence. However, shoppers have expressed frustrations purchasing jewellery online because of sizing, quality and the inability to visualize the jewellery on themselves. I was tasked with developing a responsive website that improves the customer shopping experience by solving these problems.

The Solution

A fully responsive shopping website that builds customer trust by reflecting the real essence of the brand, streamlining the shopping experience and using technology to replicate an in-person shopping experience.

Key Learnings

As the design process unfolded, it was crucial to build with confidence but without attachment. It was also important to test regularly with users to shed light on any assumptions made, as this allowed for iterations and led to a product that meets user needs.

Show me the goods (i.e. Prototype)

Overview

- The Barriers to Online Jewellery Shopping - 

The Path to Creating the Bespoke Website

To better empathize with the challenges that customers face while shopping, I hit the ground running by conducting 6 interviews and putting out a 15-question survey to get shopper insights on their experience browsing and purchasing jewellery. I received 130 responses. As a jewellery lover, I also reflected on my experience and combined the insights to pinpoint the main problems I want to solve. 

Approachbrown.png
How do you purchase your jewellery?
Who do you primarily purchase jewellery for? 
2Top lineBespoke.png
Do you buy jewellery from larger retailers or smaller businesses?
What is your main source of inspiration when purchasing jewellery?
2Top lineee.png
What are some of the challenges you face when purchasing jewellery? Check all that apply
2Top linejbjb.png
Where do you purchase your jewellery and why?

I mostly purchase my jewellery in stores because of the high rate of misrepresentation of quality and sizes. I also always want to see how it looks on me because most brands show lighter skin models.

Business Owner

Age 35

When you purchase jewellery, who are you buying it for, and how does that affect your means of purchasing?

I don't wear a lot of jewellery but I do purchase jewellery for friends and family which can be quite nerve-racking, especially when they have different styles. For this reason, I prefer to shop online with bigger brands as they recommend by price, occasion and much more, reducing the stress out of shopping for others. 

UX Designer

Age 26

If presented with multiple jewellery websites, what makes you choose one website over the other?

The visuals are important to me because I believe a poorly designed website indicates low-quality products and makes me wary of purchasing. Also many small business websites lack details on jewellery and are not mobile-optimized, making shopping almost unbearable.

Recent Graduate

Age 24

Research & Persona
Persona & User Journey Development

Using the data collected from the research, I defined two personas; Aisha and Faith. I focused on Aisha because she represents a larger segment of online jewellery buyers and thus is the best business strategic decision. By focusing on Aisha, I addressed most of Faith's pain points. I also created a user journey to have a deeper understanding of user needs, motivations, pain points and to reduce personal bias when making design decisions.

Key Research Insights
  • Lack of detailed product information, return conditions and reviews majorly hinder purchasing decisions. 

  • Customers depend heavily on word-of-mouth recommendations as they want to be sure of their purchase.

​​

  • Rings are particularly difficult to purchase online due to sizing complexities.

  • Though sometimes inconvenient, customers prefer to go to a store when making high-value purchases. ​

 

  • Unorganized content and unnecessary steps make ordering from mobile devices unbearable.

  • Inclusivity is still a major issue, making it difficult for shoppers to visualize the jewellery pieces on themselves.

- Who's Killing it in the Industry? - 

With a good understanding of the highs and lows in shopper emotions when purchasing jewellery, I looked at direct and indirect competitors to observe how they handle common issues and to gain insight into the best design features. I selected highly rated small jewellery brands (TINK, WELLDUNN, Linjer) and well-known jewellery brands (Pandora, Tiffany & Co, Mejuri, Monica Vinader.)

I observed similar trends across competitors on how jewellery is displayed to attract shoppers. However, the smaller brands lacked personalized recommendations, which provides Bespoke with an opportunity to stand out. Larger brands like Pandora have mass-produced pieces but have higher personalization with augmented reality to replicate the in-person experience and combat sizing issues, however, the jewellery rarely looks realistic, and it does not help with lack of representation. 

 

As Bespoke is a small business that specializes in handcrafted jewellery, the competitive analysis revealed that the best strategic decision is to capitalize on personalization features used by well-known brands. 

- Answering the Question "How Might We?" - 

Bridge the Gap Between Users and Their Goals?

From the journey map, I was able to translate pain points and challenges into the following user requirements and opportunities to inform my ideation towards potential design recommendations:

  • How might we reduce the negative emotions involved with purchasing jewellery online?

  • How might we use technology to replicate the in-person shopping experience (e.g. try on, skin colour visualization)?

  • How might we provide users with effective and personalized services (e.g. recommendations, sizing fit)?

  • How might we ensure a simple and easy-to-use experience?

  • How might we be inclusivity and accessibility at the forefront of our design? 

Measure Success

Before I started creating layouts and mocking up screens, I identified the e-commerce considerations and constraints:

  • How might we encourage shoppers to regularly use services provided on the website to have consistent sales? (abandonment rate, task success rate, conversion rate)

  • How might we create opportunities within the app to learn more about the users in order to serve them better?​​

  • How might we convey our value of transparency and accountability?

- What Are the Must-Have Features? - 

With many ideas and features in mind, I conducted voting with 3 candidates to prioritize the most important features. The final features are created from multiple iterations based on user testing. 

Easy Buying Decisions
  • Customer reviews, clear images and videos with different models to build trust

  • Detailed product information (material, images & videos)

  • Clear and easy-to-understand sizing chart with measuring tips

  • After purchase service - Jewellery care & clear return policy

  • Simple checkout process with multiple payment options

Embrace Uniqueness
  • Style Quiz - recommendation based on price, fashion styles etc.

  • Customizability with the 'create your own jewellery' option.

  • Personalization of jewellery available can find easily with filter.

  • Earrings and ring stacker 'Mix and match / Try on feature for different skin types and sizes.'

- Reducing Overwhelm with an Intuitive Flow - 

With numerous ideas and potential layouts in mind, I created multiple sketches to think freely on how to structure the website in order to eliminate complexities, what features and interactions could be used to address customer needs. 

Group 218.png
Information Architecture

To structure the website, a sitemap was created to visualize how much was content needs to be created and how the story of the website can be told. It also helped to condense the number of pages in order to keep it easy for shoppers to navigate. (Click to enlarge)

Group 223.png
Website Design

- Let's Start Building - 

Several ideas were transformed into a more tangible form by creating wireframes. As users do a lot of shopping on their phones, I started with mobile wireframes. I conducted user testing with the wireframe below and iterated based on insights from the usability testing to get the wireframes into a state I wanted to continue with and then designed the desktop and tablet versions of the website.