Chromatic Gallerie shoes sample

Conditional Add to Cart User Flow

Project Summary

Problems Solved

  • Missed sales between inventory restocking
  • Unclear user interface led to unfulfilled user expectations
  • Potential customers with hard-to-find sizes felt like their size was never stocked
  • User engagement with the brand less robust than desired

Solution Overview

  • Used conditional logic to present only relevant options to every customer based on selected product availability
  • Reused a preexisting process (checkout) with tailored messaging to manage user expectations without building a new process
  • Added end of process options to increase user engagement

Problem Statement

The Client

Chromatic Gallerie was an online-only startup footwear brand that sold shoes in three heel heights, three widths, an extended size range, and many colors. That meant a lot of SKUs for a start up to stock.

The Problem

Carrying stock all possible SKUs at all times tied up too much resources in inventory that may take a long time to sell. On the other hand, long tail sales were essential to both the company’s bottom line and customer’s satisfaction and loyalty.

KPI Setting

  • A substantial decrease in customer service calls regarding product unavailability
  • An increase in preorders
  • A decrease in product page bounce rate

The Team

I was the lead designer on this project. I worked closely with the web development team, the sales and customer service team, and the marketing team. The ongoing collaborative process made sure the solution would be implementable technically within the company’s budget and timeline constraints, solve the exact problems the sales team needed solving, and follow the company’s visual language and brand feel.

The Discovery Process

Before offering any solutions we pulled together and analyzed all the information we could get: sales data, inventory restocking history, user browsing patterns from Google Analytics, user feedback, customer service team interviews, and so on.

After performing the analysis, we agreed that a multi-option user flow sales process would be the best solution that would satisfy all the requirements and work within all the constraints.

The Solution Overview

The solution offered the users four options:

Add to Cart
Out of Stock - notify me
Preorder - expected delivery date
Add to Wishlist

The solution presented the user with the appropriate options based on the status of the user’s chosen product.

If the product was available for immediate purchase, the user would get the Add to Cart option and complete the purchase process user flow.

If the product was not available, but we knew the date the product would be back in stock, the user would get both the Preorder and the Notify options. We considered offering only the Preorder option, but we found in testing that users were far more likely to abandon the process entirely if that was the only option available, so we added the Notify option to retain some of those users.

If the product was out of stock without a known delivery date, the user would get the Notify option.

The Add to Wishlist option was always present because it encouraged potential customers to create an account, which further fostered customer engagement with the brand.

This solution presented different user flow paths to different users based on the inventory status of their selection, which allowed users to continue engaging with the brand without distracting other users from completing the all-important purchase process with options not relevant to their needs.

The User Flow

The process started once the user landed on the product page and selected the size/width/heel height combination they wanted. At that point the page would update to present the appropriate options based on the selected product's availability status, and the user would then be able to complete one of the available paths. 

Chromatic Gallerie Purchase User Flow


The Result

This project helped the entire organization immediately upon implementation.

The company was able to order inventory in a much more targeted, as-needed way. This freed up resources to develop new product lines instead of tying up large chunks of money in inventory that may or may not sell out at full price.

The customer service team no longer had to field constant inquiries from customers about out of stock items because now the information was immediately and clearly available on the site.

The product development team got the ability to gauge people’s interest level in new products, which helped to drive decisions on which products to prioritize.

The marketing team got a great new tool for promoting products that would not be available for months, leading to exciting and successful marketing campaigns and raising a lot of interest in upcoming products.

Last but not least, the solution minimized the customers’ frustration and gave them the information they needed to plan their purchase decisions.