Solving for rapid growth and inventory changes with an automated notification and update system

Our supplement e-commerce company was growing so rapidly that inventory levels couldn’t keep up with demand. Initially, products went out of stock every few months, but recently, they were selling out within weeks—or even days. This surge led to a spike in customer inquiries and complaints. Our CX lead approached the product design team to develop a solution.

ROLE

Product Designer

TEAM

Christine Park

Venezia Hartanto

Angelique Allison

Raphael Muli

Kyle Solano

SKILLS

Product design

Designing for Automation

Stakeholder Collaboration

PLATFORM

Web

Mobile-web

Mobile app

tl;dr My co-designer and I developed a fully automated notification system that would trigger the appropriate popups, badges. tooltips, and other designs depending on the user type and the status change(s) of the product(s) that decreased out-of-stock-related customer inquiries by 27%.

BACKGROUND

The Problem, In a Nutshell

Online - Fully In Stock

Allocated

Offline - Fully Out of Stock

HOW OUR INVENTORY SYSTEM WORKS

Our products cycle through three main stages: Offline, Allocated, and Online

As a subscription-based company, we cater to one-time purchasers and subscribers. When inventory is low, we remove products from our store and prioritize subscriber orders, a stage we call Allocated.

A STRAINED SYSTEM

Keeping users informed required marketing and tech teams to manually trigger notifications like emails and alerts whenever product statuses changed, which became overwhelming during high-demand periods.

THE PROBLEM

The notification system lacked clarity and consistency

Subscribers who missed an out-of-stock email saw ‘Skipped’ in their order status without any explanation, leading to confusion about why it was skipped and when it would return.

Additionally, when products were in the allocated stage, users didn’t understand why they were processing in their subscriptions but unavailable for purchase in the shop. These recurring questions highlighted the need for clearer communication.

Within the last four months, our CX team received

1,774

inquires related to out-of-stock products. Almost double that of any other inquiry category!

THE GROWING FRUSTRATION

For subscribers who rely on our products as part of their daily routine, these disruptions risked eroding trust and long-term loyalty.

PLANNING

Laying the Groundwork

MAPPING OUT EVERY SCENARIO

To fully automate notifications, we had to account for every possible product status change. This became complex since alerts depended on both subscription status and the exact stock level shifts. As developers built the system, new edge cases surfaced—like multiple products returning in stock on the same day. To prevent gaps, our team sat down one day and mapped everything out. See our FigJam here.

Play around with the drop downs below to explore the scenarios we planned for!

currently

being allocated.

The product

is not

in an existing subscription,

THE CONSTRAINTS

This project required carefully working within existing flows, layouts, and design decisions made by previous designers and teams. Creating badges and indicators that fit seamlessly into the system was more complicated than it seemed. It took trial and error to make them both clear and visually cohesive.

On top of that, balancing what the project lead wanted to communicate with what the interface could realistically support meant making tough decisions about hierarchy, clarity, and space. Every small tweak had a ripple effect, making this project as much about problem-solving as it was about design.

FINAL DESIGNS

Bringing Clarity to the Experience

With our goal in mind, we built out several designs to make product statuses clearer and more intuitive. Every design was built for desktop, tablet, and mobile, but we took a mobile-first approach since most users accessed the platform on their phones.

Before

After

OUT OF STOCK BADGES

All in the details

To eliminate confusion, we redesigned the out-of-stock product display on the subscription details page. Users can now instantly see why a product isn’t processing, reducing unnecessary questions and frustration.

BACK IN STOCK POPUPS

Bringing clarity to restocks

We designed these popups to work across different products while keeping the messaging clear and relevant. The CTAs were chosen to either drive users to their subscription when action was needed or reassure them when no action was required. This approach reduces uncertainty and ensures users immediately know what to do, or not do, next.

1

Allocated product in existing subscription

2

Multiple allocated products in existing subscription

3

Singular back in stock product not in existing subscription

MULTIPLE BACK IN STOCK POPUPS

Handling complex restocks with ease

We designed these popups to work across different products while keeping the messaging clear and relevant. The CTAs were chosen to either drive users to their subscription when action was needed or reassure them when no action was required. This approach reduces uncertainty and ensures users immediately know what to do, or not do, next.

BACK IN STOCK BADGES

A subtle nudge, right where it matters

To keep users informed, back-in-stock products are marked with badges across key touchpoints—the dashboard, subscriptions page, and subscription details page. These small but effective indicators ensure users never miss an update.

ALLOCATED PRODUCT BADGES

Reserved for you, explained instantly

Allocated products are marked with a badge and an info tooltip, helping users understand why a product is processing in their subscription but unavailable for purchase. This removes confusion and builds trust in the system.

IMPLEMENTATION

From Design to Reality

CLEAR DOCUMENTATION + COMMUNICATION = ALIGNMENT

With multiple stakeholders involved—developers, marketers, and more—we needed a clear way to document how everything worked. We created a detailed handoff guide linking to each design and outlining when and where each popup would appear. To ensure alignment, we met with the marketing and development teams to walk them through the documentation and answer questions.

CROSS COLLABORATION

Once the designs were finalized, we worked with other teams to gather the necessary assets. Since the system needed to be fully automated, we used our template design to generate out-of-stock popups for all products. This required sourcing images from photographers and copy from writers to ensure each popup was complete.

LESSONS LEARNED

Small Changes, Big Impact

This project reinforced the importance of designing for clarity, consistency, and user trust. What seemed like a simple notification system became a deep exploration of automation, scalability, and how product availability impacts user expectations. Collaborating with developers and marketers, we created a system that reduces friction and uncertainty while streamlining workflows.

By implementing automated notifications and intuitive design elements, we reduced customer inquiries about out-of-stock products by 27%, from 1,774 to approximately 1,295. This was a powerful reminder that even small UI changes can drive measurable impact by improving both user experience and operational efficiency.