Full-flow jewelry e-commerce site design from scratch.
Duration
July - September 2024
Type + Company
Freelance Paid Contract (2 mo)
Electra Fine Jewelry
Role
Initial & Lead Product Designer
This project was completed during a freelance contract with Electra. Electra is a lab-grown diamond, fine jewelry retailer. Electra’s USP is the prioritization of serving the consumer personally through services such as customizing their own fine jewelry designs, styling appointments, jewelry maintenance, and more.
The project
I was hired to create all the screens for the e-commerce site from scratch. This includes conducting user and market research, user testing, and low-fi and hi-fi mockups for the landing page, navigation bar, product search pages, individual product page, shopping cart, checkout, about Electra page (including blog posts), and a customizing jewelry page including a multistep form for customers.
Empathize & Define
To get acquainted with the industry and understand what was needed for the multiple screens, I started by conducting a competitive SWOT analysis by researching other fine jewelry companies.
Competitive Analysis
Industry Research and Decision-Making Process
As the solo designer for this project, I aimed to deepen my understanding of the fine jewelry and e-commerce industries to align the Electra website with market standards and customer expectations. To achieve this, I consulted with four industry experts to identify essential features for a fine jewelry e-commerce site.
Ultimately, the final decisions were made in collaboration with the CEO, focusing on what best suits Electra's vision. Below, I’ve highlighted the key features typically required for a fine jewelry website and color-coded which we deemed relevant or not for Electra.
The general journey map to a retail e-commerce experience is standardized, however, since Electra’s USP is users having the ability to customize their own jewelry, it strays from the traditional e-commerce experience slightly. Therefore, I created a journey map for the specific user that is looking to customize their own piece, so I can clearly map out how I want to approach the web design in an intuitive manner.
User Journey Map
Ideate
Initial Low Fidelity Mock Ups
User Testing
As I was creating iterations of designs, hosted user testing sessions with 3 participants to understand the current pain points of my users through each stage of my design process. This helped me streamline my decision making, so that I can identify areas that need work and why.
User Testing Results - Intuitive Navigation
My first ideation session for the intuitive navigation started with four main tabs: Jewelry, Shop By Cut, Custom, EDU. Within each main tab, there would be subtabs.
The jewelry tab was the primary one for users to hover if they were to browse, so it naturally had a lot more subtabs, making it very “hover-heavy” in that one section, making the entire navigation experience feel unbalanced.
Secondly, “Shop By Cut” is primarily associated with rings, so it wasn’t a logical decision to have it be an entire main tab.
For the second and final ideation session on designing an intuitive navigation bar, we organized each main tab by product category. This structure provides a clearer, more laid-out browsing experience, allowing users to shop with intention and explore each category in detail.
By enabling more specific searches within each product category, it would ultimately lead to more relevant results and improve overall user satisfaction. Having each tab devoted to a product category also allows more room to advertise product-specific trends!
The other tabs remained the same, with an additional tab for Him and Her gifts.
