Tanner Larsson 0:06
One of the most important aspects of your site is to help the user figure out if they are in the right place. Is that trustworthy? And to help them find the product or thing that they’re interested in looking at your job is to help them do that instantly, where they don’t have to use a lot of conscious thought to figure it out.
Tanner Larsson 0:27
So what I want to do right now is show you some bad execution of “above the fold” space. Remember, this is the most valuable space on your browser on a mobile device for a visitor. So let’s jump over and look at Unif Clothing. So here we are on the homepage of Unif Clothing. So this is the homepage. And you may be saying, well, Tanner, I send traffic to my product page. Why are you showing me the homepage? Well, okay, fair question. I always send traffic to our product page as well. However, as part of a buyer, due diligence process studies show and your Google Analytics tracking will show that over 60% of your traffic will go back to the homepage before completing a purchase. The above the fold space, and specifically, the homepage itself is very important. But above the fold is more important, because it’s the snapshot that they get when your site loads. And that snapshot is what gives them into the subconscious shopping brain, all the information that they need to make a decision of whether they want to look more or get out.
Tanner Larsson 1:31
So this page just loaded, I haven’t touched anything yet here. And there’s a whole bunch of stuff going on. First and foremost, they’re using push notifications. Just one more step, we will notify you about new products and promotions. One more step, what’s the first step I took? Loading the site that’s very ambiguous, it doesn’t make sense, later allow, there’s nothing in this push notification for me, I’m all for using Push notifications when they’re done right because they can dramatically increase profits on the back end, you can make some really great sales off of them. And it’s a great way to build a list. That allows you to push straight to the desktop. However, this is very poor execution.
Tanner Larsson 2:12
So I’m going to click later. And now we’re on the home page itself. So just take a look at this. When are you supposed to look in? Where are you supposed to look? What are you supposed to look at? Where are your eyes naturally drawn to? Well, in my case, it’s the yellow background shoe over there, because it’s the most vibrant, and then it’s the blue and then it’s the purple. But look, everything’s moving when I hover over it. So I don’t really know what the heck is going on. There’s a lot of stuff. Then we’ve got this navigation up here at the top. It looks like it’s gradient. So it’s a sliding scale from one color to the other color as it curls across. Look at accessories, dark to light. But the image in the background makes it almost impossible to see. And then it blocks out the entire screen when you do get it but if you go to New, there’s nothing, we can see, women’s tees, shorts, I think it says accessories, back in stock, sale and gift cards. So out of everything. Only women’s and sale has a dropdown. And then there’s no search function that you can see on the page. Other than oh, wait, there it is, there’s one right over here, but that’s terrible.
Tanner Larsson 3:24
So let’s keep going. We’re staying with the top level navigation. First of all, you can’t read it and everything darkens out. And then it’s confusing. It’s a very small font, you can’t see it, it’s not clear for the user, it doesn’t help me navigate the page to get where I want to go. This is problematic. The point of top-level navigation is not just to throw a bunch of links up there. The point is, to help your visitor, your browser, your shopper, get to the next level of the shopping experience one step further in the buyer’s journey from the product page, it should be to a category page or straight to a product page. That top-level navigation is so hard to use. Nobody’s going to use it. Then we’ve got this random word “The” stuck over here on the side. And then you have “In with the new shop the latest” in white on this girl’s leg and into her skirt, where you can’t even read it practically. So what does this do? I get that they’re kind of an artsy looking style. They’re very fashion forward or whatever, in terms of their layout, but it’s a wreck. Because it’s not easy to see, oh, wait, there’s a logo down there. Now we have a logo for the brand down in the very lower left hand corner. So as a browser, I’m overwhelmed. Yes, I understand. I’m not the target demographic for this store. But I do know many other stores that sell to the same demographic. And I guarantee you they’re performing better because their layout is more prototypical. Prototypical means what the customer is expecting and what the consumer is expecting. This store is not prototypical at all.
Tanner Larsson 4:57
Now let’s go back up to the top right corner over here, we have a heart, a magnifying glass, a person. And I don’t know what that is, I’m guessing It’s their cart icon. It’s a circle, and their cart pops up as a little black screen. So the heart thing, this is a wish list. Now look at their wish list, orangey yellow on the back, you can’t even read it. So that’s a bad execution, too, then they’ve got a search bar. Let’s see what happens. It blocks out the screen again. And then they have an account icon. The thing is, if they want to use these icons, that’s okay. It’s not great, but it’s okay. But at the very least, they should have a label underneath and this should say wishlist, search, account, cart. Just like you label them on mobile, you want to label them on the desktop. Again, studies have shown, and research has shown and all of our testing, over $400 million of the testing has shown that people don’t actually know what these icons mean, even though you do because you’re the seller, your shoppers don’t. And most of them have trouble with it. Also, in the search bar, there is no search bar unless they click the magnifying glass, which is not prototypical. It’s not what they’re expecting. When they go to Amazon to search for something, do they have to click on a search bar to pop up a search bar or a search thing to pop up a search bar? No, they just type it in. When they go to Banana Republic. When they go to any other store? Do they have to click a search thing? No, it’s right there. Why? Well, because your search traffic is worth three to four times more money than all of your other traffic. So that tiny little bit of people that you get to search is worth way more money than your other traffic. So anything you can do to encourage search on your site is a huge benefit. So in this case, this store has a lot of skews, a lot of different products, shoes, skirts, shirts, all that different stuff. In that case, they should have a prominent search bar up here above the fold, basically, in the header would be the ideal spot for it so that consumers can search. And the search bar should have predictive search loaded into it. So as they type, it starts showing them suggestions, just like Google does.
Tanner Larsson 7:07
Now, the actual layout of the above the fold space, we have, shop the latest, we have a Penny Shoe, Skirt, some kind of I think it’s a shirt, a cardigan, and a jacket. But again, you can’t tell what these are because you can’t see below the fold. And all we’re talking about is above the fold. We don’t care about what’s below the fold. So right now, I don’t know what to do. I don’t know who you are, I don’t know what I’m supposed to do next. It’s not clear. So there’s a hierarchy of focus that’s supposed to happen on a page, which means that every page is supposed to have a clear cut path that you want the consumer to click on or go to the next step from, there’s nothing here, my eyes go like this. Because I don’t know what to do. So shop the latest, which would be okay, if you could actually read it, but you can’t. If they’re going to have these images, they should have buttons on them to let them know. But again, there’s also no clear cut thing of what Unif is, where’s the Unif logo? Where’s the trust? What are you? What do you stand for? Are you just another clothing site? Or is there a mission or some value propositions that you can share? What makes Unif unique? If I’m even saying it, right. I don’t know that I am. What makes them unique? What makes them special? Why would I want to buy from you? What’s the trust here? Right now I just see a collection of images that makes me feel confused. And I’m not looking forward to a shopping experience because I don’t know if I’m even on the right store yet or on the right site.
Tanner Larsson 8:47
Now this store is a top performing store in terms of traffic, they get a massive amount of traffic on a daily basis. So I know they’re doing something right. I can tell you right here, they’re doing a lot of stuff wrong in their store that could be helping their conversions more. So the fact that they’re doing something right, they’re doing a lot of stuff right. Cuz they’re doing well, but they could still be doing more. The problem that they’re having here is they let a designer rather than a conversion expert layout their store. Now the question is, do you want conversions? Or do you want to look pretty? And honestly, to me, this doesn’t even look pretty, this just looks confusing.
Tanner Larsson 9:24
So you got to kind of walk that fine line of what’s important, but again, above the fold has these three main focuses one, convey trust, two let them know that they’re on the right side or in the right place, meaning store they want to shop, and three, help them get off the homepage as quickly as possible on to the next level of the shopper’s journey or buyer’s journey. So that would be a category page or product page. There are three links on here that take you to a product page and one link that takes you to a category page. However, none of it’s clear, it’s not labeled, there’s no indication of what I should do. There’s no guide, so in the hierarchy of focus, this is all over the place. So I’m left wondering, what do I do? So more than likely, I would probably scroll for a second. And it gets worse when I scroll because now I’ve got cartoon drawings and this is clickable, but I don’t know why. And then it says “Shop All”. So if this is as far as I went, I would just be super confused as to what I’m doing on this site. What’s the experience I’m supposed to have? What do you sell? What’s your focus? What makes you unique? Why should I waste my time figuring out what you have to offer and do I want to buy from you?
Tanner Larsson 10:34
This is an extreme example, guys. But it is still the same thing. So if your homepage or you’re above the fold page is cluttered and messy and not clear, and doesn’t provide the user with those three things, as we talked about, and you’re above the fold doesn’t have a clear value proposition or a clear action that you want them to take, you’re probably missing the boat. And we’re just talking about above the fold. This is about 15 little things that you could fix just in the above the fold part. But then there’s the rest of the page and there are all the other pages. So if you want to learn how to optimize the rest of the pages on your store, watch these two videos right here. And then also, make sure you click the button below to subscribe and the little bell icon to get notified when we release new videos. I’ll see you in the next video.