Ritani is a luxury jewelry brand based in New York City. It launched an e-commerce website in 2012, specializing in selling diamond engagement rings online. It is one of the top engagement ring sellers in the U.S.
The project
During the beginning of the Covid-19 lockdown in March 2020, our team began to work on switching its React website to Shopify, The plan was to go live by the time the US started to reopen. The end goal was to simplify the structure of the website using the robust admin functionality that Shopify offers, boost SEO, improve page optimization, and streamline the filtering process.
Duration: 3 months, April–July 2020
Launch Date: July 6, 2020
Team: 2 designers, 2 Product Managers,
1 Copywriter, 7 developers.
1 Copywriter, 7 developers.
My role
I was the sole UX/UI Designer for this project. I created a Style Guide for Fonts and colors and a Design System for all the UI elements. A Visual Designer was hired towards the end of the project. Under my guidance, he created clean and elegant images for the majority of the website.
For the initial launch, we focused on improving the filters and adding a recommendation feature for the Product Listing Page (PLP), which we- the Product and Technical teams, had worked on months before the project kickoff.
For the initial launch, we focused on improving the filters and adding a recommendation feature for the Product Listing Page (PLP), which we- the Product and Technical teams, had worked on months before the project kickoff.
Diamond channel page
The previous Diamond Channel page was designed with the advice given by a market analyst to add content and keywords to increase the SEO ranking but without consideration of its usefulness for end users. It was crowded and overloaded with copy, and the busy layout wasn't conducive to scrolling. Moreover, the page needed a clean and luxurious makeover.
The new page was built by our developer. I created the design with the Shopify theme in mind, as some of the content on the site will be updated by the Product Team.
Homepage
The previous homepage design was crammed with CTAs and buttons above the fold.
For the new design, we could not customize the page due to a concern with page optimization. The page was entirely created with the template from a Shopify theme. With a few "hacks," our visual designer and I were able to build a page that is stylistically cohesive with the rest of the website.
Filters
Three months before we went on the Shopify journey, our team explored different ways to improve how customers shop for diamonds. Through user research and site performance data, we learned the importance of keeping information short. For the new website, we kept the filters simple and intuitive, but very effective and easy to modify.
We initially came up with a recommendation concept in an editorial format that would provide a personable and informative experience to customers. However, all diamond retailers share the same foundry, and desirable diamonds get sold quickly, making it impossible to update the section. We then explored adding "Best Value" badges to recommended diamonds. We may have lost the magazine-style feature, but badging offers the same recommendation functionality and is a more straightforward approach to helping customers find the best diamonds.
User Flow
Create an engagement ring
Create an engagement ring
User Starts shopping for diamond
User selects this diamond
User shops for a setting that goes with the diamond
User selects this setting
User successfully created a ring
Style guide
Creating a brand-style guide was the first step of this project. Our technical team requested that we replace our typography with fonts that are available in the Shopify font library to avoid any future issues with customized font styling. I recommended a cleaner and more sophisticated set of fonts that is a better representation of luxury than the previous set.
