How It Began
It all started yesterday for numerous users…the long-awaited drop of the collaboration between adidas x IVY PARK. I, too, decided I needed some of this merch…I mean…it is the Queen B and the style along with vibrant color combos…no brainer purchase!
While experiencing the adrenaline rush in the mad dash of bouncing from site-to-site…silently screaming to myself…it is #*%&#(* sold out? C’mon…why are there only #*&(*&#% XS sizes left?
So…in that moment I said…as I should as an Senior XD Visual Designer…why is this more frustrating than not just getting the merch…it was the user experience from these sites that caused the most friction. Users covet moments of delight in their experiences. Even in the rush to get a piece of this drop…even if it is just a belt. The rush from the hunt for these products is the fun part of it too! So here is a quick overview of what eComm sites did it well and those that could use a bit more best practices.
The pre-launch experience was a bit confusing for a new user to their app. The download was easy along with setting up the account. Turning on the notifications as instructed along with the messaging of the process. All great. Then I waited…no notification. I assume that since I didn’t get one…I didn’t even make it to the waiting room. That part wasn’t clear. I think a notification to those that didn’t even get a notification to the waiting room would benefit from a push notification saying something like “We know how excited you were to participate in the pre-launch but at this time we are sold out. Stay-tuned though…tomorrow is the official launch!”. Simple.
Later in the say I did a search and there were products showing up and clicking into them and then selecting sizes resulted in no results. Nothing really happened until I clicked out from the PDP page back to the CDP page…then a ‘sold out’ tag showed…not on the initial click-through or on the CDP. As the user I had to click in then out to activate the tag. A small hiccup but additional testing could validate this part of the experience.
I am a fan of the eComm, retail, product and user experiences that they create…I think some of the hiccups were just the pure fact of releasing a product at scale like this…the demand was cray. I score them at 8 out 10 from the pre-launch experience to the official launch day. In the example below, the UI is solid…clean tagging and typography indicating ‘sold out’. The contrast between the product photos and placement are easy to read.
Score 8 / 10
My obsession to find the product started the day before…scouring the internet for who would be launching these products. Footlocker was on the list. I went through the experience of what their checkout flow was going to be like because you have to basically have a one-tap experience to possible acquire the product. They recommended to create an account in advance to help expedite the process. I added my address and credit to have everything set up. Simple, right?
This is where the delight turned to that *&*(&(*. I set 3 alarms this morning and selected the product I wanted and watched the timer they had on the PDP page. This was actually a fun and great experience for the user. Then boom…like magic…5…4…3…2…1…ADD TO CART! Yes, I got it…I am getting this piece. Oh…wait…damn…my cart was empty…try aging…round spinning circle of doom…waiting. Argh. Bingo…add to cart. It is there…circle again…just wait…don’t hit refresh…DON’T HIT REFRESH LEAH. Checkout button appeared…I hit checkout faster than a fly swatter on a sweltering hot day. Yes, that is my address…that is my card…nothing happened. Place order was greyed out. No instructions…no error. Nothing. I then changed the shipping to see if that would trigger checkout. Place order appeared and I selected it. The circle appeared again. Then my checkout was empty. Product gone. Rinse, lather, repeat. This time I got an error validation without any error message stating what was wrong.
I gave the experience a 3 out of 10 because the images weren’t loading, no indication if items were sold out and the checkout experience was a nightmare. Of course the platform was overloaded but everyone knows this launch had the potential to crash any site. Extra validation and scenario testing…load times and such would help in prod.
Score 3 / 10
Nordstrom, just like adidas, is known for their investment in experience design, innovation, and testing. Nordstrom was on the list for the launch but nothing was there so as I was obsessively souring the internet and trolling others findings on twitter…I went back and just like that…products! So many beautiful product. I wanted the asymmetrical dress and I hit my size, added it to cart and checked out. Then rushed back for that bodysuit…boom…checkout! Easy, right? Right. Well, I got the email of…we will let you know if your order is fulfilled. So as I type…I think I got them…maybe…I dunno. I am now waiting for the dreaded…due to high-demand…we are unable to fulfill your order. This happens in eComm. I think there is much improvement needed in this part of the backend systems…not just at Nordstrom.
The reason for the 7 is because there was inconsistency in what product was available, what was sold out and what sizes were left. I say the tights and clicked on it and it said ‘product not available’. The count at the top of the page kept changing from 32 to 22 to 17. So sold out items were being removed but there were still items that weren’t available which is confusing to the user. If the product on the page wasn’t available…then it should have been removed like some of the other items. When going to the PDP page, the size scroll broke…not all sizes were showing. I assumed because they were gone. An easy solve is to let the user scroll and have the sizes greyed out that weren’t available. The user already understood the scroll so this is a break in their experience if it isn’t consistent.
Score 7 / 10
This one is easy. Nice clean design and product photography. PDP experience is the reason for the score. I selected the product from the CDP and went to the PDP. Looks like all the sizes are there. Click one size nothing happens. So select another size and get the captcha and add to cart. Nothing happens. Then I notice in black text a note about the product not being available. This is an easy fix. I understand minimal and clean design but there have to be cues for the user. Grey out the sizes that aren’t available, place a tag stating ‘sold out’ but it isn’t a good idea to put the message under the CTA in black. Not a a good UI practice for an error message.
Score 3 / 10
Design is challenging and developers, product managers, researchers, strategist and designers work tirelessly to make delightful user experiences. When a product launches like this…there are always learnings, iterations and improvements to be made. When it comes to eComm…best practices need to be incorporated along with hours and hours of testing. Testing with users often gets overlooked or cut out of budgets but when it comes to conversions and drop offs…it is a must do! I am hoping this overview of my experiences helps to make the next launch even better!
Did I get any product…I did. I used a fun little experience called StockX for sneaker addicts. You make bids and watch a scroll bar…of the changes. My bid got excepted and my Sleek Super 72s are in route. My Nordstrom order it TBD.
If you have a little extra time…I highly recommend reading through the #IVYPARK on twitter. The memes and reactions to these experiences are wonderful and hilarious!