Overview · Cosmetic Company Store
When a product sold out, shoppers hit a 404 — and most never came back.
When a product sold out, its page redirected to a generic 404. Shoppers assumed a broken link, searched again, and hit the same dead end. Stakeholders wanted a fallback that kept them on-site.
Feature Objective
Stop sending live shoppers to a 404.
The real goal was fewer shoppers reaching the 404 at all — but stock levels and sell-through rates were outside design’s control. So the direction narrowed to what we could own: intercepting the shopper before the dead end with a redirect or a modal offering somewhere else to go.
Feature Target
Price-sensitive shoppers, during peak sale periods.
The highest-risk shoppers are price-sensitive ones — quick to bounce to another site and unlikely to come back after a bad experience. During Black Friday and other peak events, a broken journey like this can dent overall GMV fast.
Current User Flow
A promotion that led straight to a wall.
A shopper spots a promo on social or Google, clicks through — and because the item is out of stock, lands on a 404. Per the marketing team, roughly 90% leave right there. The rest assume a bad link, go back to the homepage, search for the product again, and loop straight into the same dead end — eroding trust each time.
Start
Social / Google
Sees promo link
404 page
Product is gone
Leave or
retry?
90% leave
Bounce to competitor
Homepage
Searches product
404 again
Same dead end
Lost
Desired User Flow
Never a 404 — unless it’s actually an error.
In the ideal flow, shoppers only see the error page for a genuine error. An out-of-stock product should offer a way forward instead: alternative suggestions, a back-in-stock email signup, or pre-order.
Start
Social / Google
Sees promo link
Product page
”Temporarily out of stock”
Email signup
Back-in-stock alert
Retained
Future sale
Alternatives
Similar products shown
Converts
Buys alternative
Continue shopping
Best sellers, last chance
Browses
Stays on-site
404 reserved for genuine errors only
Problem Identification
A blank 404 can’t explain itself.
Sold-out products
Shoppers can’t see why a page broke. When they land on a 404, there’s nothing telling them the product is simply out of stock — it just looks like a broken link.
Sale season
During sales the problem doubles: shoppers hit the 404 from a promotional ad, then hit it again browsing for alternatives on the site itself.
Market Research
What works for luxury doesn’t always work for cosmetics.
Brands like Louis Vuitton offer back-in-stock email alerts — a good fit for scarce, high-end goods. For easily substituted cosmetics, though, shoppers won’t wait. They’ll find an alternative in seconds.
Hypothesis
Showing alternative products on the page could cut the drop-off when a shopper’s first choice is unavailable.
Surfacing alternatives in a popup modal makes the out-of-stock state harder to miss entirely.
Brand-loyal shoppers may join a waitlist if offered an extra discount — a route to incremental sales on staple products.
Design & Solution
Three iterations, shaped by what the backend could actually promise.
1st Iteration
The initial design assumed restocking and email-to-frontend sync were both feasible. A signup CTA sat at the top of the page — shoppers opt in for a restock reminder and newsletter, then get prompted with an alternative item.
2nd Iteration
Discovery revealed restock timing was unknown, so reminders weren’t reliable. The scope narrowed to newsletter signup only, with reworked modal layout and copy. As a quick interim fix while stakeholders aligned, the error page began surfacing “best seller” and “last chance” product trays for items temporarily out of stock.
3rd Iteration
The core logic is shared across clients, so conversations are ongoing to identify staple items with predictable restock cycles — the prerequisite for rolling out true restock notifications to clients like Urban Outfitters and Saks JP & KR.