Project Objective
Enhance Personalization: Provide customization options that empower clients to create unique, meaningful rings that reflect their individual style and preferences.
Optimize Customer Experience: Streamline the customization process with intuitive, user-friendly steps that simplify the journey from concept to final design.
Drive Revenue Growth: Increase revenue per order (RPV) and average order value (AOV) by offering diverse, attractive customization features that encourage clients to personalize their designs.
Step 1
Select a Gemstone
Step 2
Design Your Ring
Step 3
Place your Order
Introduction
The acclaimed "Craft with Angara" (CWA), an exclusive "Design Your Own Engagement Ring" journey from Angara.com, is a digital marketplace that offers consumers the resources to construct a bespoke engagement ring in a mere three simple phases. CWA personifies each client's dream, enabling them to narrate their tale through the grace of multi-coloured gemstones and brilliant diamonds.
Construct Your Personal Ring Item debuted as “Design With Angara”
My Role
Design Led - Product Manager
lead UX Designer
Timeline
July 2023 - June 2024 (1st phase launch and 2nd phase iteration)
Our Customer Base
Age: 25 - 60
Income: $50,000 - $145,000+ annually
Buyer Demographics: 70% male, 30% female
Relationship Status: In a relationship or married
Key Values: Trust and authenticity
Average Purchase Timeline: 2-3 months from awareness to purchase (soft conversion)
My Process in Building “BYO” Engagement Ring Product
As the lead for end-to-end product development, I managed both high-level strategy and hands-on design execution to launch the “Build Your Own Engagement Ring” platform.
My responsibilities included prioritizing feature development, conducting customer research, and designing the user interface. I began with competitive research to identify market gaps, uncovering a key trend: the rising demand for lab-grown diamonds and gemstones. I then led design sprints to ideate, prototype, and test concepts directly with users through focus groups and A/B testing, iterating based on feedback. Collaborating with cross-functional teams including business, merchandising, and technology ensured that each feature aligned with user needs and technical feasibility.
Discover
Market Analysis
Online Market Growth: The global online jewelry market, valued at $57 billion, comprises 16-17% of the total market, with the U.S. online segment at $9.8 billion, reflecting strong digital demand for customizable products.
U.S. Market Significance: At $60 billion, the U.S. accounts for 18.5% of the global jewelry market, signaling a prime audience for personalized engagement rings.
Rising Gemstone Demand: The U.S. gemstone jewelry market is projected to grow from $32.38 billion in 2023 to $55.96 billion by 2033, showing a strong trend toward unique, customizable pieces.
Research
Engagement Demand Peak: Approximately 2.25 million U.S. engagements annually, peaking in November and December, offer a targeted opportunity for online customizable rings.
Cater to Color Trends: Most competitors offer a wide selection of diamonds but limited options for colored gemstones. This presents a key opportunity to meet the growing demand for colored gemstone jewelry alongside traditional diamonds.
Competitor Research
Our competitive UX research provided valuable insights into the market from a user perspective, highlighting common pain points in the jewelry-buying experience. We identified several UX issues, such as complex features, confusing navigation, excessive customization steps, and redundant calls to action, all of which contribute to user overwhelm.
Major Opportunities
Streamlined Process: Simplify the customization journey by reducing steps.
Enhanced Visuals: Incorporate high-quality gemstone images with 360° view videos for an immersive, realistic experience.
Extensive Gemstone Variety: Offer a diverse range of 37 colored gemstones, meeting varied aesthetic preferences.
Curated Selection: Limit choices to premium-quality stones to prevent decision fatigue and enhance user confidence.
The research helped summarize our major competitors' strengths and weaknesses and revealed opportunities for our product to differentiate itself through improved UX.
Empathize With Users
Conducted over 50 user interviews across 10 focus groups (5 users per group) on platforms like UserTesting.com to gather in-depth insights. Within our design team, we used user journey mapping to pinpoint pain points, ultimately identifying key user motivations.
Brainstorming and user journey mapping activity with the team.
After identifying key user motivations, we proceeded to plan and ideate the initial user flow, integrating various features to enhance the experience.
Ideate
Ideating Initial User flow
Through identifying key opportunities and building empathy with end users via journey mapping and interviews, we crafted a streamlined user flow to incorporate essential features for the MVP (Phase 1) launch.
User flow - 1
In the user flow, we designed two intuitive steps to guide users through the core functions needed to create their “Dream Engagement Ring.” This streamlined approach not only simplified the customization process but also enhanced the user experience by minimizing decision fatigue and ensuring a seamless journey from start to finish.
Step 1
Select a Gemstone
Apply filters
Browse featured gemstones
Browse exotic stones
Inspect gemstones with 360° views
Select a gemstone
Add gemstone to a ring or purchase it loose
Step 2
Design Your Ring
Customize ring head, shank, and metal.
Change selected gemstone if desired.
Preview customizations in real-time.
Add optional features like "Free Engraving."
Add to cart.
Wire-framing and Designing
In the user flow, we designed two intuitive steps to guide users through the core functions needed to create their “Dream Engagement Ring.” This streamlined approach not only simplified the customization process but also enhanced the user experience by minimizing decision fatigue and ensuring a seamless journey from start to finish.
Ideating “Step-1”
Wire-framing: STEP-1 “Select/Choose a Gemstone”
Wireframe Exploration: STEP -1 “Choose a Gemstone”, Desktop
Closer look On Wireframe Explorations
Refining Page Structure
Feature Exploration: As shown in the wireframes, we focused on presenting filter options, offering recommendations for fancy and exotic gemstones, and providing comparison features and gemstone display cards with 360° views.
Initial User Testing: High-fidelity designs were created from the wireframes and tested with 10 focus groups (5 users each) on the UserTesting platform. The best-performing design was then refined and finalized in high fidelity for the MVP launch.
5.
6.
1.
Sticky up site-wide navigation bar
4.
Gemstone filters
Gemstone Type
Shape
Price
Carat wt
Origin
Gemstone Cards
360 Degree Interactive feature
GIA Certified
Origin (Phase - 2)
Exotic/Rare stones Cards
360 Degree Interactive feature
GIA Certified
Origin (Phase - 2)
7.
SEO Content + Footer
2.
“BYO” Education banner
3.
Steps
“Select/choose a gemstone”
“Choose a setting”
360 Degree play and pause interaction
High quality exact gemstone images
Wire-framing: STEP-2 “Choose a Setting”
Wireframe Exploration: STEP -2 “Choose a Setting”, Desktop
Ideating “Step-2”
Gemstone selection pop-up
Feature to by loose stones
Feature to redirection to ring settings page
1. Changing the gemstone selected in Step 1
2. Previewing the ring with the center stone in the media section
3. Dynamic pricing that updates with customization selections
4. Suggested settings based on the chosen stone
5. Free gift offer display
6. Ring customization options for each part
7. Free engraving
8. Detailed product information
Closer look On Wireframe Explorations
FINAL DESIGN : “Select a Gemstone”
Landing on Select a gemstone landing page
Interact with filters, expand & apply more features
After selecting a gemstone, the user moves to Step 2, "Choose a Setting," to design their ring. This was designed to include essential features such as:
Challenges: During the wireframe review, we encountered complexities in features like saving designs and comparing options, which disrupted the user flow.
To streamline the customization process, these features were removed based on insights from user testing and stakeholder feedback. Additionally, to enhance cost transparency, we implemented a sticky pricing feature, allowing users to see real-time price updates as they customized their ring. This design was refined to ensure alignment with both user needs and stakeholder goals.
Refining Page Structure
6.
1.
Sticky up site-wide navigation bar
2.
Step-2 “Choose a Setting”
3.
Product name + price + offer details
5.
Product media section
Share/drop a hint
Start Over
4.
Inspired settings/Recommendations
Product Customization steps
7.
“Add to Cart”
8.
Add On’s - Free Engraving
9.
Product Details
10.
USP Banner
11.
Footer
FINAL DESIGN : “Choose a Setting”
Development and Launch
The final design for the “Choose a Setting” step included essential features like price breakdown, sticky pricing, inspired settings, and step-by-step customization options, providing users with a clear and seamless ring customization experience.
Launching Phase 1 of “Build Your Own Ring” as “Create with Angara”
The "Build Your Own Ring" project marked a significant milestone for Angara.com, achieved through intensive design thinking, problem-solving, and cross-functional collaboration. Successfully launched as “Create with Angara,” the Phase 1 MVP was made available across all devices—desktop, tablet, and mobile.
Analyzing Performance
The Phase 1 launch of the “Build Your Own Ring” project, branded as “Create with Angara,” was monitored over 3-4 months with organic traffic to evaluate its performance. Data analysis and heat-map insights from this period highlighted areas for refinement and helped shape the development of Phase 2.
Phase - 2
Design and Launch
Insights from Data and Heat-map Analysis:
Banner Text Misinterpretation: Users frequently interacted with the text on the banner, mistaking it for clickable links, suggesting a need to clarify interactive elements.
Disabled Tab Confusion: Many users attempted to click on the disabled "Step-2 Choose Your Setting" tab without first selecting a stone, indicating that the disabled state wasn’t clearly communicated as inactive.
Interest in Gemstone Origin: Users actively switched between the "Lab-Grown" and "Natural Gemstone" filter options, reflecting strong interest in gemstone origin as a decision factor.
Buying Loose Stones: The process for purchasing loose stones was confusing; users expected to land on a gemstone detail page when clicking on “Buying Loose Stone,” indicating a need to improve this flow for clarity and ease of navigation.
Heat-maps: Desktop and Mobile screens, Step-1 “Choose a Gemstone”
Design Updates
Based on performance analysis we made updates in the design to better cater to the user needs.
Problem
The process for purchasing loose stones proved confusing, as users expected to be directed to a detailed gemstone page rather than a popup when selecting gemstone. This highlights a need to enhance the flow for better clarity and navigation.
Problem
"Free gift feature lacks prominence
Updating tab design
Ux Improvements
Clicking on a gemstone card now directs users to a detailed gemstone page, allowing them to view the gemstone clearly and familiarize themselves with its specifications.
Ux Improvements
Enhancing prominence of the free gift feature with ticker
Updating tab design for a better user experience
Relocating breadcrumb to a conventional position
Phase-1
Phase-2
UX Improvements
Removed the banner to prioritize filter visibility
Simplified tabs into text for clarity
Enhanced filter UI for a more seamless experience
Emphasized gemstone origin options with distinct buttons
Positioned gemstone cards within the first fold for immediate visibility
Problem
Users mistook the banner as clickable, causing dead clicks.
High number of clicks on a disabled tab suggested unclear inactive states.
Important filters lacked visibility and prominence.
Key gemstone cards were only partially visible, reducing accessibility and engagement.
Preview of Phase - 2
Results
Awards
The platform emerged as the leading AI-powered "Build Your Own" gemstone and diamond ring platform in the U.S., generating over $20+ million in annual revenue.
The introduction of a 360-degree gemstone inspection feature, along with a fully customizable product detail page, allowed customers to engage more deeply with the customization process. This enhanced user experience led to a significant increase in the average order value, rising from $1,100 to $3,200.
The "Create With Angara" initiative, which launched the Build Your Own Ring project, received the 2024 BIG Innovation Award in the Retail category, presented by the Business Intelligence Group. This recognition highlights the project’s groundbreaking approach to customer engagement and customization.
Lets Talk More
Thank You!
Shreya Saxena
2024
Award Winning Project