How can we help shoppers indicate out of stock versus pre-order products?
Michael Stars is a LA based e-commerce brand best known for their iconic one sized tee.
Problem
Currently, shoppers are having trouble understanding when items are available for pre-order or simply out of stock.
Working Group
Senior UX Designer
Product Manager
My Tasks
User Flows
Competitive Analysis
Low to Mid Fidelity Wireframes
Platform
Web Responsive
Platform
2 weeks
Stakeholder Interviews/Constraints/Goals
Stakeholder Interviews
After meeting with the stakeholders, optimizations to the site were advised by the head of digital who noticed a negligible amount users were signing up for pre-orders and even a smaller amount were signing up for back in stock notifications.
Technical Constraints
Michael Stars operates on Shopify and has a design system in which it already operates. Optimizations included changes that could be built within their Shopify theme.
Business Goals
Increase the amount of pre-order sales
Increase the amount of email notifications for back in stock items
Increase overall sales
User Flow
As I created user flows (see raw data here) for the following tasks, I discovered the associated problems listed below:
Path 1
On the path to purchase, on the product detail page, user selects product color and the product size, then decides to change the color again.
Problem
Users aren’t able to see all of the in stock versus out of stock colors a product is available to them in their size without clicking into each swatch.
Path 2
On the path to purchase, on the product detail page, when a product is out of stock, user selects notify me in order to receive back in stock notification.
Problem
Users aren’t able to sign up to get back in stock notifications because they may be unaware on how to get notified due to lack of communication on how to do so.
Path 3
On the path to purchase, a user selects a product that is a pre-order, user selects color and size and proceeds to add to cart.
Problem
Users who need to pre-order an item may not have enough information to feel confident in purchasing pre-order items because there is not enough transparency on when pre-orders will ship, as well as when a users card will be charged.
Industry Leading Competitors
Ralph Lauren
Utilizes descriptive text to help guide users to sign up for back in stock email notifications.
Saks Fifth Avenue
Utilizes descriptive text to help guide users know when product will be shipped. And tool tips to let users know when their credit cards will be charged.
Saks Fifth Avenue
Utilizes descriptive text to help guide users to sign up for back in stock email notifications. And tool tips to let users know when their credit cards will be charged.
Aritzia
Utilizes a dropdown to communicate inventory levels.
Optimizations Wireframes - Mid Fidelity
Out of Stock Wireframe Variant
Solution: Out of Stock Size
When a user selects a color, sizes that are out of stock in that color will be crossed out.
Solution: Out of Stock Color
When a user selects a size, colors that are out of stock in that size will be greyed out.
Solution: Out Of Stock Descriptive Text
When a user selects an out of stock size or color, descriptive text will display and prompt user to click the notify me CTA.
Low Inventory Wireframe Variants
Solution: Descriptive Text
When a user selects a size and color of a product that has less than 5 products, this will activate text that saids “Only a few left!” If less than 3 products, it will be indicated by the exact amount. ie: ” 3 left!” “2 left!” “1 left!” This will give users a sense of urgency and prompt them to buy quicker.
Pre-order Wireframe Variant
Solution: Pre-order Tag
Pre-order tag with be displayed next to the product name on the product detail page, the product listing page, and within the cart in order to ensure that users know that this product will not be shipped right away
Solution: Descriptive Text
Descriptive text lets users know when the product will ship and when their credit card will be charged
