top of page
Verlas_FinalLogoDesigns_HD_edited.jpg
Duration:

3 months (November 27th - March 2nd)

My Role:

UX Designer

Team:

Product Manager, Designer, Copy Writer, Developer

Tools:

Figma, Adobe Creative Suites, Notion

MacBook Pro 16.png
Mobile 2.png
mobile 1.png

Project Goals

Verlas is an e-commerce company specializing in diamond jewelry, dedicated to enhancing the online luxury jewelry shopping experience by bringing the best aspects directly to customers' homes, eliminating the hassle typically associated with such purchases. Currently, Verlas is experiencing issues with low revenue.📉 As a UX designer, my role involves identifying the underlying problems contributing to this issue and proposing design solutions informed by research and analysis to boost sales. 📈

Define

Users' feedback about Verlas

To align with the project goals, I conducted user interviews with Verlas' potential customers. This research method aimed to understand the pain points users face when choosing Verlas as their diamond jewelry shopping option and making purchases on the Verlas website. I synthesized the interview insights into the following affinity map:

Affinity map 1_edited.png
affinity map 2-2.png

Job To Be Done

1. Help customers quickly understand the jewelry details to make an informed purchase decision.

2. Help customers easily choose and purchase diamond jewelry online, ensuring the jewelry's authenticity, quality, and value.

Design Direction

How might we make it easier and quicker for customers to understand and trust our products, so they feel confident making a purchase?

Audit

Current site evaluation

​Before diving into my design solutions, I had to pinpoint exactly what was hurting the shopping experience on Verlas’ website. Here’s what I discovered:

verlas fullpage_edited.jpg
  1. The product page displays only one picture and customization option at a time, lacking a comprehensive view.

  2. After completing the customization options, there is no summary or recap of the product details.

  3. No size guide is provided for accurate ring sizing

  4. If customers do not know about choosing diamonds at all, they need to leave the page to do some research.

about full page_edited.jpg
  1. ​Lack of information about the Verlas' history, expertise, and commitment to quality.

  2. No detailed information about the unique aspects of Verlas, such as its dedication to ethically sourced diamonds, sustainable practices, or exclusive designs.

Ideation

Competitive Analysis

Having identified the problems to address, I conducted a competitive analysis between MEJURI, VRAI, and Grown Brilliance to explore potential solutions and improvements for Verlas' website. The following insights emerged from the competitive analysis:

Verlas Competitive Analysis.png

Design Hypothesis

Following a comprehensive review of Verlas' website and competitive analysis, I have identified several areas of potential enhancement for the Verlas' website. The following proposed solutions are designed to enable customers to make informed purchasing decisions with greater ease and efficiency

Integrate Diamond Education on the Product Page.

Transparent product detail

Highlight Unique Selling Propositions (USPs)

Brand Storytelling Integration

Comprehensive Size Guide

Use augmented reality (AR) try-on features to enhance visual representation

To narrow down the final solution, I want to know which solution can best help customers make informed purchase decisions. I used a survey to do an evaluation.

Pie Chart XL.png

According to the survey result, I was supposed to pick the top 3 as my final solution. However, Verlas got some technique constraints with the AR try-on. After communicating with stakeholders, we decided to use high-resolution pictures to improve the product's visual representation and integrate a size chart on the product page. To help customers make informed purchasing decisions with greater ease and efficiency, my final solution is a redesigned product page with:

Diamond Education 💎

Transparent product detail 📃

Comprehensive Size Chart 📏

High-resolution product pictures 🔍

Design

Transparent product detail 📃 High-resolution product pictures🔍

For the redesigned product page, I've implemented a three-column layout to provide a holistic view encompassing product details, high-resolution images, and customization options. This layout caters to the natural reading flow of left to right, top to bottom, positioning the crucial product information prominently in the upper left corner to aid in quick decision-making. The center is dedicated to showcasing detailed product images, while the right column offers various customization options. This design enables users to simultaneously review product details and visualize changes as they explore different customization choices, streamlining their shopping experience by reducing the effort and time needed to comprehend Verlas' products.

Solution 1.png

Comprehensive Size Chart 📏

I implement a size guide underneath the product detail. When users have questions about choosing the right size for their jewelry, they can check out the size guide to find the perfect fit. It helps reduce customers' efforts in jewelry customization.

Diamond Education 💎

I created a blog section to educate users who don't know about diamonds. The 4Cs of Diamonds (color, clarity, cut, and carat weight) can give users a basic knowledge about how to choose diamonds. If users have questions about what diamonds Verlas uses for their jewelry, they can refer to Our Authenticity & Our Ethics. The blog section reduces users' effort in learning diamonds. And it can ensure the jewelry's authenticity, quality, and value.

Test & Iteration

Three-column to two-column

User testing revealed that a three-column layout led to a cluttered page, overwhelming users with excessive information and choices. This often resulted in decision fatigue, diverting attention away from the main objective of facilitating a purchase. To address this, I transitioned to a two-column layout, ensuring a more organized and focused display of the product. This adjustment simplifies the user's information processing, preventing them from feeling overloaded and streamlining their path to making a purchase decision.

Price recap and finance option

Feedback from usability testing revealed that users found it inconvenient to scroll back to the top to view the subtotal price after completing their customization choices. Additionally, considering the high cost of diamond jewelry, there was a desire for financing options. In response, I positioned both the subtotal price and a financing link prominently after the customization process, streamlining the user experience and addressing their financial concerns.

Dive deep 2.png

Dive deep

Aiming to enhance Verlas' sales, I delved into identifying further opportunities for sales growth following the completion of design refinements. The strategy of presenting complementary items or related accessories emerged as a potent method to engage customers in exploring more products, potentially boosting the overall order value. To leverage this, I created a "You May Also Like" section. This addition is designed to underscore the versatility and compatibility of Verlas' diamond jewelry with other offerings, paving the way for effective cross-selling and upselling, thereby aiding Verlas in maximizing sales opportunities.

Final Design

Style Guide

Colors.png
Headings.png
Body.png

Result & Reflection

The redesigned website effectively addressed the following project goals:

  1. Help users make informed purchase decisions quickly

2. Reduce users' effort to understand Velas'        products

  1. The redesigned product description page effectively communicates the unique features, quality, and value proposition of the diamond jewelry, persuading potential customers to make a purchase.

  2. Prior to the implementation of the new design, users typically spent an average of 12 minutes on the product page before deciding to make a purchase. Following the implementation of the redesigned product page, this duration has been reduced to an average of 9 minutes, indicating a more efficient decision-making process for users.

  1. Product descriptions were optimized with relevant keywords like diamond shape, carat weight, and diamond setting types. Users can find the correct information with fewer clicks and scrolls.

  2. Previously, users often had to exit Verlas' site to seek answers to their questions about diamonds. With the updates to the product page, users can now seamlessly explore the product information, specifications, and educational resources without the disruption of leaving the website, streamlining their research and decision-making process.

My reflection:

1. Synthesize idea with teammates before starting the project

2. Responsive web design

During the redesign of the Product Page, there was a lack of communication regarding my design concepts with our copywriter. After we had both completed our respective tasks, we realized that the extensive text he had written about the diamond blog thumbnail did not align well with the layout I had designed. Had we collaborated and shared our ideas earlier in the process, it could have streamlined our workflow and made the overall process more efficient.

During this project, I initially prioritized the desktop version design. However, the reality is that the majority of users spend significantly more time browsing on their mobile devices compared to desktops. For my next project, I need to adopt a responsive web design approach from the outset to ensure my creations seamlessly adapt and provide optimal experiences across various screen sizes and devices.

bottom of page