Overview
Website E-commerce Diamond Jewerly
The 1st Lab-Grown Diamonds in Indonesia
Problem & Brief
This is website specializes in designing luxurious diamond jewelry. The website, initially built on WordPress, is being redesigned into a custom site with an integrated transaction system. This system enables users to create their dream ring by selecting the ring model, setting the carat weight, choosing the diamond shape, and finally determining the size, all in a step-by-step process. The design aims to reflect elegance and luxury, inspired by websites like brilliantearth.com and vrai.com. The client has also provided a draft for further development in terms of appearance, design, and user-friendliness, ensuring the site is both visually stunning and user-friendly.
Research & Analysis
A thorough analysis UI/UX design was done by looking at competitors like brilliantearth.com and vrai.com. Both have simple and elegant UI but with different user flows. The client prefers to follow the UX of Brilliant Earth because it’s detailed and complex in the ring setting and ordering process. However, this flow needs to be adjustment to be easily understand by Indonesian users, with a clear and simple flow when selecting products.
Based on the analysis, I will create a simple and elegant design for the Flawless website, with the goal of making it feel luxurious, keeping the focus on the products, and ensuring a smooth user experience. The design will have a clear user flow, with easy-to-use options and filters to help shoppers make decisions quickly and easily, while keeping the visuals elegant and fitting with Flawless premium and exclusive vibe.
User Flow & Site Map
The sitemap compiled by the project manager and me was created to thoroughly review the details of each page, making the website development process easier.
The user flow for ordering an engagement ring starts with opening the website, choose ring & diamond, and then process to checkout details and e-commerce steps.
Example, user flow with a customer persona when ordering a product from Flawless Diamonds.
Before process to the next step, Client requested a recommendation for a color palette to make the Flawless Diamonds website look elegant. I suggested using pastel colors to achieve an elegant appearance. The client chose Color Palette C for the website.
UI Design System
The first step is to develop a style guideline. This involves determining colors, fonts, button types, category and product card variations, as well as the navigation bar for the mobile version.
First, determine the primary and secondary colors from the color palette chosen by the client. Next, improve the hover colors and product filters.
Second, choose an elegant font for the Flawless website from my options when I have researched. Next, determine the design for the navbar buttons and the variants for product categories and products, including their hover states.
UI Design
Mockup Desktop & Mobile Homepage
I created two alternative design mockups as a comparison for the client, After that, continue to make a mobile version:
I implemented a design using elegant pastel colors to highlight the rings and diamonds as the main focus. The simple and elegant web design reflects high quality and creates a calm user experience, making it easier for users to focus on the product details.
Adjustment mobile version to determine layout of images and text, slider banner, category & product carousel, and then setting up the grid highlight.
Inner Page Design
After the homepage mockup was finished and approved by the client. the next step is to work on the internal pages of the Flawless website, like in the sitemap. There are 3 flows when ordering products:
Engagement Ring Page = choose product - setting shape, size, metal, carat and add engraving - select lab grown diamond - login - checkout (product detail).
Wedding Ring Page = choose product - setting ring size and add engraving - login - checkout.
Jewerly ring page = same with we= choose product - setting ring size and add engraving - login - checkout
The Wedding and Jewelry ring page has the same flow but different settings when in the product details.
The next step is checkout process. If user has an account (logged in), user will proceed to select shipping service and payment method. In order summary box, there is an estimated completion time displayed. An information icon is available, which can be clicked to provide details about the estimated completion time for custom-made items. After All confirmed, the user can proceed with the payment according to the chosen payment method.
Usability Test
Prototype
Preview this prototype to test and review the engagement ring ordering process. The journey begins by select a ring, followed by choos the diamond, and continues through all previews leading up to the final checkout. This step-by-step process ensures a smooth and user-friendly experience for customers.
Responsive Design
After the final desktop design is clear, the next step is creating a responsive mobile design, you can review the implementation homepage design of the desktop to mobile. There is a mobile navigation bar similar to an app design to ease user experience when you test the mobile responsiveness.
Don't forget to attention responsive product filter. The result when website is live and has its own different layout when opening the product category page. There's a product filter button at the bottom to make it easier for users to search for and filter products based on their preferences.
