Ethan.Z
%20(3).png)
01
Overview
Duration:
3 months
November 27th - March 2nd
Team:
2 Designers, 1Product Manager, 1Copy Writer, 4 Developers
My Role
Verlas is an e-commerce company specializing in diamond jewelry. Upon joining, I discovered that the company was experiencing low revenue. As a UX designer, my contributions include:
-
Led the redesign of the jewelry detail page to optimize the diamond jewelry shopping experience.
-
Conduct user research, including interviews and competitive analysis, to identify issues impacting Verlas' revenue.
-
Aligned copywriters and engineers to revise the information architecture of the About Us page and design a new Blog Page to improve SEO.
Tools:
Figma, Adobe Creative Suites, Notion
Problem
Verlas exclusively sells its products through its website, which currently experiences low traffic. Additionally, the conversion rate for visitors who do access the site falls below industry standards.
Outcome
-
Users can make purchase decisions faster with new design patterns.
-
The redesigned product page increased monthly sales by 8% in April.
-
The New Verlas blog page brings a 15% increase in monthly website traffic.
%20(3).png)
Bring clarity and the best possible quality to the diamond jewelry
Comprehensive product detail and diamond education
Help customers understand what they're buying, reducing uncertainty and hesitation.
Verlas' history, expertise, and commitment to quality
Position Verlas as a trusted authority in the diamond jewelry shopping industry
Interesting and informative blog posts
Increase the visibility of Verlas in search engines to attract visitors to the website.
Context
02
About the product
The importance of Verlas’ website
As a rapidly expanding e-commerce company, Verlas relies exclusively on its website as the sole platform for selling its products.
Discovery
The struggles in Verlas’ low revenue
Google Analytics indicates that the website's traffic and conversion rates are below industry standards, contributing to Verlas' low revenue.
Bad website traffic performance
Low conversion rate
User Research
03
Interview
Dive deeper into the target users' experiences
To identify the user pain points when shopping at Verlas and understand the barriers to selecting Verlas as their diamond shopping destination, I choose user interviews as my primary research method.
12
Interviewees
-
Current customers
-
Potential jewelry buyers
8
Questions
-
Actions
-
Frustrations
-
Expectations
3
Outcomes
-
User quotes
-
Pain points
-
Jobs to be done
Research Finding
3 pain points lead to Verlas’ low revenue
I synthesized the interview insights into the following affinity map and summarized 3 pain points that should be primarily considered during the design phase.
Insufficient information about jewelry details and diamond education
Verlas can’t be recognized as reliable diamond jewelry seller
Verlas can’t be easily found in search engine
Job to be done
-
Provide comprehensive information about product details, diamond education, and Verlas’ expertise to encourage customers to purchase on the website.
-
Enhance Verlas' SEO to boost website traffic and improve its visibility in search engine results.
To increase Verlas' revenue..
How might we effectively educate users about Verlas' products while increasing website traffic to enhance conversion rates and improve SEO?
Ideation
04
Product Strategy
Redesign the Verlas website to erase customers’ uncertainty and hesitation about making the purchase
To solve 3 key pain points, I communicated with the product manager in the early design stage and listed three product strategies.
Insufficient information about jewelry details and diamond education
Describe product details with data, and provide supplementary materials on diamond education.
Verlas can’t be easily found in search engine
Increase the presence of diamond and jewelry-related keywords on Verlas' website.
Verlas can’t be recognized as reliable diamond jewelry seller
Share Verlas’ story, mission, and values to build trust and credibility with customers.
Design Exploration
05
User Flow
Integrate diamond education to erase users’ hesitation
I redesigned the user flow to incorporate diamond education within the purchasing decision-making process, streamlining the effort and time users spend understanding the products they are considering.
Diamond Education
Competitive Analysis
Analyze competitors’ brand storytelling and product education
I aim to integrate diamond education into Verlas' product description pages without causing information overload. To accomplish this, I analyzed how Verlas' competitors present detailed product information to their users and demonstrate their expertise to establish trust and credibility.
Pros:
-
Provide diamond education underneath the jewelry details.
-
Allow customers to use the AR try-on feature to see how the jewelry looks in reality.
-
Display complementary items to encourage customers to explore additional products.
Cons:
-
The product customization section contains unnecessary information.
-
The absence of jewelry measurements results in a lack of transparency in product details.
-
The product price is obscured by excessive text on the product page.
Concept Validation
How do we showcase comprehensive jewelry details with data while incorporating diamond education?
Integrate jewelry details including measurements, materials, and diamond specifications into the product description. Below the description, provide educational content about diamonds. In concepts A and B, we adopted a more streamlined design pattern, featuring enhanced product images and layout. This approach allows customers to gain fundamental knowledge about diamonds and the specific jewelry they are viewing without overwhelming them with information.
Concept A
Concept B
How do we build trust and credibility with users?
Incorporate Verlas' history, expertise, and commitment to quality diamond jewelry into the “About us” page and create a pop-up window about Verlas’ authenticity and ethics on each product page. In the designs below, we introduced concept A, featuring a more intuitive interface that simplifies user interaction needed to grasp Verlas’ story, mission, and values.
Concept A
Concept B
How do we improve Verlas SEO?
We are enhancing our SEO by incorporating additional keywords related to diamonds and jewelry, and implementing schema markup on the website. As a short-term strategy, we have chosen article markup, establishing a blog page for Verlas. Given the current lack of extensive product reviews, we plan to implement review markup as a long-term strategy.
Concept A
Concept B
Evaluation
06
Usability Testing
Evaluate prototype feasibility and effectiveness
To collect more user feedback on our redesigned website, we recruited six users for two rounds of usability testing. During these sessions, participants were tasked with completing activities such as purchasing a diamond ring, exploring information about Verlas, and searching for Valentine's gift resources. By monitoring task completion times and observing user reactions, I was able to identify the following pros and cons.
Participants:
Me as a facilitator:
Provide Feedback
Interview
Task Performance
Time Recording
Observe
Think out loud
Pros:
-
Customers gain a deeper understanding of Verlas' products through the detailed measurements provided.
-
Customers acquire basic diamond knowledge, empowering them to make informed purchasing decisions.
-
With thorough information about Verlas' history and expertise available, customers can perceive Verlas as a trustworthy diamond jewelry seller.
Cons:
-
It's complicated to browse similar products.
-
The About Us page contains excessive text, causing some customers to lose patience.
-
The Blog Page features a wide array of blog content, overwhelming customers when selecting articles of interest.
Design iteration
07
Refinement #1
Underscore the versatility and compatibility of Verlas' product
Before: The user can only view the selected product on the product detail page.
After: Add a “You may also like” section to presenting complementary items or related accessories emerged as a potent method to engage customers in exploring more products, potentially boosting the overall order value.
Refinement #2
Build trust with customers without information overload
Before: Our copywriter aimed to describe Verlas in great detail in the initial concept, which resulted in a text-heavy About Page.
After: Enhanced the page with additional images for better visual representation, condensed the content to provide a comprehensive impression of Verlas, and introduced CTA buttons to facilitate deeper user engagement.
Refinement #3
Apply more schema markup to the Blog Page
Before: Users can only filter the blog by the title and category to choose what kind of content they want to learn about.
After: Add estimate reading time and category tag on each blog thumbnail. It can help users make informed decisions about whether to click on the blog or skip it
Final Outcome
06
Project ​Impact
Enhanced conversion rate and SEO performance
According to the usability test, the redesigned product page reduced users' decision-making time by 25%. Following the launch of the new site, the following KPI confirmed that my design solutions were effective and impactful.
15%
Website Traffic
10%
Conversion Rate
8%
Monthly Sales
Takeaways
07
01
Great communication leads to streamlined workflow
During the redesign of the About 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 Verlas 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.
02
Think broad
During this project, I initially focused on the desktop interface only. 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.