GOAT FLASH SALE WCMP
Keywords:
User Experience
GOAT is the global e-commerce platform for fashionable appareal and sneakers. This new design targets the next year Single’s day campaign launched via Wechat mini program and improves the unhappy path based on current flash sale flow.
1 Happy path & 4 Edge cases
User Experience
GOAT is the global e-commerce platform for fashionable appareal and sneakers. This new design targets the next year Single’s day campaign launched via Wechat mini program and improves the unhappy path based on current flash sale flow.
1 Happy path & 4 Edge cases
The challenge was not simply designing a flash-sale interface. It was structuring the experience around a fixed event timeline while accounting for changing inventory, SKU uncertainty, temporary reservations, sold-out states, and other operational dependencies.
Problem:
The existing flash-sale experience made unavailable products appear permanently sold out, making it difficult for users to understand whether an item was temporarily locked, already sold, or still purchasable later.
Solutions:
Clarified product status and sale progress so users could better understand what was happening during the event.
Opportunities:
Recover potential purchases
Give users another path to buy when the initially selected product is unavailable.Increase event participation
Keep users engaged even when specific SKUs sell out quickly.
Reduce checkout friction
Let returning users move faster through size selection and purchasing.
Event Overview
New flash sale offers a pre-event size-selection phase which help the user to speed up check out process and convert guests to an existing account.
Rotational product swipe
Swipe left and right to find your desirable product to pre-enroll.
Compatible with 2-5 SKUs.
Reduce checkout steps with pre-selected sizing
Edge case 01
Selected product is locked:
A locked product is not necessarily sold out. The interface needed to clearly distinguish temporary reservation from permanent unavailability and give users a path forward.
Option A — Choose another size
Allow users to switch to another available size immediately.
Option B — Retry the selected product
Allow users to return and check again after the temporary reservation expires.
Selected product is locked:
A locked product is not necessarily sold out. The interface needed to clearly distinguish temporary reservation from permanent unavailability and give users a path forward.
Option A — Choose another size
Allow users to switch to another available size immediately.
Option B — Retry the selected product
Allow users to return and check again after the temporary reservation expires.
Backend logic
After a user taps “Immediate Purchase,” the product is reserved for 10 minutes. If checkout is not completed, the inventory is released and becomes available again. Because a locked state does not mean the product is sold out, the UI should avoid displaying an inaccurate “Out of stock” message.
After a user taps “Immediate Purchase,” the product is reserved for 10 minutes. If checkout is not completed, the inventory is released and becomes available again. Because a locked state does not mean the product is sold out, the UI should avoid displaying an inaccurate “Out of stock” message.
Switch to a different size if selected product is locked.
A light-infused size chart.
![]()
Note:
The main reason to ask user to re-enter this page is that it’s the fastest way to refresh the page and get the most recent status of the product. If this page automatically refresh the page will cause a huge burden and effect the performance of WCMP. So we let the user to actively re-enter the page as an alternative solution.
Concerning most of WCMP users are sneakerheads, I priotize their interest. For regular users, I use the message to inform them “Go back to homepage and re-enter this page. You still have the chance”
A light-infused size chart.
Note:
The main reason to ask user to re-enter this page is that it’s the fastest way to refresh the page and get the most recent status of the product. If this page automatically refresh the page will cause a huge burden and effect the performance of WCMP. So we let the user to actively re-enter the page as an alternative solution.
Concerning most of WCMP users are sneakerheads, I priotize their interest. For regular users, I use the message to inform them “Go back to homepage and re-enter this page. You still have the chance”
Edge case 02
During a high-demand flash sale, multiple users or automated traffic could temporarily reserve all available inventory at once. This does not necessarily mean the product is sold out.
If inventory is temporarily locked, users can return to the event page and re-enter the purchase flow after reservations expire. The experience should clearly distinguish temporary unavailability from a true sold-out state.
![]()
Entire inventory temporarily locked
During a high-demand flash sale, multiple users or automated traffic could temporarily reserve all available inventory at once. This does not necessarily mean the product is sold out.
If inventory is temporarily locked, users can return to the event page and re-enter the purchase flow after reservations expire. The experience should clearly distinguish temporary unavailability from a true sold-out state.
Edge case 03
For high-demand products, inventory can sell out almost immediately. Once all reservations are completed and no inventory remains, the experience should clearly transition from a temporary locked state to a confirmed sold-out state.
The flow lets users return and recheck availability while inventory is still being released, but removes that expectation once the product is definitively sold out.
![]()
Everything sold out within 2 mins
For high-demand products, inventory can sell out almost immediately. Once all reservations are completed and no inventory remains, the experience should clearly transition from a temporary locked state to a confirmed sold-out state.
The flow lets users return and recheck availability while inventory is still being released, but removes that expectation once the product is definitively sold out.
Edge case 04
Flash-sale inventory can change while a user remains on the page. A product that appeared available may be sold out by the time the user taps “Immediate Purchase.”
Validate availability at the moment of purchase and show a clear sold-out state if the selected size or SKU is no longer available.
Stay on flash sale page for too long
Flash-sale inventory can change while a user remains on the page. A product that appeared available may be sold out by the time the user taps “Immediate Purchase.”
Validate availability at the moment of purchase and show a clear sold-out state if the selected size or SKU is no longer available.
Appendix: Size specific Progress bar
This direction gave each size a progress bar.
![]()
However, this design doesn’t apply to small inventory AKA weekly flash sale very well because some sizes might sold out pretty fast while others might be a bit slow. This contrast might make the user feel like the relative larger inventory isn’t quite popular. In addition, the progression of progress bar too fast will make the progress bar useless.
Thus, I moved forward with a progress bar that represents the overall progression of flash sale.
This direction gave each size a progress bar.
However, this design doesn’t apply to small inventory AKA weekly flash sale very well because some sizes might sold out pretty fast while others might be a bit slow. This contrast might make the user feel like the relative larger inventory isn’t quite popular. In addition, the progression of progress bar too fast will make the progress bar useless.
Thus, I moved forward with a progress bar that represents the overall progression of flash sale.
Reused a shared page structure across multiple edge cases and event pages, varying primarily the content rather than the layout. This reduced duplicated design work, improved consistency, and made the experience easier to scale and maintain.