Product Detail Page
Refine and deliver an experience that leverages our expertise to help customers easily find the right engagement ring. Introduce new brand.
By testing the product at an early stage, helped us iron out problems and gain feedback for future iterations.
Enhance brand content, showcase the unique value proposition of the products throughout the experience, present a unique brand story that help drive more rapid purchase decisions.
We first took our standard personas and identified which users are the main demographic for engagement rings. There are three main personas for product purchasing.
We then went and looked at competitors both in the jewelry industry and outside to identify elements that Ritani should consider on the product list pages and product detail pages.
We then identified all of the different types of product list pages, product detail pages and where they fell in the user flow.
During the exploration phase, we brainstormed ideas for what we thought the best solution would be. I did low-fidelity wireframes of what I was thinking before jumping into my visual design. I created a lot of Invision prototypes for review meetings and dev hand-off.
The design step is my favorite part of the UX process. I quickly went from the wireframes that I did in the exploration phase to hi-fi visuals and interactive prototype.
Product Detail Page Requirements
The product page layout, design, and features are the centerpiece of the users’ experience. Nearly all users go through a product page before making any purchase, and it’s often on the product page where users make up their mind on whether or not they want to purchase the item.
Users on the product page are often at very different stages of their purchasing decision: some users may causally browse product pages with no particular product in mind, while others know exactly what they want and will want to jump straight to the details. During the rebrand efforts, one of the challenges was to rethink the product detail pages for diamond and setting.
Low Fidelity Wireframes
Product List Page
Product List Page Requirements
During the rebrand efforts, one of the challenges was to rethink the product list pages for diamond and setting. Ritani’s product list pages were difficult to scan. The goals were:
- Present the user with sufficient product information to adequately assess a product’s suitability.
- Provide the user with adequate visual product information like good product thumbnails which tend to play a key role in the user’s search and selection of products.
- Present diamond in 2 views: List and Grid. In list view provide the user with all the specs diamond information necessary to compare and make a decision. In grid view, present a clearer product thumbnail.
- Focus on educating the user about diamonds in the basic and advanced filters. Provide tips and visual cues.
Low Fidelity Wireframes
Setting Product List Page
Diamond Product List Page
Results (average across devices) and next steps:
- 60% increase in users getting through the process to a built ring
- 42% increase in users adding to cart
- 23% increase in checkout initiation
- 20% increase in transaction (48% increase in mobile)
After exceeding our initial KPIs, we began pushing our paid marketing into the experience and released the experience to more and more website users.