Overview

Data shows a high volume of referral traffic from Pinterest, and it has an average order size of $59. But sometimes the visitors are directed to an out-of-stock product, and they leave. The business wants to seize this opportunity to keep the visitors on the site and eventually increase revenue. One month after the update, we saw a drastic 40% decrease in bounce rate and a 15% increase in conversion rate.

Role

UX/UI Designer

Team

Product Manager, Programmer, Analytics Team

Client

Fab.com

Time

2017 (1 month)

DESIGN PROBLEM

How might we turn the visitors who are already interested in the products into customers by driving impulse buying and offering a personal shopping experience?

SOLUTION 1 

You Might Also Like

To recommend items and give suggestions like there’s a personal shopper next to the users.

  1. A ‘Remind me’ button when the item is back in stock
  2. Similar products(using keywords, designers to show relative products) and complementary products
  3. AI-driven recommendations(personalized products based on data such as browser history, page visits, visit frequency or content viewed)

We decided to go for the tab UI, which shows most of the options and keywords above the fold.

SOLUTION 2 

Quick View & Add to Cart on Hover

To drive impulse buying, I added the quick view and “Add To Cart” button when hovering over. So shoppers can add the items to the cart right away on the list page without going to the product page.

Some items will require further info like size, color, and quantity. So a drawer will appear seamlessly after clicking on the “Add To Cart” button.

OUTCOME

-40
Bounce rate in out-of-stock page
+15
Increase in conversion rate