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.
Thanks for reading.
Let’s chat—design, cats, food, or anything in between.
Using generative AI to curate a personalized subscriber portal
Turning user data into meaningful health insights that drive engagement and conversions.
© 2025 Christine Park. Made with love and maybe one too many lavender oat milk lattes.