From your top-level nav to your seal-the-deal content, there are endless considerations when it comes to crafting your ecommerce page. Using one of his personal favorite examples, Rand takes you step by detailed step through the process of creating a truly superb ecommerce page in today's Whiteboard Friday.

Click on the whiteboard image above to open a high-resolution version in a new tab!

Video Transcription

Howdy all and welcome to a special edition of Whiteboard Friday. My name is Rand Fishkin. I'm the founder of Moz, and today I want to talk with you about how to craft the best damn ecommerce page on the web. I'm actually going to be using the example of one of my very favorite ecommerce pages. That is the Bellroy Slim Wallet page. Now, Bellroy, actually, all of their pages, Bellroy makes wallets and they market them online primarily. They make some fantastic products. I've been an owner of one for a long time, and it was this very page that convinced me to buy it. So what better example to use?

So what I want to do today is walk us through the elements of a fantastic ecommerce page, talk about some things where I think perhaps even Bellroy could improve, and then walk through, at the very end, the process for improving your own ecommerce page.

The elements of a fantastic e-commerce page

So let's start with number one, the very first thing which a lot of folks, unfortunately, don't talk about but is critical to a great ecommerce process and a great ecommerce page, and that is...

1. The navigation at the very top

The navigation at the top needs to do a few things. It's got to help people:

• Understand and know where they are in the site structure, especially if you have a more complex site. In Bellroy's case, they don't really need to highlight anything. You know you're on a wallet page. That's probably in Shop, right? But for Amazon, this is critically important. For Best Buy, this is hugely important. Even for places like Samsung and Apple, critical to understand where I am in the site structure.
• I want to know something about the brand itself. So if this is the first time that someone is visiting the website, which is very often the case with ecommerce pages, they're often entry points for the first exposure that you have to a brand. Let's recall, from what we know about conversion rate optimization, it is uncommon, unusual for someone to convert on their first visit to a brand or a website's page, but you can make a great first impression, and part of that is what your top navigation needs to do. So it should help people identify with the brand, get a sense for the style and the details of who you are.
• You need to know where, broadly, you can go in the website. Where can I explore from here? If this is my first visit or if this is my second visit and I'm trying to learn a little bit more about the company, I want to be able to easily get to places like About, or I want to be able to easily learn more about their products or what they do, learn more about the potential solutions, learn more about their collections and what other things they offer me.
• I also, especially for ecommerce repeat visitors and for folks who are buying more than one thing, I want to have this simple navigation around Cart. I don't, in fact, love how Bellroy minimizes this, but you want to make sure that the Search bar is there as well. Search is actually a function. About 10% to 12% of visitors on average to ecommerce pages will use Search as their primary navigation function. So if you make that really subtle or hard to find or difficult to use, the Search feature can really limit the impact that you can have with that group.
• I want that info about the shopping process that comes from having the Cart. In Bellroy's case, I love what they do. They actually put "Free shipping in the United States" in their nav on every page, which I think, clearly for them, it must be one of the key questions that they get all the time. I have no doubt that they've done some A/B testing and optimization to make sure, "Hey, you know what? Let's just put it in front of everyone because it doesn't hurt and it helps to improve our conversion rates."

2. Core product information

Core product information tends to be that above-the-fold key part here. In Bellroy's case, it's very minimalist. We're just talking about a photo of the wallet itself, and then you can click left or right, or I think sometimes it auto-scrolls as well on desktop but not mobile. I can see a lot more photos of how many cards the wallet can hold and what it looks like in my pants, how it measures up compared to a ruler, and all that kind of stuff. So there's some great photography in here and that's important, as well as the name and the price.These core details may differ from product to product. For example, if you are selling a more complex piece of technology, the core features may, in fact, be fairly substantive, and that's okay. But we are trying to help. With this core product information, we're trying to help people understand what the product is and what it does. So wallet, very, very obvious. If we're talking about lab equipment or scientific machinery, well, a little more complicated. We better make sure that we're communicating that. We want...

• Visuals that are going to serve to... in this case, I think they do a great job, but comprehensively communicate the positioning, the positioning of the product itself. So Bellroy is clearly going with minimalist. They're going with craft. They're a small, niche shop. They don't do 10,000 things. They just make wallets, and they are trying to make that very clear. They also are trying to make their quality a big part of this, and they are trying to make the focus of the product itself, the slimness. You can really see that as you go into, well obviously, the naming convention, but also the photography itself, which is showing you just how slim this wallet can be in comparison to bulky other wallets. They take the same number of cards, they put them in two different kinds of wallets, they show you the thickness, and the Bellroy is very, very slim. So that's clearly what the positioning is going for.
• Potentially here, we might want video or animation. But I'm going to say that this is only a part of the core content when it truly makes sense. Great example of when it does make sense would be Zappos. Zappos, obviously, has their videos for nearly every shoe and shoe brand that they promote on their website. They saw tremendous conversion rate improvements because people had a lot of questions about how it moves and walks and how it looks with certain pieces of clothing. The detail of having someone explain it to you, as I'm explaining ecommerce pages to you in video form, turned out had a great impact on their conversion rate. You might want to test this, but it's also the case that this content, that video or animation content might live down below. We'll talk about how that can live in more of the photos and process at the very bottom at the end of this video.
• Naming convention. We want price. We want core structural details. I like that Bellroy here has made their core content very, very slim, just the photos, the name, and the price.

3. Clear options to the path to purchase

This is somewhere where, I think, a lot of folks unfortunately get torn by the Amazon model. If you are Amazon.com, which yes, has phenomenal click-through rates, phenomenal engagement rates, phenomenal conversion rates, but you are not Amazon. Repeat after me, "I am not Amazon." Therefore, one of the things that Amazon does is they clutter this page with hundreds of different things that you could do, and they built that up over decades, literally decades. They built up so that we are all familiar with an Amazon page, ecommerce page, and what we expect on it. We know there's going to be a lot of clutter. We know there's going to be a ton of call-to-actions, other things we could buy, things that are often bought with this, and things that could be bundled with this. That is fine for Amazon. It is almost definitely not fine for you unless you are extremely similar to what Amazon does. For that reason, I see many, many folks getting dragged in this direction of, "Hey, I want to have 10 different calls-to-action because people might want to X, Y, and Z." There are ways to do the "might want to X, Y, and Z" without making those specific calls-to-action in the core part of the landing page for the ecommerce product. I'll talk about those in just a second.

But what I do want you to do here is:

• Help people understand what is available. Quick example, you can select the color. That is the only thing you can do with this wallet. There are no different sizes. There are no different materials that they could be made of. There's just color. Color, Checkout, and by the way, once again, free shipping.
• I am trying to drive them to the primary action, and that is what this section of your ecommerce page needs to do a great job of. Make the options clear, if there are any, and make the path to purchase really, really simple.
• We're trying to eliminate roadblocks, we're trying to eliminate any questions that might arise, and we want to eliminate any future frustration. So, for example, one of the things that I would do here, that Bellroy does not do, is I would geo-target based on IP address. So I'd look at the IP address of the visitor who's coming to this page, and I would say, "I am pretty sure you are located in Washington State right now. Therefore, I know that this is the sales tax amount that I need to charge." Or, "Bellroy isn't in Washington State. I don't need to charge you sales tax." So I might have a little thing here that says, "Sales Tax" and then a little drop-down that's pre-populated with Washington or pre-populated with the ZIP code if you know that and "$0." That way it's predictive. It's saying already, "Oh, good. I know that the next page I'm going to click on is going to ask me about sales tax, or the page after I enter my credit card is." You know what, it's great to have that question answered beforehand. Now, maybe Bellroy has tested this and they found that it doesn't convert as well, but I would guess that it probably, probably would convert even better with that messaging on there.

4. Detailed descriptions of the features of the product

This is where a lot of the bulk of the content often lives on product pages, on ecommerce pages. In this case, they've got a list of features, including all sorts of dimension stuff, how it's built, what it's made from, and what it can hold, etc., etc.

What I'm trying to do here is a few things:

• I want to help people know what to expect from this product. I don't want high returns. Especially if I'm offering free shipping, I definitely don't want high returns. I want people to be very satisfied with this product, to know exactly what they're going to get.
• I want to help them determine if the product fits their needs, fits what they are trying to accomplish, fits the problem they're trying to solve.
• I want to help them, lead them to answers quickly for frequently asked questions. So if I know that lots of people who reach this page have this sort of, "Oh, gosh, you know, I wonder, what is their delivery process like? How long does it take to get to me because I kind of need a wallet for this trip that I'm going on, and, you know, I'm bringing pants that just won't hold my thick wallet, and that's what triggered me to search for slim wallets in Google and that's what led me to this page?" Aha, delivery. Great job. You've answered the question before or as they are asking it, and that is really important. We want answers to the unasked questions before people start to panic in the Checkout process.

You can go through this with folks who you say, "Hey, I want you to imagine that you are about to buy this. Give me the 10 things in your head. I want you to say out loud everything that you think when you see this page." You can do this with actual customers, with customers who are returning, with people who fit your target demographic and target customer profile but have not yet bought from you, with people who've bought from your competitors. As you do this, you will find the answers to be very, very similar time after time, and then you can answer them right in this featured content. So warranty is obviously another big one. They note that they have a three-year warranty. You can click plus here, and you can get more information.

I also like that they answer that unasked question. So when they say, "Okay, it's 80 millimeters by 95 millimeters." "Man, I don't know how big a millimeter is. I just can't hold that information in my head." But look, they have a link "Compare to Others." If you click that, it will show you an overlay comparison of this wallet against other wallets that they offer and other wallets that other people offer. Awesome. Fantastic. You are answering that question before I have it.

5. A lot of the seal-the-deal content

When we were talking before about videos or animations or some of the content that maybe belongs in the featured section or possibly could be around Checkout, but doesn't quite reach the level of importance that we've dictated for those, this is where you can put that content. It can live below the fold, scrolling way down. I have yet to see the ecommerce page that has suffered from providing too much detail about things people actually care about. I have seen ecommerce pages suffer from bloating the page with tons of content that no one cares about, especially as it affects page load speed which hurts your conversions on mobile and hurts your rankings in Google because site speed is a real issue. But seal-the-deal content should:

• Help people get really comfortable and build trust. So if I scroll down here, what I'm seeing is more photos about how the wallet is made, how people are using it. They call this the nude approach, which cleverly titled, I'm sure it makes for a lot of clicks. The nude approach to building a wallet, why the leather is so slender, why it adds so little weight and depth, why it lasts so long, all these kinds of things.
• It's trying to use social proof or other psychological triggers to get rid of any remaining skepticism. So if you know what the elements of skepticism are from your potential buyers, you can answer that in this deeper content as people get down and through this.

Now, all right, you might say to yourself, "These all sound like great things. How do I actually run this process, Rand?" The answer is embedded in what we just talked about. You're going to need to ask your customers, your potential customers, your customers who bought from you before, and customers who did not buy from you but ended up buying from a competitor, about these elements. You're going to need to test, which means that you need some infrastructure, something like an Unbounce or an Optimizely, or your own testing platform if you feel like building one, your engineers do, in order to be able to change out elements and see how well they convert, change out pieces of information. But it is not helpful to change things like button color, or to change lists of features, or to change out the specific photos when the problem is, overall, you have not solved these problems. If you don't solve these problems, the best button color in the world will not help your conversion rate nearly enough, which is why we need to form theories and have hypotheses about what's stopping people from buying. That should be informed by our real research.

SEO for ecommerce pages

SEO for ecommerce pages is based on only a few very, very simple things. Our SEO elements here are keywords, content, engagement, links, and in some cases freshness. You hit these five and you've basically nailed it.

• Keywords, do you call your products the same thing people call your products when they search for them? If the answer is no, you have an opportunity to improve. Even if you want to use a branded name, I would suggest combining that with the name that everyone else calls your things. So if this is the slim sleeve wallet, if historically Bellroy had called this the sleeve wallet, I would highly recommend to them, "Hey, people are searching for slim wallet. How about we find a way to merge those things?"
• Content is around what is on this page, and Google is looking for content that solves the searcher's problem, the searcher's issue. That means doing all of these things right and having it in a format that Google can actually read. Video is great. Transcripts of the video should also be available. Visuals are great. Descriptions should also be available. Google needs that text content.
• Engagement, that is going to come from people visiting this page and not clicking the back button and going back to Google and searching for other stuff and clicking on your competitor's links. It's going to come from people clicking that Checkout button or browsing deeper in the website and from engaging with this page by spending time on the site and not bouncing. That's your job and responsibility, and this stuff can all help.
• Links come from press. It can come from blogs. It can come from some high-quality directories. Be very careful in the directory link-building world. It can come from partnerships. It can come from suppliers. It can come from fans of the product. It can come from reviews. All that kind of stuff. People who give you their testimonials, you can potentially ask them for links, so all that kind of stuff. Those links, if they are from diverse sets of domains and they contain good anchor text, meaning the name of your actual product, and they are pointing specifically to this page, they will tremendously help you rank above your competition.
• Freshness. In some industries and in some cases, when you know that there is a lot of demand for the latest and greatest, you should be updating this page as frequently as you can with the new information that is most pertinent and relevant to your audience.

You do these things, and you do these things, and you will have the best damn ecommerce page on the web.
All right, everyone, thanks for joining us. We'll see you again hopefully on Whiteboard Friday. Take care.

Video transcription by Speechpad.com