Product Pages that Convert

Written by:

Sabine Harnau

In this Web Audit, Sabine takes a close look at a product page on a fair-trade, sustainable e-commerce website. What could the website owner do to make the product page convert better?

YouTube — Watch this video to see Sabine’s web audit for Karakorum. It’s fully captioned, so you can watch it on silent.

Sources mentioned in the video

Transcript (lightly edited)

Hey, it’s Sabine at From Scratch with another Web Audit for the Rainforest.

What is a Web Audit for the Rain Forest?

To quickly explain what a Web Audit for the Rainforest is, this is nearly free offer for brands that do some good to have a professional view of one page on their website, all in exchange for a small donation to a rainforest charity to protect at least one square metre of rainforest.

There’s also an Email Audit for the Rainforest, which works exactly the same way, where we look in-depth at a specific email that a brand/organisation is sending out to subscribers, or it could also be a fundraising-type email. So, yeah, if you’re interested in that, check out the website.

The Karakorum ecommerce website

But let’s have a look at what we’re dealing with today. Today, I’ve got a review of a product page for you. And how this came about is that I taught a master class for the #EthicalHour business community on how to write product pages that convert.

On the back of that, Natasha from Karakorum got in touch to ask for an audit of one of her product pages to see how we can make that convert better. And so I’m really delighted to be looking at an e-commerce page today for one specific product.

We’re not going to look at the check-out today. It’s just the product page itself. And I’m sure there’s going to be lots of interesting stuff for you to take away.

Before we get in to the actual audit, a quick bit of info on what Karakorum does. They offer a lot of artisan products that are Fairtrade, handmade from around the world. And so they also contribute to a lot of the UN SDGs (Sustainable Development Goals). I had to write them down in a list because there were too many for me to remember. We’ve got:

No Poverty
Good Health and Well-being
Gender Equality
Decent Work and Economic Growth
Reduced Inequalities
Responsible Consumption and Production
Partnerships for the Goals.

So a lot of UN SDGs, a lot of Sustainable Development Goals that Karakorum are contributing to. And so it’s a special honour to be supporting them in that venture by having a look at one of their product pages.

Quick overview of the Karakorum product page

And next, I’m going to share my screen with you to show you what the page looks like. So you should be able to see my screen now. Here’s the logo of Karakorum. We’ve got a bit of a header with information about shipping. We’ve got the standards, like a menu and so on. And then we’ve got the the actual information. And I’m just going to quickly scroll through. We’re going to go into much more detail in just a moment.

This is what the page looks like.

What Karakorum are going to receive as part of this Web Audit

Now, apart from this video, Natasha is also going to receive an annotated version of her website. And this time I’ve done the annotations in Invision. I like to play around with different tools. And Invision is a firm favourite. So let me show you how that works. We’ve got various different screens here because of how the page is designed. Natasha will be able to click on those screens or just go through them in this size and resolution.

When you click on ‘comment mode’, all of a sudden you’ve got all of these bubbles that are numbered. And I think on this particular page we’ve got 37 comments, ranging from little things such as “the page takes at least two seconds to load in my browser — would potentially make sense to compress images even further or reduce page load in a different way to speed that up”, to more detailed stuff where I’ve gone into the text, as you can see, sometimes the number is right above a word, to say, look, can we look for a different word, can we phrase that a little bit differently.

So this is what Natasha is going to get. I’m not going to take you through all of these comments. But if you were to apply for this kind of audit for your own web page or your own email, this is what you would get. And there’s no cost involved in looking at these comments. There’s also an option to respond or resolve comments when you’ve had time to work on this detail together with your team, because you can also invite others, like your web designer or other people working with you in the company, or even freelancers working with you, so they can actually make the changes that have come from the audit.

But we’re already five minutes in and I haven’t even talked about anything on this page yet. So let’s get started.

Shipping delay information banner

The first thing that I always notice (I don’t know about you) is stuff at the very top and stuff at the very bottom. And I suppose that’s also why those places are being used by a lot of brand owners to display information that’s relevant and important in the moment. And here we’ve got this green bar: “please note, Royal Mail is experiencing some delays due to covid-19 restrictions and allow for a little bit of extra time for your item to be delivered.”

That’s a very helpful message for people who are maybe in a rush to receive that order. However, the way it’s phrased is kind of the opposite, right? It’s a very long sentence with a lot of information. And we could strip that down to just the bare essentials. So it’s much easier for people to take that information in at one glance without having to read and reread it. Because I had to reread it several times.

There was this bit here where it says “and allow for a little bit of extra time” that made me stumble because it says “Royal Mail is experiencing some delays… and allow for a little bit of extra time.” And I kept thinking “Royal Mail allow for a little bit of extra time”? That doesn’t seem to make sense immediately.

So the easiest thing you could do here, Natasha, is to add a full stop here and start a new sentence or maybe just go in, that’s always a great practice to do, and think about, which words are absolutely essential and delete all the rest.

I would guess, “please note” is not really necessary because you wouldn’t write it if you didn’t want people to note. And you can do the same exercise with all the words in the sentence and you’ll probably end up with something that’s less than ten words long, which will be really helpful.

Many cookie consent tools use dark design patterns by default

Now, looking at the bar at the bottom, this is where we’ve got the cookie information. That’s become a bit of a nuisance in some areas because some pages you click on it and it’s like really big. Or you can’t really use the page without making a decision.

In this case, I think it’s quite in the background. It blends in quite nicely. Which also means, though, that people don’t necessarily make a choice, which they should. You know, as a business owner, you need to have clarity about what people’s wishes are when it comes to cookies, which is why you need a consent tool like you have at Karakorum.

But when I read this: “we use cookies on our website to give you the most relevant experience by remembering your preferences on repeat visits”. That’s, again, quite a long sentence. “By clicking Accept, you consent to the use of ALL the cookies.” And now here we’ve got “accept” as a green button. It’s kind of difficult to read because there’s not a lot of contrast between the green and the white writing on the button. But this is highlighted.

And the cookie settings bit, because when I first came to the page, I expected that would take me to a page about what cookies are and all of that stuff. It doesn’t. When you click it, you get to this bit and you can choose the settings, what cookies you want to accept and which ones you don’t want to accept. That’s great.

But it’s not what this cookie bar suggests. It suggests to me that what you really want people to do is accept all cookies. That’s why this one is green and highlighted. Granted, this is probably what it came like out of the box. And the only thing you probably did, Natasha, was to make sure the green here and the green there, they kind of correspond. But when there’s a choice that’s not benefitting the user and instead it benefits the business and that’s the one that’s highlighted through colour, through the way it’s presented, like in this case, that’s commonly known as a “dark pattern” in the design community.

Why a dark pattern?

Because we default to the highlighted option. We think that’s the most relevant one for us. That’s the one that we should go with in order to make a good choice. We’re not actually going in and considering all of our options when something is presented in this way. So from an ethical point of view, it makes more sense to present both options in the same design and then really give people a choice so that they don’t necessarily take the shortcut that’s going to benefit you as the business owner because you’re going to collect more information.

But it’s the one that they really want to choose and their consent is informed and not guided by design. So that’s an important ethical principle. And unfortunately, most of the cookie bars I’ve seen have some sort of pre-designed thing going on just like this one. So when you use them out of the box, very often the “accept” button is highlighted with colour and everything, and everything else is deprecated. So people are less likely to click on the bit where they can make their own decisions.

So I’m going to go in and disable non-necessary ones. This is also where the information is about what cookies you’re using and what this actually means. There should be another link to your cookie notice in the cookie bar itself, where people can click there in order to get the information. Or you can rephrase it. So it’s clear that when you click on cookie settings, you’ll get that information. But people need to know where to find the info before they make the decision, because if I click “accept” I won’t have had a chance to see all this and review it.

The forces helping and hindering conversion

Right. So that’s out of the way. Let’s have a look at the rest of the page. And I really want to be brief here, because, you know, Natasha has all the information and we’re just looking at a big summary here. When it comes to conversion on this particular product page, I’d say there are two main things driving conversion or hindering it here. That’s actually the case with most web pages. But this is a really good example, I think.

Conversion is all about trust. People, when they make a purchase decision or a decision to sign up for something, they need to feel that they can trust you. They can trust the thing that you’re promising them. And that’s both about expecting reward: the product’s going to be lovely, it’s going to be delivered in great condition. If I sign up to receive emails, then they’re going to be awesome, I’m going to love reading them. So that’s the kind of reward that people expect. That’s one part of the trust.

But then there’s also fear, which kind of goes in the opposite direction. Are they going to be able to deliver what they’re promising here? Is this for real? Is this actually professional? Is this a scam? And I think, you know, both are really relevant in people’s minds before they make a decision. And as a business owner, as a website owner, we need to know that trust is of the essence.

How to use web design to build trust on a product page

The two main ways you can create trust when you’re building a website where you want to sell something or you want people to take action is on the one hand the information you provide and how you provide it.

And that’s very often to do with copy.

But the other big thing you need to look at is web design, and there’s actually been research into the role of web design in the conversion process or generally: What does it matter whether my website is well designed or not?

And, well, it matters a lot. Web design is a major factor influencing whether people trust you or not, whether they think you’re legit or not. And so with this particular page, I think Karakorum are doing awesome stuff. They’ve got wonderful products. There’s great information there.

But the key thing that I would recommend you should invest in is design.

I can speak for my own business, From Scratch. I had a website that I’d built myself for three years and the before and after, once I had a professional website built by a design team — it’s completely different universes, really, the way we’re able to win people’s trust from the get-go. There’s not even a question about whether we’re for real.

And here I think there are a lot of things that tell me there’s a lot of homemade stuff going on here, which is fine, but it’s just getting in the way of conversion rates growing.

Role of the logo

Just to point out a few of them, we could look at the logo. I think it’s a bit too fussy. There’s a bit too much going on here for the logo to really pull its weight. There’s a lot of small detail. It would be good to have a simplified version that’s easier to take in. That’s also partly a taste decision, but it’s also worth testing how people respond to design choices like that.

Wise design choices

Then there’s stuff like the bar here with, I think it’s fabrics. I’m not quite sure what kinds of fabrics and what role they play in the bigger scheme of what Karakorum does. It shouldn’t really be unexplained.

Everything that I see on the page should be there by design. There needs to be a good reason for why it’s there, why it’s not somewhere else, why it looks exactly this way, how that fits into the bigger scheme of things.

Where to place social media links on the website

Even things like your menu. The placement of Facebook and Instagram here is in a really prominent place. Usually, on an e-commerce page, I would expect the cart to be here and not Facebook and Instagram, which also take me away. They almost take me a step back from making a purchase. So really think about what you want people to do on Instagram and Facebook. If it’s just to follow you, then demote that, put it into the footer menu. Add it to the contact page. But don’t add it to the main menu where everything should be about people discovering products and deciding whether or not they want to buy them. That’s all your website needs to do. Everything else is surplus and might add fluff that gets in the way.

Cart placement on ecommerce pages

The cart is in the middle here, which is unusual. It’s also spelled out. It’s not a symbol, which is kind of what we’re used to now, seeing a cart symbol rather than the word “cart”. So I would recommend thinking about placing this on the right hand side here in this upper right corner where most people will expect it and potentially also using the symbol instead of the word.

Form accessibility

There are a few small design things that are about accessibility, such as labelling fields where you’re expected to add or enter some sort of information. So, for example, the Search field, once I start typing here, I no longer see the word “search”. It’s got this tag on it, so when I point at it, it says “search”. But best practise from an accessibility point of view, is having a label outside the entry form, so that even once you’ve entered something, it’s still completely visible what you were meant to enter there.

Nice use of breadcrumbs. When we’re talking about accessibility, breadcrumbs are really important. But let’s stick with more design choices.

The importance of images on ecommerce sites

We’ve got images here that are rather small. There’s plenty of them, but they’re quite small. When I go here with my mouse, immediately I’m zooming in, this is quite difficult to navigate. And I use the web a lot.

So I would test with a representative subsection of the people you want to reach whether they’re able to use this comfortably.

And also when I click through these, there’s a lot of movement as it flicks to the picture I’ve selected. That can be disturbing to some people. There are certain kinds of neurodiversity where people are triggered by this and they feel motion-sick or sometimes even worse. They have to stop using the site. So if you can switch off the animation, that would be great.

Generally, I would also recommend having larger pictures and not using the zoom. Instead just use a bigger picture or a lightbox where I click on the picture and it opens on the big screen and I can inspect it.

Placement of social sharing buttons

Another design choice that I would review is the use of social media sharing buttons here right underneath the title. They’re so high up and in such a prominent place that, again, it suggests to me that this is more important than choosing the product and putting it into my cart.

If you want to have sharing buttons, put them really far down underneath the purchase buttons, so it’s not the first thing that people click and which potentially takes them away from the product page and then they never return to actually check out with the product.

Great use of customer reviews!

Choosing descriptive words in product copy

There’s a bit of stuff to be said about the product information here. But it’s really quite minor.

My tip would be, thinking about adjectives, either use none of them or very few of them. Adjectives are words like

“stunning”
“geometric”
“perfect”
“beautiful”.

Those are all adjectives. And from a writing point of view, a lot of adjectives can make your copy bloated and they can actually suck out the life of what you’ve written.

On product pages like this, I think adjectives have a role, but you need to be quite careful about choosing them in a way that they support what you want to say. So the first step would be: don’t repeat them unless you’re really trying to rank for a specific adjective. Then that’s a different story, of course. But if you’re looking at words like “stunning” or “beautiful”, they’re really value statements or judgements made by the person writing the text or the piece of copy.

They’re not descriptive of the item in that I learn a lot about what the item is actually like. It’s just that I learn that you who wrote the text, you found this beautiful, you found it stunning. That tells me a lot about you and your taste, but it doesn’t really tell me a lot about the product. So I recommend always questioning words like that and thinking, OK, what else can I do? What can I use in order to describe the product with more detail?

What does ‘blue’ actually look like?

And moving down through the page, there’s another design thing. If I choose blue, it would be fantastic if this picture updated to show me this one, for example, the blue. Or a different picture of just a blue candle so I can check what the colour actually looks like. And that’s something that many designers can do quite easily for you.

Trust is most important near the “add to cart” button of a product page

The “add to cart”/ “Buy with Google Pay” section here looks a bit dodgy, if I’m really honest. It looks like there’s some sort of bug going on.

Especially right next to where I’m making the decision to give you my credit card details and where money changes hands, you need to be extra tight. Everything has to look like a million dollars were invested in order to make this a smooth and seamless experience.

And here it just doesn’t really look the part. It looks like I’m not quite sure what’s going to happen when I click there. Is it going to go right? Is it going to go wrong? And if I’ve never come across your page before, it makes me unlikely to spend any money here because it just looks a bit dodgy. I need that trust in order to really feel good about my purchase.

Yeah, moving on through the page, we’ve got a bit of stuff here where I’ve left some comments just about, you know, potentially hiding the SKU, potentially hiding the categories or using the categories and tags in a different way so they add to the customer experience. This kind of stuff often doesn’t add anything to the customer experience. And so there’s a question mark as to whether or not it’s useful to add it here.

Don’t hide important information about the product in horizontal tabs

One of my favourite topics in the whole world is the usability of tabs on product pages. Those of you who’ve seen my masterclass for #EthicalHour, you will know that I talk at length about this topic. Everyone else, I recommend that you check out Baymard Institute. They’ve done a lot of research on the use of tabs in e-commerce scenarios and whether or not people actually know that they can click here to get to additional information.

It’s always surprising how many people don’t see this or don’t understand that they can click this. It’s up to twenty, twenty-five percent in some cases. Of course, you might think, “oh, yes. So the majority gets it.” And of course, yeah, that’s fine. The majority gets it.

But what if you could magically get twenty five percent more conversions just by removing the tabs and presenting it all as one long scrolling piece of text?

That’s a really minor thing to do in order for a huge lift in your conversions to occur. So I always recommend looking at those percentages in terms of how much more you could gain with quite a small investment in terms of energy and work required as opposed to thinking, “oh yes. Seventy-five percent get it. That’s the majority. I’m fine with that.”

No, no, no. It’s really difficult to even get a five percent lift in conversion. Even a two-and-a-half or three percent lift in conversion is huge. You know, that’s three more people for every one hundred coming to your page buying something. Now, imagine if twenty-five percent. So twenty five more people for every one hundred visitors are thinking, “yeah, I want to buy this, I’m going to go through checkout and hand over my credit card details.” That’s massive. So really go and check out — I’m going to put that in the transcript for this video, so you can check out the information that was found out by Baymard Institute. It’s really mind blowing.

There’s a bit of stuff that can be done with the copy here. But really, the copy isn’t the problem. There’s a lot of information. There are some things that could be rephrased, but it’s the presentation of the information rather than the way it’s written. So in this case, before hiring a copywriter, I recommend hiring a web designer. And if anyone’s looking for great, sustainable web designers, we have a few we can recommend. So feel free to contact us.

If you want a small quick fix, remove anything where there’s not a lot of information.

So we’ve got “Description” here, a lot of stuff then “Additional Information” — ooh, what else could there be after such a long description? Not very much. So let’s remove that.

“The Artisans.” That’s a brilliant tab, really. There’s a lot of great information. There’s a short video here where you can see how the candles are being made. I really recommend watching that. But when we go here, “how the candles are made” is in the Description section, and it’s not linked in any way to the video or to the artisans.

That’s another thing that really tells me it might make more sense to throw this way of structuring the information out of the window and just make one long scrolling page. It’s easier for many people.

Again, “Delivery”, not much information there. That could probably be added to “Description” as well.

And then for the reviews, I left a few comments in order to show Natasha how to get more reviews. I think the reviews that are here are fabulous. If you’re interested in how to get more reviews, we have a few blog posts about the topic. So I’m going to add those links to the transcript as well.

Cross-selling at the bottom of the product page

And then we’ve got additional products. Here I just quickly wanted to show that if I add the cotton throw to my cart, there’s no visual feedback that this is now in my cart. The only thing suggesting that is the fact that I can now view my cart. But it’s really subtle. So it might easily be missed.

When I go to the large pillar candle and “select options”, it takes me away from the page, so that’s not ideal. (And you can see how long it takes to load.)

It’s not ideal because it might mean that I never get back to the page that I was looking at first. There was no repeat of the buy button after the description. So if I’ve read all of this, will I go back up? Maybe, maybe not.

So it would be really helpful to have all of this repeated, this section:

design
stock information
the number
add to cart

to have all of this before you introduce new products. Otherwise people are just going to click through from product to product to product without ever deciding for a product that they wanted. If it’s difficult for you to add another button like the one up here, then perhaps there’s a wish list option that you could introduce so people can create a list of things and then return to that later. So there’s a way for them to keep track of things they liked.

Email signup forms and the GDPR

“Enter your email to join our mailing list” — that’s all fine. But you need to add more information here just in terms of GDPR.

There’s a requirement to add information about

how often you’re going to send emails,
what’s roughly going to be in those emails,
how to unsubscribe.
And you need a link to your privacy policy.

I don’t see a privacy policy anywhere here. So it makes sense to look at that in the near future.

Wrapping up

A small bit here, this should say 2021: you need to update that every year.

And in the information section, let’s throw out anything that’s not really helpful here. So the Link In Bio, that’s more for Instagram users, it’s not really required here. People will mostly be interested in shipping and delivery, orders and returns, and contact. The rest can go.

So that’s my audit of this particular web page. Natasha, I hope this has been useful to you.

Bye for now.