VRAI (previously Vrai & Oro) is a luxury jewelry start-up located in Downtown Los Angeles, California. The jewelry is designed by women for women. It features a popular collection of essential jewelry, a modern fine jewelry collection, and a fresh take on engagement rings.
VRAI is selling jewelry and engagement rings made with lab-grown diamond. The products are the result of high technology, sustainable recycled gold and conflict-free diamonds. The start-up was part of the growing movement of the online jewelry start-ups that want to do things differently and are rewarded with loyal fan bases. VRAI team believes the future of jewelry is online.
With ‘VRAI’ signifying truth in French, VRAI is a fine jewelry brand built on three key values: quality, simplicity, and transparency. The website is based on Shopify for the jewelry part and the engagement part is on React.
Challenge:
A complex product offering while transitioning to a more luxurious brand image, emphasizing quality, customization, and unique diamond selections for engagement rings
The new product offering is complex, one product can have hundreds of variants. Offering hundreds of products presented on an online store’s category page can be very overwhelming for the user. It negatively affects the conversion if not presented properly. Aside from the products, the company was moving away from its everyday jewelry offering and towards lifting up the brand image and values with very high luxury and tech feel.
What defines VRAI to its competitors: its beautiful styles, very high quality of the products, transparency, highly customizable options, a very minimalist and dainty aesthetic.
The company also offers on engagement rings the purchase of unique diamonds. The users have to be the one selecting the piece they want on their ring. The inventory displays hundreds of diamonds in various shapes, color, cut, clarity or carat weight.
How can I make the engagement ring process easy and simple while offering a wide range of products to fit all the user needs?
Roles
Major Stakeholders: VRAI & Oro Founder (Vanessa Stofenmacher), Ecommerce Manager, Shopify & React Developers, Director of Operations and the UX Designer (myself).
My role as a UX Designer / Product Designer was to:
- Help to collect and draft the requirements,
- Brainstorm with the main stakeholders,
- Define the user profiles,
- Define the user flow and stories,
- Create prototypes and wireframes,
- Produce the final UI.
QA as the project gets implemented:
- Participate in daily standup, weekly sprint planning and retros with dev/tech team and Ecomm manager,
- Follow up and help to track the project on Jira,
- Create iterations of the online product to constantly adapt to users’ needs throughout the sales funnels to reach business goals.
Scope :
Crafting a distinctive, Tech-inspired, and personalized online shopping journey for luxury engagement rings
Timeline: 3 months (+further iterations)
Objective: Create a unique, tech feel, simple, seamless, clear, personalized engagement shopping experience that allows a user to purchase a higher-end engagement ring online (or any other product of the line).
Softwares & Tools:
Phase 1 – Defining Our Users
We conducted user profile research. The current customer of VRAI was more of a millennial, divided between young and older professionals (age between 25-35) with an average income of $35-$65k. The type to shop at Glossier, Lululemon or Zara.
Due to their price point, the new engagement rings products were targeting an audience with:
- An income of over $150k,
- Age of 30/35+,
- A Generation Z type,
- An interest in new tech products,
- Shopping at Net-a-porter, Farfetch, or Marcus Neiman.
Phase 2 – Product Research:
Strategizing product organization and technical solutions to manage hundreds of variants
Once the line of product was approved, the Ecomm manager, myself and the founder of the company sat down to break down the products per type and variants. Based on the AirTable product roadmap, we were able to regroup most of the rings per setting and shapes. We faced the issue that Shopify has a variant limitation (100) while creating products. React was, therefore, the technical solution to fit all the products under the same main product.
Phase 3 – Collaborating with the Founder on designs to define the new engagement ring journey via wireframing and User Flow explorations
The founder and I started drafting wireframes and user flow of the engagement ring process via Vrai.com, from the navigation to the checkout. We spent a large amount of time drafting and sketching the user flow from a category page to a product page and checkout in order to narrow down the proper sales funnel and shopping experience.
We just put ourselves in the shoes of different users (males and females). The males being quickly overwhelmed with a good amount of choice, the females putting high attention to the product itself and the quality of imagery.
We started our research “As a user”:
“As a user, I want to easily access a concise list of engagement rings. I want to be able to pick a specific diamond shape and from there I want to be able to customize my ring to make it feel personal.”
From this point of view, the founder and I broke down the wireframe of the category page by main content:
- Header,
- Commercial video,
- Settings,
- Diamond shapes,
- Dynamic starting price,
- CTAs.
We also thought it would be beneficial to add a block “about the Diamonds” in order to educate users who were not familiar with lab-grown diamonds.
We created the wireframe for the product page, regrouping the information and the starting from the diamond shape to the ring size:
- The diamond: select the desired shape, select your unique diamond (choice of diamonds with filters to select a unique item with a specific carat and price)
- The setting: Select the metal color, the metal (14K or 18K), if any band accent (Pavé, plain or double pavé for some products).
- Optional engraving
- Ring size
- Detail on the fact the ring is made to order per customer (uniqueness of the product)
- Shipping details
- CTAs
The block of the PDP should also contain information regarding the product in a very concise way:
- Specifications (band width, depth, carat weight, pavé, …)
- More history behind the overall ring design
- Details about the specific Diamond Shape
- About lab grown diamonds (educational section for new users)
- Shipping & returns information
“As a user, once I have selected my perfect custom ring, I can check out and proceed to the payment (pay full price at once or use a Klarna/Affirm payments).”
Phase 4 – High Fidelity Prototyping:
Building a unified seamless and elevated experience
I kept in mind that the Engagement Ring product should also extend to the new Jewelry Product Offering that was coming in late 2019/early 2020.
Based on the product breakdown and the information collected from the customer experience team, the founder and I broke down the product page into various blocks and organized them. I designed various rounds of high fidelity prototypes to follow the pre-defined user flow: Diamond, Metal/setting, additional information.
The founder and I would sit down and brainstorm as we go on our mocks and put in common the work and research we did on each interface. As the founder had a very strong preference for designing Desktop interfaces, I focused on creating a Mobile 1st experience. Together, we would combine our mocks to create a final and homogeneous experience.
Phase 5 – Refining the High-Fi Design
I designed the interface under the creative direction of Vanessa, the founder.
Working on:
- A clean sleek interface
- Minimalistic
- Tech inspired (Tesla and Apple for instance)
- Inclusion of white space to bring a luxury feel
I also worked on:
- Adapting the diamond drawer to new user habits and needs (filters, user flow, scroll, icons and interactions for instance).
- The UX UI Design of the Cart during the checkout (including certificate, care package, specific shipping information and more).
- How to visually display the proper information to the user?
Phase 6 – Aligning Priorities: streamlining features and UI for Initial Product Launch for implementation, QA testing and iterations
Due to a change in the direction of this project and in the priorities from upper management, we had to cut down the major features and UI of this product for its first launch in July 2019.
I met with the dev team and the Ecommerce manager to explain and showcase the whole project from navigation to checkout.
Via a Miro board, we prioritized the major features to make the experience as close as possible and prioritize everything that was shoppable at first. We divided the whole project under two major IA blocks: Category page and PDP. We divided and organized the work into multiple priorities: Must have, should have, nice to have. The dev team also added all their own tickets regarding their own responsibilities in the project aside of UX UI implementation such as SEO related tickets, cart, data related tickets and mode.
I reworked on the UI and flow and the Dev team manager and I presented the hybrid product to the founder who approved due to the constraints and changes we had.
We tracked this product with Google Analytics and Crazy Egg. I adapted the design per the user behavior and business needs. This project had weekly iterations.
We adapted the overall UX Flow & Ui with additional features for instance:
- Change Affirm to Klarna payments
- Adding “book an appointment” for users who are hesitating to make the digital purchase without seeing the final product first
- Adapt the inventory drawer in the out of a specific diamond shape scenario with a message to either contact and be on a waiting list or shop best seller shapes
The mobile product page has been revamped in order to have all the major selectable options above fold (See Invision prototype here). It is in the pipeline for 2020. The mobile PDP was supposed to have a sticky image as the user scrolls but due to time management and other priorities, the dev team was not able to implement this functionality for the launch.
Conclusion
A successful launch : the new engagement ring experience drives sales and revenue growth for VRAI.com
The first day of launch the Engagement Ring Experience generated $22k in sales. 20% of the conversion on the site was regarding Engagement Rings products and this participates to 80% of the company’s revenue. Overall, the Engagement rings revenues significantly increased business revenue.
VRAI.com increased conversion by 100% in 2019.
The total gross revenue was $13,5 million in 2019 vs $6,5 million in 2018.
