It's 2018, and while eCommerce websites haven't really needed to change much in the past decade (compared to the previous decade, certainly), it continues to amaze me how rough so many shopping experiences actually are. Why do you shop on Amazon (most of you do, so do I), as we are all doing so more and more, even as their price advantage is slowly traded in for profitability? We trust that we'll be able to accomplish our goal (find and buy a thing) with as little pain as possible.
So, if we want to compete with Amazon in the slightest, we will need to do something remarkable to earn those shoppers. But before we worry about "crafting a brand story that includes the customer", or "engaging with our audience in the way they want to be engaged," I propose we get some fundamentals right, first.
To that end, I did another secret shop, identifying opportunities in one shopping experience that are almost certainly relevant to your site, as well. This episode's victim... um, I mean recipient of this free site audit is outdoor retailer, Moosejaw! They were acquired by Walmart in early 2017, and we'll see whether that combo works for the shopper!
Today's exercise was shopping for a new pair of hiking boots for myself. My current pair of Keens have had a long and illustrious career, carrying me through countless adventures over the past few years.
And, so, these boots have more than earned their retirement, but before I send them off to the boot farm, I'd better recruit their replacements!
Quick, to the Googlemobile!
The Field of Competition: Distinctly D2C?
Direct to Consumer is a massive trend, for obvious reasons. Retail, as a concept, has been primarily a geographic arbitrage game for the past few centuries. You find a product that's less common somewhere else (or otherwise in greater demand), and you make a profit on the difference in perceived local value. It's a business model that is as old as currency, yet erodes in the face of online shopping and almost unbelievably fast home delivery.
DtC companies are the product, so their value is in the product creation itself, not just the markup on the materials. Further, they're insulated from Amazon's predation, as there's no middleman to cut out, and buy direct.
Still, this was more severe than I expected.
I'm a huge fan of the DtC (sometimes labelled "D2C", although I'm going to stop doing that), but retail does provide one significant feature that DtC can't--cross-brand comparison shopping! And so, I wanted to shop on a retailer, as I'm not sure what brand of boots I need, at least not yet.
And, so, I clicked on the Moosejaw text ad, rather than a Shopping result. This also is going to drop me on a category page, which is more appropriate, given my broad search.
Eventually... a Landing Page!
This is the first instance of Moosejaw's rough, awkward, and kind of forced sense of humor, with the link to "read all the dumb rules and details." I get it, you have a job, and there are things that your legal team make you do, and you're sticking it to the man. The shopper's going to love that, right?
Not really. What you've done is broken the fourth wall, and shown something uninviting behind the curtain.
But, to be fair, their eye-rolling humor did catch my attention! That's good, right? Well, it might be, if it were on a call to action, but it was on a distraction. If you click on it (as I couldn't prevent myself from doing), you're tossed to the very bottom of the Terms and Conditions page of the site, where it's not really clear what's going on, till you realize that you're looking at a clause on footwear exchanges.
To make matters... (sigh) so very much worse, that banner click failed to open into a new tab, utterly derailing my attempt to shop for boots, and kicking me entirely out of the funnel.
What's the point of this site again? To get me to buy something, right?
Fine, I'll click "back" (itself a symptom, not a solution), and find that Moosejaw missed something else obvious. Remember how I searched for men's hiking boots, and the Ad itself specifically called out that it was for men's boots? Well, the landing page isn't narrowed to men's boots.
That may seem minor, but it's also ridiculous to get wrong. Even if the Ad itself was using Dynamic Keyword Insertion, there's nothing stopping them from attaching the appropriate landing page URL to the keywords that would be best served by a filtered landing page.
The ajax garbage ran amok again, loading the page in a little over 8 agonizing seconds, only to spend another four loading what appeared to be a floating footer bar, that was covered up by the status of the browser (at least in Chrome). This means that bar is covering itself up by trying to load more crap into the bar?
While trying to figure out where the links in this bar go, the mouse-over status bar did exactly the same thing, making it about as useful as a poke in the eye.
And then... in the middle of the bar (in the right of the screenshot above), what is MADNESS?
Madness (n): Extremely foolish behavior. For example, linking away from your shopping experience on every page, giving your shoppers more opportunities to get distracted.
I get it, they're still just trying to have fun with their brand. But it feels really incoherent. It feels like the "personality" of the brand is just what is squeezed between the bars of their corporate overlords. It's almost like it was a cool brand, and maybe it was shredded into absurdity by the acquisition by Walmart?
Finally back on topic...
Despite that MADNESS link also failing to open to a new tab, I managed to stumble my way back to the category page.
At this point, weak product data started to become really obvious...
Data was really inconsistent, and it was really apparent when you looked at the filters on the category page:
The fact that there was only a single "Size", and a ton of "Footwear Size" carrying products, suggests that the "Size" value was an artifact of some other product data schema. This won't be the last time it seems like Moosejaw's catalog is badly cobbled together from manufacturer-provided data.
When I was a retailer, we had a rule: Never trust data from outside our own building. This meant we had to do a lot of product content work before we could add products to the site, writing original titles, descriptions, and ensuring complete data across the relevant fields. Lots of work, but the result was a site that positively exudes expertise and confidence.
This was the other thing.
But their category filters weren't all bad. They did at least have a custom price range capability, which was better than I could say for Home Depot and others in my last UX review.
Another field was what I assume represented Customer Ratings, but they decided to call these "Custy" ratings. Was I able to determine that they were talking about Customers? Sure. But it was really awkward. It's like an in-group joke, which might seem like a great idea for returning shoppers, but as a new shopper, it says "you're not one of us, and aren't welcome here." Savvy?
Oh, and on the ratings, they were all "and up" values, which is normal. Except, they were displayed as checkboxes, rather than radio buttons, despite being a select-one interface element. Is it that hard to use the right interface element type for the right job, Moosejaw?
My ongoing struggle for relevant products...
Sorels are amazing, but they aren't hiking boots. We have to select "hiking" in the "best use" filter in order to turn the Hiking Boots page into a ... hiking boots page?
Once properly filtered to... try to stay with me, now... men's hiking boots, I found something pretty disappointing. They simply don't have anything resembling a good selection of these products. Most of the few boots they did carry were designed for cold and wet hiking, which is great, but not what I need. I live in Phoenix, "waterproof" is a negative for me, as I'd rather have the additional breathability for hiking in the desert.
Oh, they have a Compare-To feature!
On the downside, it looks like I designed it.
First, how about that red notification bar, that encroaches on the "Compare Products" header? Classy, right? How about the awkward amount of whitespace, paired with all of the other elements that are claustrophobically crammed together? Oh, and then there's our favorite, the usually-unreadable floating bottom bar, obscured by the browser status, as usual.
But as soon as you scroll down, it gets worse.
The product data was horribly hit and miss. Many of the fields were only populated in one or two of the columns, resulting in a complete lack of confidence that I was even looking at valid data, let alone anything complete enough to drive a buying decision. Even the data that was there was anxiety inducing, as one of these pairs of boots claimed to be more than twice the weight of the others. Possible? Sure! But unlikely enough to chop another ten points off of our shopper's confidence score.
Further, when you clicked the "...more" link in the product description previews, rather than expanding to show the remaining available text, it takes you to that product page! Would you be surprised at this point to hear that it wasn't in a new tab, either?
I think Moosejaw may be entirely unaware of target="_blank" as an option for links.
So, you want to really compare these products? You're on your own to open new tabs, like a neanderthal.
Product Page: Pain Points Present
Once I accepted my fate, and found myself on the Product Detail Page (PDP) for one of the boots I was investigating, it was apparent that little thought went into it beyond implementing the template provided by the eCommerce platform.
First, it was horrifyingly slow, as most of the pages had been. Second, there was only one color available, and it wasn't preselected.
Just in case we were getting far too close to a buying decision, Moosejaw roars back with another ambiguity to throw us off the scent. There's only one color available, "Ebony / Gargoyle", but there are photos of at least two different boots--one olive-gray (shown above), and another that was all-gray. Ebony is allegedly a black color, which neither boot actually is, and Gargoyles are generally made of stone, so... is that the all-gray one?
So, I resorted to clicking the "Need Help" bug on the left of the product page, and get this:
I guess it's supposed to be cute. It seems badly forced, and only slightly less awkward than karaoke at an office party. And what happens when we open this chat?
I get that you might want email address to follow up with someone who is disconnected mid-chat, but I started to suspect that wouldn't be the end of it.
Spoiler Alert: They f***ing spammed me later that same day.
So, without granting them permission to mail me at all (right? RIGHT?), one of their support reps helped me. That part of the experience was pretty solid. The rep couldn't seem to tell which tab I was on, so it took a moment to get on the same page, but he did confirm for me that the olive-green photos represented the mysterious "Ebony / Gargoyle" color designation.
With that information in hand, I started to dig into the product photography. The good news is that the actual photographs were really quite good! This is also true of their 360-degree view, which requires a special rig to shoot effectively.
The product page's gallery, on the other hand, failed to take advantage of that one shining beacon of competency, relying on a buggy, twitchy zoom-scroll interface, rather than letting me see the entire, full-resolution photo at once.
I guess they're afraid that I'll steal their product photography? I mean, that happens a lot, and I've had to defend my site from such hooligans, but never at the cost of the experience for the actual shoppers.
I spent so much time trying to get that photograph open in a new tab that I accidentally confused Chrome, and found myself stuck with an open Console pane, which locked me into their Mobile version of their responsive template.
It wasn't great, either.
Once I closed this tab, and started over, I encountered several more prolonged periods of "...waiting for cache...". It was almost like Moosejaw didn't know that caching was supposed to speed things up. If the browser was referring to local cache, something was misconfigured. If the browser was referring to remote cache (image servers, in-memory object servers, etc.), then they weren't doing a very good job of saving load time.
Once the page was loaded again, in the right device view, I decided to try to watch the embedded product video for the Asolo boots I was viewing. I expected it to describe the unique features of that product line.
Instead, it was a painfully boring video narrated by an anthropomorphized barbiturate.
When I tried to go back from a product page to the Category page, I got hit by this:
No, Moosejaw, I'm not seeing what I want. But more importantly, you threw a browse-abandonment modal window at me when I wasn't abandoning, but rather just navigating around your site.
Your modal manager (be it a third party app, or developed in-house) should be able to tell what browser I'm using, and therefore the difference between a mouse movement toward the URL bar (an upcoming exit), and the back button (a navigational click). Just a mouse moving toward the top of the screen isn't enough to verify intent, and this use case was a hard miss.
Upon returning to the category page through the site navigation, my Compare-To selections were not preserved. So, I had to recreate my selections, in order to continue my shopping.
At this point, I've already decided not to buy from this site, but I was in for a penny, in for a pound, so I added the closest option to the cart, and tried to charge ahead.
The cart was busy, ugly, and unremarkable. It fell victim to one of one of the classic blunders!
Do you need to make it easy for someone with a coupon to enter it? Yes. But you can do that with a little collapsed entry field. "Have a discount code?" is a prompt that I've seen deployed successfully, and the absence of the code's field was effective enough to win an A/B test by a handsome margin.
They do this again in the checkout, just in case you missed your opportunity to leave the site and never come back.
The rest of the checkout process was pretty mediocre. It was obviously driven by their platform's limitations, not the user's best interest. The billing/shipping address controls were inconsistent and buggy. The validation included notifications that would auto-dismiss before you could read them. There were pop-over messages that showed up multiple times, uninvited.
Worst of all, it expect YOU to do more work that they should be doing for you.
Throughout this wreck, it kept making reference to ship dates. I don't care about ship dates. Not in the slightest. I care about delivery dates.
On the topic of delivery...
I gave up. It was too much of a struggle to deal with this site. They expect me to do all of the work of product comparison, fight through their nearly-non-existent product data, do basic math for them, and then they try to trick me into the cheaper shipping option... for them.
The entire site was so sluggish, and prone to extended ajax loading pains, that I had to see what the deal was. BuiltWith reported that they were built on IBM Websphere, which may indicate that their ERP was wagging the dog, resulting in a mediocre web frontend. However, they also had a laughable list of installed vendor tags. No tag manager in the world can save you if you rely almost entirely on third party plugins for your site's functionality. I bet they could have even tested each feature individually, each with a positive A/B test, but failed to realize that if you pile enough straw on a camel's back, eventually, that poor critter is going to be crushed into a fine, pink mist.
Oh, and just to top everything off, guess what?
Final Grade: D
I've seen worse, so I need to reserve the F for those truly remarkable disasters. However, this was still a failure, so I can't give them even a C-, either. They'll have to take this class over again.
Their site fought me at every step, their load-times were inexcusable, and then they violated CAN-SPAM in order to send even more annoying garbage at me, even after I'd fled for the hills. And this isn't user error--I literally have a video recorded of my entire shopping experience, so it's unambiguous that no consent was given along the way, even on accident.
If you'd like a UX review of your site, let me know at email@example.com! If I select your submission, and you'll let me share the results (brave enough?), they're free. If you'd like it just for internal consumption, then we can discuss other arrangements, as well.
I love talking shop, so let me know what you think! Was I unfair? Were there other ways to improve Moosejaw that I overlooked?