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
Problem:
The flash sale page marked the product “lock” state as “sold out” state. Thus, s/he still has the chance to buy it but s/he can’t know from the current UI because the page displays “this product is out of stock” when the product is locked.
Solutions:
1. Correct information display & Progress bar
Make it transparent so the user knows what’s happening.
Visualize the progression of flash sale to create a sense of realness and participation.
Opportunities:
1. Boost the chance to purchase a product even if the product is locked.
Tell users either to switch to a different size or re-enter this flash sale page because they might still have the chance to buy it.
2. Create a sense of participation if sold out too fast
Rather than displaying “sold out” immediately after the SKU has been checked out. Let users re-enter the page for 2 mins to have a sense of active participation.
3. Check out with ease if size pre-selected
One tap away for existing users and new users who pre-selected the size. Fast check out.
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.
A number indicator informs user the current selection and the quanitity of flash sale SKUS.
Immediate purchase if size pre-selected
Reduce the checkout process to one-tap away experience when flash sale starts.
Edge case 01
Selected product is locked:
An accurate message tell user what to do so user is able to exit the deadend.
Option A:
Switch to a different size.
Option B:
Tap ‘back’ and re-enter the flash sale page cause thhe user still have the chance.
Selected product is locked:
An accurate message tell user what to do so user is able to exit the deadend.
Option A:
Switch to a different size.
Option B:
Tap ‘back’ and re-enter the flash sale page cause thhe user still have the chance.
Backend logic
GOAT will lock the product for 10 mins after a user tapped “immediate purchase” from the order detail page. Others can purchase it if the backend releases this product. Users can go back to homepage and re-enter this page to see the latest status of the product. If lucky enough, s/he may still have the chance to buy it.
Thus, the message “this product is out of stock” isn’t accurate. Locked state doesn’t mean succesfully checkedout.
GOAT will lock the product for 10 mins after a user tapped “immediate purchase” from the order detail page. Others can purchase it if the backend releases this product. Users can go back to homepage and re-enter this page to see the latest status of the product. If lucky enough, s/he may still have the chance to buy it.
Thus, the message “this product is out of stock” isn’t accurate. Locked state doesn’t mean succesfully checkedout.
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
It’s a hype product flash sale. GOAT constantly faces challenges from robots. It’s highly like an entire inventory is locked. When it happens, user can quickly return homepage and re-enter this page again to boost the chance to cop an item succesfully.
![]()
An entire inventory is locked
It’s a hype product flash sale. GOAT constantly faces challenges from robots. It’s highly like an entire inventory is locked. When it happens, user can quickly return homepage and re-enter this page again to boost the chance to cop an item succesfully.
Edge case 03
GOAT rarely prepares a huge inventory for one SKU. Sold out everything in a short amount of time is common. We don’t display “sold out” immediately if an entire inventory has been checked out within 2 mins. We create a sense of participation by letting user go back and forth.
![]()
Everything sold out within 2 mins
GOAT rarely prepares a huge inventory for one SKU. Sold out everything in a short amount of time is common. We don’t display “sold out” immediately if an entire inventory has been checked out within 2 mins. We create a sense of participation by letting user go back and forth.
Edge case 04
When s/he tapps “immediate purchase”, the product is sold out.
Stay on flash sale page for too long
When s/he tapps “immediate purchase”, the product is sold out.
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.
Future
Boost brand loyalty & convert majority of people who losed the “flash sale” to a regular customer.
We can give user some coupons to boost brand loyalty and stickness if the user failed to purchase a product 3 times during flash sale.
UX ( Phase II )
Incoporate SMS message & display the order valid time countdown after GOAT purchased OMNI backend systems.