How to not “sell out” in UX design
One frustrated shopper’s recommendations
As the weather becomes pleasant enough to spend more time outside, I thought maybe I’d pick up a new hobby: roller skating.
While roller-skating popularity has been increasing steadily since 2017, I didn’t expect the trend to continue its boom post-stay-at-home orders. After spending hours researching roller skate brands, I landed on the retro-chic Impalas (not sponsored). I wanted a pair right away. I also wanted to resist going to Amazon directly to support these smaller retailers. Alas, the eCommerce gods had other plans for me. I had some disappointing shopping experiences hunting for skates on different sites, and will cover issues like:
- Unhelpful filters
- Unnecessary difficulty in figuring out a product availability
- Lack of helpful statusing
I’ll walk through the user journey of trying to buy skates on various sites and point out small — yet important — details that impact eCommerce UX.
Help shoppers filter out the wrong options
I want to buy some cute roller skates for myself. From my research, I know that I’m a size 8 in this brand. So, Googled “Impala skates” and found a list of vendors.
First, I visit Tilly’s and find a pair of “online exclusive” skates. I click on the image for Pink & Yellow Quad Skates and am brought to the item page with a message reading “Select Color and Size, then click ADD TO BAG”.
Unfortunately, there is no dropdown or button for me to select a size so I am unable to click on the “ADD TO BAG” button.
Okay, let’s try again. I return to the products list and click on Rose Gold Quad Skates. This time, I see a few different size buttons for me to click on: 5, 6, 7, and 10. Well, I am a size 8 but maybe because I fit 7.5 in women’s I could try a 7.
“The quantity requested exceeded the quantity we have in stock for Rose Gold Quad Skates.”
For this pair of skates, there were supposedly 4 size options but in reality, maybe they only had a size 5 in stock at the time.
UX Improvement: Filters shouldn’t only be interactive buttons for users to click on; they should also have status dynamically embedded within the filter. If a size isn’t available, then it shouldn’t be selectable — nor should it waste a click.
Surface up “sold out” status
I decided maybe it was time to visit the Impala site to see what their options were. From Google, I clicked on a link that directed me to all of Impala’s roller skates and was able to see all the different styles they had to offer. I select Quad Skate Sky Blue / Yellow. On the product page, I see that all of the sizes are crossed out — unavailable.
Well, I guess they don’t have my size here either.
I tried Fritzy’s next. They display “sold out” next to skates that they didn’t have in stock anymore. I want the Holographic pair from the list I see. On the product page, I click the size dropdown for my size and darn. It’s grayed out.
Despite learning that I should be filtering my size on the next site I visit, Fritzy didn’t have that option. I could only filter by other options like popularity and price.
UX improvement: if an entire product is sold out, surface that higher up on the page and on the category page above. Some pages use a “sold-out” sticker over a product that is completely out of stock. Help shoppers doing more work in thinking they have a chance!
Okay, let’s try one more site.
Sold-out (again)
Pigeon’s Roller Skate Shop is a site that was suggested by a Youtuber for “all things skates.” I had watched a series of YouTube reviews so I felt comfortable following this recommendation. Similar to Fritzy’s, the products had obvious stickers that indicated that certain items were out of stock but there was no option to pick my size. I picked a White pair of skates this time.
I didn’t realize this initially when I looked at the product page but the “ADD TO CART” button actually read “SOLD OUT”. Because I completely missed the button, I went ahead and selected my size and realized the page changed with a message that read “Let Me Know When This Is Back In Stock!”
A couple of frustrations here:
- The sizes were not grayed out and I was able to select a size.
- The “SOLD OUT” button is not grayed out in the position of the “ADD TO CART” button (next to the quantity input).
UX improvement: make the “sold out” messaging obvious without requiring the shopper to click on each size to find out. Some eCommerce experiences account for this by dynamically generating the words “SOLD OUT” within the dropdown menu of options (“e.g. Women’s 1 — SOLD OUT”). Another approach is to have choice chips that expose all the available sizes, and gray out any choices that aren’t available.
Designing for edge cases
An edge case is a rare situation where a user’s actions are outside of the expected parameters for a product. Good UX anticipates edge cases so that users continue on their happy path to successful completion.
Roller skates, rollerblades, and other fitted footwear are often bought in-person. Consumers are accustomed to trying on skates to make sure they are appropriate for your size. The pandemic and continuing shift from brick-and-mortar to online sales often leaves a gap — and opportunity — in eCommerce UX.
This UX review focused on a narrow aspect of online shopping experience: indications of out-of-stock, displaying sold-out items, and sorting by size. There’s so much room to intelligently implement these to improve conversions or at least help the user avoid mistakes. By providing additional options that users are familiar with when shopping online for clothes and shoes, these stores can expand their target audience.
As a shopper, I reached various deadends trying to snag a pair of cute roller skates. After all of the work and anticipation of finding the “perfect ones”, I had to close one website after another website and find another way to get roller skates for myself.
How does Amazon do it?
While Amazon doesn’t allow for filtering options for sizes, their A9 search algorithm indexes data to populate recommended searches — similar to how Google makes its search predictions. As I type into the Amazon search box “impala skates”, there are recommendations popping up with “impala skates women 8”, “impala skates black”, etc. As a user, I don’t have to think too hard to be able to perform a search because it predicts and suggests an optimized search even before I’ve decided.
When looking at products from a chosen vendor, I am able to select a color and style. Given that I want to make sure size fits, I can select my size first. After doing so, the color options are readjusted and the options that are unavailable become greyed out to indicate unavailability. Looking at the list, if I wanted a size 7 pair of Impala Roller Skates, I can easily tell that I only have the color options of Aqua, Holographic, and Leopard.
Since I was a little disappointed by the prices being steeper than my original intent, I explored Amazon’s curated lists “Inspired by your recent shopping trends” and “Sponsored products related to this item” before making a final decision.
Ultimately, I successfully acquired a pair of Moxi’s Beach Bunny roller skates. Even though I wanted to go with an independent retailer, Amazon beat out the competition with availability and arguably a better shopping UX.
Fingers crossed that they’ll fit and I won’t fall on my bum too much!
[UX COURSE RECOMMENDATION]
The Psychology of eCommerce: How to Sell Online
In this UX review, you saw how bad UX affects the conversion rate of e-commerce sites. Lost sales and frustrated shoppers are not good for any business. If you want to dive deeper into eCommerce UX, then you’ll find this Interaction Design Foundation course full of actionable tips, like:
- What the psychology of choice is, and how you can harness it
- How a coherent narrative can make it easier for your customers to engage with you and stay engaged
- How to know make use of even the shortest attention span to generate sales
- Improve conversions (sales, click through rates) in an ethical manner
Plus, sign up with this course using our Educational Partner link to get 3 months off your first year of your IDF annual membership.
