Skip links
Resume

Product Detail and List Pages

Company

Ritani

Scope

MVP 2

Year

2017-2018

Product Detail Page

Ritani is one of the leading online retailer of diamonds. Ritani continues to push the envelope in giving the user complete control over the diamond buying process. An engagement ring is a high-stake purchase. Giving buyers the sense of confidence and trust they need when buying one online, requires a special touch. Ritani wanted a site that provided a premium eCommerce experience with an innate sense of quality and service.

MVP Goals

Introduce new brand and design system, keep consistency across entire experience.

Enhance brand content, showcase the unique value proposition of the products throughout the experience, present a unique brand story, enhanced images, that help drive more rapid purchase decisions.

Focus on educating the user about diamonds in the basic and advanced filters. Provide tips and visual cues.

Higher conversion rates, increased traffic, and increased sales.

Present the user with a progress bar to minimize user tension, provide feedback to the user about what is happening within a reasonable amount of time, then A/B Split Testing of new workflow behavior against legacy workflow behavior.

Present the user a more efficient filtering system, that it allows the user to accurately assess the available product range, compare those product.

Present the user with sufficient product information to adequately assess a product’s suitability.

Timeline

MVP 1

Refine and deliver an experience that leverages our expertise to help customers easily find the right engagement ring. Introduce new brand.

Usability Testing

By testing the product at an early stage, helped us iron out problems and gain feedback for future iterations.

MVP 2

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.

Process

Personas

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.

Competitive Analysis

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.

User Flows

We then identified all of the different types of product list pages, product detail pages and where they fell in the user flow.

Exploration

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.

Design

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.

Personas

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.

Shipping options

Dedicated module for all shipping options, including Free In-Store Preview

‘Add to Cart’ Action Button

Ensure the primary ‘Add to Cart’ CTA’s styling is unique and prominent

Accordion

Accordion  has proved to perform well as they provide users a good overview of the product page sections,

360 View & GIA Certificate Thumbnails

Buy section to have dedicated thumbnails for 360 View & GIA Certificate

Essential information

Ensure the ‘Buy’ Section to include only essential information

Low Fidelity Wireframes

UI/UX Outcome

Company

Ritani

Year

2017-2018

Type

UX/UI

Product List Page

Ritani is one of the leading online retailer of diamonds. Ritani continues to push the envelope in giving the user complete control over the diamond
buying process. Design your own ring project helps to push the process to the next level. An engagement ring is a high-stakes purchase. Giving buyers
the sense of confidence and trust they need when buying one online, requires a special touch. Ritani wanted a site that provided a premium ecommerce
experience with an innate sense of quality and service.

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.
See MVP 1
Related Projects