top of page
Real Gem Inc. is a gem studio based in New York.
Their main business is to supply Emerald rough stones to Luxury Jewelry boutiques such as Tiffany & Co.
Now they would like to expand their business.
My Role
As the sole designer, I revamped the company's website and generated designs for online and offline shopping experiences.
Scope
User Experience Design
User Research
User Interface Design
Duration
3 month
Freelance
Project Type
Web design for the online and offline gem shopping experience
Sale to individual customers directly on web
Enhancing offline experience to both customers and retailers
Target
No promotions;
Directly sales to retailers
No online shopping;
Only company’s introduction
and contact information
Current
Client's main request
The company is transforming from the upper supply chain to sell products to customers directly. Therefore, they want to add both online and in-store shopping sections directly facing customers on their website.
What are other competitors doing?
After understanding the current shortage, I wonder how other successful companies in similar domains achieve their goal. Therefore I researched three companies that possess both online and in-store gem shopping services and analyzed their website.
User Journey Map
Unfamiliar with in-store service and afraid to visit
Longlasting process of comparing potential products and finalize selection
Unfriendly for first time buyer who are not familiar with the gem’s measurement index
Hard to quickly narrow down several choices based on the filters and preview images
User Pain Points Summary
Design Oblective
-Distinguish online and in-store service into two sections
-Unified the images in the gallery section
-Banner that can direct users to the online shopping section
Users’ Need: Separate online and offline service-Unified visual
Phase 1: Home Page
The Based on the design objectives, I created hi-fi design prototypes to address users’ demand and solve their pain points in the two main environments.
High-Fidelity Prototype
Step 2: Select to Compare
Users’ Need: Compare their choices in different aspects
By clicking the button, a checkbox will automatically appear at the upper corner of each product. Customers can choose the ones they want to compare.
Step 1: Filter Products
Users’ Need: View the product's image in a realistic manner
Step 1: Preview Product
Product Detail
The category “stone search” in the navigation bar is misleading and unprofessional.
The following two sections are not belonging to the same hierarchy.
Misleading ux writing and categorization
Unrelated Background
The first page of the home page contains a large geographical image, which is not directly related to the company’s products.
Lack of unified visual
The gallery at the bottom showed image of gems shoot in different backgrounds and settings.
The company’s marketing team produced some simple PM mocks, but they are concerned about user experience and the interface design. Therefore I start by analyzing what they currently have.
What do we have now?
Home Page
Design Iteration
I iterated multiple design draft for the core interfaces to get feedback on PM team.
For the “compare list” feature, I created several flows and tested with users' feedback.
Step 3: Check compare list
By clicking “My Compare List” button, users can view the compare list that they have generated.
The current product is also listed at the bottom, which users can decide to add or not.
The usage of checkbox with specific weights results in too many options
Inconvinient filter
Ambiguous terminiology
Laboratory and Treatment categories contain professional terminologies which individual customers may hard to understand.
Lack of unified visual
Some products use certificate image as preview
Product Listing
Only the name and price are marked in a different front size. while other important information such as contact is not marked.
Lack of visual hierachy
Low Resolution images
The hover state allows users to zoom in the image, while the picture is low-resolution.
Lack of unified visual
Some products don’t have preview image
Product Detail
Being aware of the user flow, I interview potential customers to understand pain points in purchasing process
User Scenarios
Having all that information in mind, I start to consider the specific scenario for Real Gem customers. The customer experience team provides me with general purchasing process for online and in-store shopping.
“Luxury boutiques barely mention specific in-store service they provide, and you cannot reach out to them easily. Therefore I’m afraid to step in the store directly”
“I have shopped XXX(the brand name) online for three years and I never knew they actually had a real store in New York. I would definitely prefer to shop gemstones in person, they need to highlight their in-store service online!”
“I was totally confused the first time I purchased gems online because I didn’t understand the meaning of each index. The website does not have clear explanations for them.
“The comparison between gemstones is my most struggled part. After narrowing down to a specific price range and shape, there are tiny differences unless you see them in person.”
Objectives
Participants
Understand specific pain points during each step of purchasing gemstones from similar online platforms and stores.
6 customers who used to purchase from Brilliant Earth, Blue Nile, and James Allen
Interviews
Information Architecture
Users’ Need:
Quickly filter out potential products
Phase 2: Online Shopping
Product Listing
Step 1: Filter Products
Filter 1: Filter with icons to select gem shapes.
Filter 2: Check boxes to select origin
Filter 3: Sliders to select price and carat ranges
Fixed bar of customer’s selections that can easily changed or reset
Each Product include:
-360 degree
-Preview image
-Price
-Tags that indicate shape, carat, and quality
Users’ Need: Quickly filter out potential products
Step 1: Filter Products
Product Listing
Phase 2: Online shopping
Strp 3: Generate Compare List
Once the customer finish generating the compare list. There will always be a compare list button fixed on the top that customers can check and edit anytime when browsing the product listing.
Step 1: Filter Products
Step 2: Product detail
Users’ Need: Compare their choices in different aspects
The Product Details are listed in extendable list.
Step 4: Product Guideline
Similar items that customers can jump to
Step-by-step guideline that explain all the index in product detail.
Banner of all the detailed information customers would expect if they ordering online, including delivery time, payment option, and items included in the order.
Users’ Need: Instructions of buying process and professional index
Step 5: Consult an expert
Pop-up window of contact information
Users’ Need: Easy access to studio's contact information
Pop-up Also include a introduction to the in-store service, where users can directly jump to the in-store service.
Phase 3: The Maison and in-store service
Understood how to handle different business model and simplified user flow
Realized the importance of finding pain points from user flow to optimize design
Learned how to use different visuals and functions to let users make decision quickly
Takeaways
Evaluation
I handed in the redesign prototype to the client and they provided the following comments:
Pros:
-
Clear and distinctive categorization of different services
-
Effective and innovative solutions for searching and comparing products
-
Concise introduction of the in-store service
Cons:
-
The transition from online to in-store service could be more fluent and seamless. For example, display of the wish list...
Outcome:
Design was handed to the development team, they already launched the first mvp version, but not all features in design are implemented due to the time constraint.
The “Learn more” button will jump to the in-store service introduction page, which is present in the following.
The “Learn more” button will jump to GIA's official website, where there is a news report about the company.
About Real Gems Inc.
Users’ Need: Understand the company's background
Solution: A brief introduction of Real Gems Inc. including
-Origin and history
-Techniques and sources
-Service for both online and offline
Solution 1:
Highlight the promotion when users purchase the raw stone and create jewelry together
Users’ Need: Have a general idea about what in-store service will provide.
Meet Us In-Store
Solution 3:
Show a few images of previous in-store personalized jewelries to attract customers
Solution 2:
Use icons to represent main in-store services and the general purchasing process
bottom of page