Redesign Real Gem’s Website into a Guided, Personalized Shopping Experience
Client
Real Gem Inc.
Industries
B2C E-Commerce
Role
UI & UX Design
Time
Jan - May 2023
Real Gem is a local gem studio specializing in emeralds. The company used to supply rough stones to luxury boutiques, but now shifting to a direct-to-consumer model. Their current e-commerce site failed to convert visitors or clearly communicate value.
I was brought in to redesign the digital experience to attract first-time visitors, guide them toward in-store visits with confidence, and support repeat customers with a streamlined online checkout.
We built the online shop to save time and reach more customers, but in the end, it just became a digital brochure. People still come in confused, and we have to explain everything all over again.
Problem
Sales reps struggled with paper-based sales processes that led to inefficiencies and lost data.
Solution
A scalable B2B consignment system that streamlines order creation, tracking, and data reuse.
Impact
Reduced new order creation time by ~40%, 100% of trainees completed their first draft order in 30 minutes.
Understand the Business
Before jumping into design, I first analyzed Real Gem’s unique positioning and sales goals.
Position
Emerald-Only Focus
Unlike many other jewelry studios that offer a variety of gem stones and diamonds, Real Gems Sells only emeralds from in-house sourcing.
Strength
🛠️ Flexible In-Store Customization
Customers can customize raw stones into jewelry with support from theirlocal factory at a lower price.
💰 Competitive Pricing & Variety (for Emeralds)
Real Gem offers a wider range and better pricing for emeralds than multi-gem retailers.
Client Goal
🎯 Guide Buyers from Online to In-Store
Revamp the website to build trust, educates first-time visitors, and encourages in-store appointments, while supporting future online purchases.
“We don’t expect people to buy right away. We just want them to come in knowing what they want.”
— Real Gem team
KEY CHALLENGES
With the business context in mind, I identified 3 key challenges that Real Gem currently faced.
01
Hard to Compare Products
💡“All the stones look the same online. I have to click into detail one-by-one to evaluate.”
02
Unclear Brand Value
💡 “I didn’t know their customization were much more affordable before I visit their store”
03
Unprepared In-Store Visit
💡 “Customers visit the store with multiple screenshots of products or vague memories.”
Based on these challenges, the design goal was clear:
How might we create an online experience that helps customers explore, compare, and understand Real Gem’s products so they arrive in-store prepared to buy?
Research & Discovery
I combined client research, competitive analysis, and a UX audit to understand user needs and uncover opportunities.
01
User Segmentation
Who are Real Gem’s target customers, what do they need from the website?
Real Gem’s internal marketing research helped identify two core user groups with distinct behaviors:
Conclusion
The two user types revealed a need for balancing education and comparison tools in the core experience.
02
Competitive Analysis
What UX patterns work well in the industry?
I analyzed three competitors to study how top jewelry platforms support product discovery and build trust.
Key Findings
What We Learned
Strong filters & sorting
Comparison tools
Virtual try-ons
What We Stand Out
Most competitors don’t focus on emeralds or in-store customization
Conclusion
The analysis showed that combining proven UX patterns like filters and comparisons with Real Gem’s strengths, education and customization, may create a standout experience.
03
UX Audit
Why the Existing Site Wasn’t Working?
After understanding target users and learn from competitors, I start to evaluate Real Gem’s original site to find pain points that caused drop-off or confusion.
Conclusion:
The audit revealed that Real Gem’s site lacked the clarity, guidance, and visual structure needed to support confident decision-making, especially for first-time buyers.
