A common request I get on Ecommerce optimization projects is to improve performance of their homepage because of the amount of traffic they get on it. Since many E-commerce sites have many different products for various target audiences, their main concern is usually how to appeal to various potential customers on that singular page.

While the homepage may attract a lot more traffic to it than any other page on their site, it isn’t the case when it comes to conversions. A recent study shows that the average conversion rate of shoppers landing on the homepage is less than 2.5% (Monetate), significantly lower than shoppers who land on individual product pages.

In fact, during 2016 we consistently observed more and more shoppers skipping the “front door” (the homepage) and landing directly on product pages. Due to long tail search and dedicated posts or ads on social media for specific products, traffic to product pages has gone up and so has their conversion rate.

A recent study by Conversio found among the 2,687 stores surveyed, that the average product page conversion rate is 7.91%. This research easily proves what we’ve been seeing for our clients: those who land on specific product pages are far more likely to convert. This isn’t to say you shouldn’t optimize your homepage, but rather it’s a wakeup call to put a lot more emphasis on optimizing your product pages and perhaps to spend more time on promoting specific products vs. the entire site.

[easy-tweet tweet=”Your #ecommerce product pages are worth a lot more than your homepage. Here’s how to optimize them:” user=”taliagw”]

The intent of a visitor that lands on a specific product page is usually higher than those on the homepage, and it is our job to do everything we can to help that potential customer complete that purchase by addressing their concerns and providing all the information they need to make their decision.

And that’s what we’re going to do today–discuss all the ways you can optimize your product pages to provide the experience your potential customers are looking for and to increase your conversion rates. Let’s take a look at some of the most important elements that each product page should optimize and then critique some product pages of some of the most well known E-Commerce shops.

[x_line]

10 Rules for High Converting Product Pages

#1 Image Optimization

It is a well known fact that our brains process visuals far faster than text, and it is often said that 2/3 (60%+) of the brain is involved in vision. In fact,  it only takes us 150 milliseconds to process a symbol and 100ms to attach a meaning to it (FIAS).  Since our brains are overloaded with information and messages, some believe as high as 4000-10,000 messages a day(Red Crow Marketing), visuals help us analyze context better. The way things are presented to us have a huge affect on our decision making process. Here are a few ways to optimize your product page visuals:

1. Other than showcasing the actual product, add a visual of someone using or wearing it. These type of images help people envision themselves using or wearing the products and give them a sense of what the final product will look like on them. These type of images also provide more clarity in terms of size.
2. To reduce noise and increase clarity, especially if you have a “noisy”  or complex-looking product, consider adding more whitespace around the image. Whitespace helps the eye focus on the important elements and eliminates any distractions. Another option is to completely remove the borders of the image like done below: 
3. For details, make sure to allow a zoom feature and consider adding an everyday object around your product to better represent its size.

[x_line]

#2 Product Information and Overviews

Back in 2008, Nielsen & Norman group found that most website visitors read only 28% of a site’s content. Contrary to popular belief, I’ve seen from many A/B tests that this isn’t because people don’t read. Most experts like to say people don’t read which is why you should reduce your amount words or “try and say it” with 2 words only. However, I’ve learned that the reason people only read this little is because we, as marketers we don’t give them a reason to.  
Most of the content on websites, product pages included, focus on a product, its features and pricing, technical information meant to “sell” you on the service or product while what shoppers are really looking for is the value or what’s in it for them. In order to do that, you need to change your content from “about the product” to “about the customer”. How will this product make a meaningful impact on their life or work?

[easy-tweet tweet=”Poor or missing content on product pages can affect sales, brand trust levels and retention rates. #ecommerce” user=”taliagw”]

In their latest research, Shotfarm found that poor or missing content on product pages can affect sales, brand trust levels and retention rates. “Detailed product descriptions ranked first in regards to a consumer’s decision to make a purchase, higher than reviews (second place) and price (third place).”

How to optimize your product descriptions:

1. Add personal comments and suggestions for using the product – how can the shopper get better value by using this product? Perhaps wearing it in a certain way, adding an accessory to it? Examples include:
   1. “This dress goes great with black sandals or blue navy high heels”
   2. “Grandmothers love these as a birthday present”
   3. “Also works great with the PlayStation 4”.
2. Consider having the information in drop down menus, tabs or closed “div”s that allow you to write more content. This way you don’t crowd the page and people will only see the information when they click on it. Another option that will allow for easier consumption of the content is having it in bullet points rather than a paragraph of text which can be hard to take in as seen below by Dove:  
3. To make sure you have all the information shoppers require for their purchasing decision, check out your competitor’s product reviews to see  what people are concerned about. Make sure to address those concerns in your product descriptions.

[easy-tweet tweet=”Product descriptions are higher purchasing influencers than reviews and price. Here’s how to optimize them:” user=”taliagw”]

[x_line]

#3 Optimizing size tables

When it comes to purchasing products by size and a certain fit, many shoppers fear ordering the wrong size or in cases of fashion products, what it will look on them. One of the best ways to address this concern is by providing visual aids to your customers. A fantastic example can be seen by Bustedtees which allows you to find a person who has a similar body type to yours and visualize what it will look like on you. 

• Important tip: Don’t forget to always have your size chart open in either a new tab or a pop up on the page.

[x_line]

#4 Personalization via Localization

Most Ecommerce sites have shoppers from around the world. These types of shoppers have not only the challenge of choosing a product, but are later bothered with additional choices they need to make before checking out, such as type of shipping and currency.

Since our brains are overloaded with information, our goal as optimizers is to reduce the amount of choices a shopper needs to make and eliminate as much friction and barriers as possible to help them make their way swiftly to the checkout page. Personalization in the form of localization is a great way to go:

1. Currency converter: Using the $ as your main currency may be good for you, but many shoppers may find it confusing and worrying as they won’t know the final price. A great way to tackle this is by adding a currency converter which allows shoppers to choose their preferable currency, or by adding a plugin on your shop that detects the shopper’s location and offers to switch currencies for them. Both Etsy and Macy’s do a great job with this: 
2. Personalizing shipping: Amazon’s 2-day free shipping success has set the bar high for many ecommerce stores. While the best way to go is free shipping, not all sites can afford to do so. However, there are a few ways to make shipping easier, reduce friction and most importantly, reduce shipping anxiety. There’s nothing worst than clicking that “buy now” button to discover your shipping costs are more than the product itself. One way to go about is by creating a set price for shipping for all customers, while another is adding a shipping calculator by zip code: On the product page itself, allow customers to enter their zip code and immediately see how much shipping will cost them.  
3. Estimated arrival time: Another important and good way to personalize the shopping experience is by letting shoppers know the estimated time of arrival right within the product page. This is a great way to address any concerns the shopper may have about delivery. Zappos uses the emotional power of urgency on their product pages to encourage you to checkout in a certain amount of time to receive your product in time:

[x_line]

#5 Optimizing Usability

There are many different tweaks and changes you can make to your product page that will improve usability, increase clarity and optimize the overall shopping experience. For example:

1. For quick checkout, show an “added to cart” notification. This will give shoppers the opportunity to immediately check out and provide additional clarity as to what happened to the item they just chose. An example by Sephora can be seen below, a quick notification to let you know your item has been saved to your basket and a clear CTA inviting you to checkout immediately. 
2. Another way to remind shoppers they have items in their shopping bag is by adding a cart summary to the product page itself. For example, when you log into Amazon, you’ll see a summary of the items waiting in your basket with a simple “proceed to checkout” button above. 
3. A great way to improve customer experience and use more advanced personalization techniques is by allowing shoppers to customize the product they’re buying. For example, AliveShoes invites shoppers to add their name on the product they’re buying: Or to personalize the box the shoes come in: 
4. An important rule to keep your potential shoppers engaged and focused is to remove external links or banners on your product pages. While they may be helpful on other pages (on your homepage for example), our goal on our product and checkout pages is to keep it distraction free. Remove any eye catching links or banners that lead out of the page and ensure any product suggestions on the page appear either below the fold or in a way that doesn’t distract the shopper. We’ll take a look at a bad example of this by Macy’s when we analyze different product pages below.
5. It is quite common to have a progress bar for your checkout process, however, another great way to improve usability and clarity is by adding a progress bar or breadcrumbs to help people go back and forth and recognize where they are in the process. As an example, take a look at Holstee which uses breadcrumbs to show the path you’ve been through: homepage → category → product: 

[x_line]

#6 Optimizing Call to Action Buttons

The call to action buttons on product pages have a large influence on the product’s success. This isn’t a matter of what color the button is but  it’s location on the page and copy.

It’s important  that the call to action button stands out, is in a prominent area and is the main focus of the page. You can make it the main focal point of the page and the first natural place the eye looks at by using lots of whitespace and using a color that stands out. The color of your CTA button should be the same throughout the entire site, making it easy for your visitor to immediately recognize the call to action button on every single page.

Words matter as well. While most online shops settle for a “buy now” or “add to cart” button, there are many other ways to trigger people into action.

4 Rules for Call to Action Buttons that Convert

1. Have one goal → ask for one thing only (e.g – “add to cart” and not “add to cart and checkout”)
2. Make them attention grabbing→ use color, size, whitespace and placement on the page.
3. Make them actionable → driving people to take action.
4. State the bottom line → Let people know exactly what will happen when they click (or tap on) that button.  

[easy-tweet tweet=”3 tested formulas for writing call to action buttons that convert. ” user=”taliagw”]

Three Tested Formulas for Writing Call to Action Buttons:

#1 What + Why:

I’d like to what because I want to why:

I want to… “DONATE NOW TO SAVE A HUNGRY CHILD”

I want to… “BUY NOW AND SAVE 20%”

—–

#2 “I Want To”:

This is said by the customer about himself or herself:

“I want to… GET THIS DEAL”

“I want to… ADD THIS TO MY CART”

—–

#3 I Want You To:

This is said by the customer to the store. For example:

I want you to “SHOW ME THE LATEST DEALS”

I want you to… “TAKE ME TO CHECKOUT”

[x_line]

#7 Optimizing Trust

Simply put, in order to get people to spend money on your site they must feel safe and secure in doing so. There are many ways to increase trust on your product pages and put shoppers at ease:

1. Optimizing Reviews – 88% of consumers say that they trust online reviews as much as personal recommendations (BrightLocal). Make sure to add a review section on each product page, if you don’t have one already, and to ask past customers to write reviews of your products. Don’t be afraid to feature reviews that also contain complaints as not all products can be perfect, and featuring reviews with minor complaints can increase trust even more. Here’s an example of a review including a concern, displaying it allows the store to put the customer at ease and perhaps address a concern many other shoppers have but do not feel comfortable asking: 
2. Trust Seals – Another very well known strategy is using trust seals and icons of well known brands on your product page. This can come in the form of payment solutions you support, any patents you have on a product or awards you’ve won.
3. Chat – how helpful are you? Make sure to offer help your to your shoppers when they need it. Consider adding a chat plugin to your site or supplying an easy for people to contact you while shopping.

[x_line]

#8 Save For Later

While we want our customers to convert immediately, some just aren’t ready to do so on the first go (this also tends to happen when shoppers start their journey on their mobile device but prefer to purchase on a desktop or tablet). A great way to ensure they return later is by allowing them to save and purchase their items later. This will require them to subscribe so you can remember the products they save and allow you to send them personalized email reminders and other types of emails to remind them to come back.  

As you can see from Custora’s research, email marketing continues to be the largest channel for driving most e-commerce purchases.

[x_line]

#9 Optimizing Mobile

A recent study by NetElixir found that in 2016 purchases on mobile devices surpassed 30%. Though mobile activity in the 2016 holiday season caused conversions and impressions to increase fairly dramatically, people typically spend less on their mobile devices than on desktops. This happens because most websites today adopt the “out of the box” responsive design theme to address their mobile visitors. This means they design the desktop site first and then minimize all the content to fit in a mobile screen. While this is much better than the “pinch and zoom” approach, mobile visitors may arrive on Ecommerce sites and feel overwhelmed by the amount of content they see on it, have a hard time finding what they’re looking for, and leave the site. Most websites currently see over 50% of mobile traffic on their sites and in order to not miss out on all those visitors, you must start optimizing for a mobile experience. Here’s how:

1. Start by analyzing mobile data. Within Google Analytics, segment your traffic to mobile only and identify who your mobile visitors are, what pages they look at, what search terms they use, what their conversion rates are, their favorite products and any other information you can collect to better understand what mobile visitors are looking for. Remember that the state of mind of a mobile shopper is very different to a desktop one as most mobile visitors are on the go or multitasking.
2. Then, start prioritizing the information you need to highlight on the site for mobile visitors. Test different changes on your mobile version to see what optimizes their experience and provides them with the information they need. This may be a larger search bar, a “contact us” form, highlighted phone number people can call immediately or a highlighted address.

Once you identify what your mobile visitors need, it’s easier to supply a customer a journey that answers those needs. 

[x_line]

#10 Using Persuasive Techniques

As mentioned, we’re overloaded with information on a daily basis which makes it very difficult for us to make decisions. The way things are presented to us has a huge affect on our decision making process which is why using different persuasive techniques can affect our customers’ purchasing decisions and increase our conversion rates. (Pssst, more on how shoppers make purchasing decisions in this article)

Two very well known techniques we’ve used many times on product pages are scarcity and urgency. An example for using these techniques would be to add time sensitive deals to a certain product. For example, “Sale ends tonight at midnight” or “Only 3 items left”. BustedTees, Bohoo and many other stores use a countdown timer to highlight their sales and increase urgency:

 

Ultimatelythere are many unconscious psychological triggers that affect our decision making process. Though we love to think of ourselves as rational people who make wise decisions, most of the time our brains are affected by how things are presented to them and we later use logical explanations to rationalize our decisions. If you’d like to learn more about cognitive biases and how to use or avoid them, get your free cheat here.

[x_line]

10 Product Page Examples Critiqued

Two weeks ago I asked you guys to send me your favorite (and least favorite) product pages via Twitter, and as usual you did not disappoint with your great examples.  Let’s take a look at some of the product pages you sent me to critique:

#1 Clarks

This product page is overwhelming, it has too much text, loads of icons, images and a lack of navigational cues which all make this page hard to take in and extremely hard to know what to do next.  It’s incredibly important to guide our customer in a clean and clear way, so the next step is obvious. However, Clarks misses out on this in a big way, let’s discuss why:

1. Product images –
   • While Clarks shows photos of the shoe from every angle, there aren’t any images of people actually wearing the shoes. One of the core things we mentioned starting out is that shoppers like to see other people wearing or using the products so they can get a better understanding of how it will look and envision themselves using the product.
   • In addition to this, clicking on the image itself does nothing (I expected it to open their image zoomed in) and the zoom feature doesn’t work at all.
   • The most surprising element and biggest mistake, is that clicking on that blue icon (“MAX”) on the top right corner, which I’m sure many people do as it’s one of the only colors that stands out in the entire page, redirects you to a different page with a video about “MAX”. They’ve gone ahead and sent a high intent customer out of the product page to watch an irrelevant video.
   • Other issues include – no whitespace, the images feel claustrophobic and they have a very heavy frame around the image section which makes it feel outdated.  
2. Product overview – Unfortunately Clarks has chosen to feature their entire product overview on the top right-hand corner of the page which completely overcrowds the page. The overview text is incredibly small and hard to read and they’re missing out on an opportunity to personalize the content with some suggestions or ideas for making the shoe work with the customer’s wardrobe or daily activities.
3. Call to action button –  
   • Since they use the same colors throughout the whole product page the call to action button is practically invisible.
   • The CTA itself doesn’t look like a button and has a lot of unnecessary text on it so other than adding it to your shopping cart, you’re also told you can have get home delivery or pick it up from the store. Talk about TMI!  
   • The product page contains many more calls to action, such as “Notify me when in stock” , “save for later” and “email a friend”. These icons stand out more than the CTA itself.
4. No reviews –  Not much to add here. The product page has no reviews, which could reduce trust. Though Clarks is a very well known brand, no reviews might indicate to others that this product has never been bought.
5. Site navigation – every time your mouse unintentionally moves past the top nav bar, an entire colorful menu opens with sales banners and suggestions for additional products. It’s extremely distracting:                                                                                
6. Color optimization –  Colors aren’t just something we use to make a page look nice, we use them as directional cues. Colors help us understand what elements we should focus on throughout the page, what matters, what doesn’t and also have an emotional affect on us (more on the emotional power of color here). Clarks’ product page uses the same color tone throughout the entire page and makes it impossible on the eye to take anything in. The only two elements that stand out are the “Max” logo and the call to choose a size.

[x_line]

#2 Gigleaves

There’s lots to learn from this product page. The difference between this one and Clarks’ is pretty easy to see- you can actually take the different elements in, comprehend what’s going on the page and digest the next step quickly. Here’s a few things to note:

1. CTA – The call to action is one of the first things you noticed on the page, it stands out and had one goal – “Add to Bag”. One thing I would consider is perhaps personalizing it by changing it to “Add to my bag”.
2. Size Chart – This is an interesting situation. On one hand the sizes available for this product are small, medium and large, on the other hand when you click on the size chart to understand what those sizes mean, there’s no reference to those sizes at all. 
3. Product Overview – Descriptions and all content are placed in a tabs which is a great way to provide important information for shoppers without overcrowding the page. The content also seems more personal and far less technical as they talk about the slippers being “super cute” and “impressive”.
4. Product Image – Figleaves does a great job with providing large images, with a lot of whitespace and no frame. These all work hand-in-hand to provide a clean and clear experience for shoppers. Unfortunately, they too miss out on the opportunity to feature people wearing the slippers. Their zoom feature offers a quick way to review the product and even get a sense of the material.
5. Delivery options – Great way to feature all shipping options, however this is yet another thing a customer is required to choose. Our goal is to reduce the amount of decision they need to make so I would consider either reducing the amount of options, setting one price for shipping or if possible offering free shipping. Since the shipping info is below the fold and the product page is quite clean and easy to take in, I would definitely consider adding a shipping calculator below the call to action button so people won’t worry about any surprising costs and figure it out quickly.
6. Pricing – Another small and great element they use is crossing out the old price and highlighting the new reduced price in a different color.

[x_line]

#3 British Corner Shop

Let’s take a look at an online store that delivers British food worldwide. I found very interesting elements here:

1. Product Overview – One thing you’ll notice about this product page is there is no visible product overview. However, a simple click on “product information” link will scroll you all the way down to a detailed overview with all the information you need. Since this is an online grocery store, I like this idea a lot. Most people buy the same type of bread, milk or toilet paper every time and there’s no need to overcrowd the page with irrelevant information. However, one thing I would add to this detailed information section is an “Add to basket” call to action, allowing people to add the item without need to scroll all the way back to the top. 
2. Dispatch and date information – When food shopping, you want to know when an item can be shipped to you as well as  its shelf life. BCS (an abbreviation I’ve applied to their name) does a great job at highlighting these elements and also promises to deliver long lasting products according to your time of order.  
3. Trust and clarity – In a simple, clear way BCS emphasizes their how trustworthy they are by displaying the TrustPilot plugin. 
   
4. Calls to action– On one hand the call to action button does stand out and is easy to recognize, but on the other hand there are 3 large call to action buttons on the page competing for your attention in size and color: Feedback, Chat and Add to Basket. A good way to fix this would be reducing the size of the other calls to action and perhaps changing their color to something less attention grabbing.
5. Other elements worth mentioning:
   • The use of breadcrumbs, allowing you to go back to bakery goods if this type of bread isn’t what you’re looking for.
   • The personalization of using your local country flag
   • And the option to save items you frequently purchase by tapping the heart icon.

[x_line]

#4 JDSports

JD, one of the most popular sports retailers, offers great insights and opportunity to learn from. For this example, I’ve decided to review it on mobile:

1. Size guide – One of the most overwhelming surprises was their size guide. It actually requires multiple choice and navigation which is a huge barrier for shoppers. As seen below, once the customer clicks on the size guide link, there is an entire process of choosing gender, category and brand before the customer finds the relevant size chart. This is way too complicated for a shopper and appears to happen on both their desktop and mobile version. As we’ve seen in other cases, it’s pretty simple to identify the product the customer is looking at and offer the relevant chart. 
2. Product Image – An interesting combination of regular images and 3D, showing you the shoe from every angles. On mobile this work very well as it saves the customer from tapping on different images. On the other hand, the images themselves automatically rotate which can cause confusion and create too much noise on the page and distracts the customer from what we really want them to do – add to their cart. JD also offers a video of the product which works very well on mobile. 
3. Download the app – Many online retailers create an app and promote it on every page. However it’s a well known fact that most apps lose 90% of their downloads within 30 days, due to the fact that many people who download the app do not find it relevant and remove it within the first 24 hours. In order to get the highest quality shoppers downloading your app, consider when you’re asking people to download it.  For example, this is my first time on the site and most first time shoppers aren’t ready to download an app. Consider showing the call to action to: 
   1. 1. Returning visitors only
      2. A visitor who has spent a longer time on your site
      3. A visitor how’s viewed more pages than the average visitor
      4. Or visitors who’ve scrolled past the average scroll rate (you can find all this data in Google Analytics).

   People who spend more time on your site are more likely to download the app and are less likely to remove it. 

4. Persuasion techniques – One of the first things you see on the page is a notification on the product image about how many people are viewing this product in real time. While I’m never too sure if I should believe these numbers, I’ve seen it work wonders for many sites as an urgency influencer (warning shoppers they may run out of this item) and as social proof (“many people like this item and I should get it”). 
5. Shipping – JD does a great job with localization, personalization and reducing any uncertainties about shipping price and expected time of delivery. The one thing I would consider is helping the shopper one step further and calculating the final price for them. 

[x_line]

#5 Harry’s

This is probably one of my favorite product product pages yet as there are many small details they have taken into consideration which make the experience much more easy, fun and memorable:

1. Trust -One of the first things you’ll notice on their product page is the trust seal “Quality Guaranteed”. A quick click on it will show a small notification regarding the option to return the products within 30 days for a full refund. This is a brilliant way to reduce concerns for new shoppers and also highlight the quality of your customer service. The icon of a trust seal is something that works very well even without clicking on it, it increases trust and the credibility of your business.  
2. Simple Customization – Harry’s allows you to choose the colors of your handles and choose the specific add-on you want for your product. What’s nice about these minor features is that while clicking on your preferred color or add-on, the image on the left changes to feature your choice. The entire experience is smooth and simple to use.
3. Chat – If you have any questions, Harry’s team is ready to assist you. They provide both an immediate real time chat option and emailing them. I would reconsider the emailing feature as your goal is to capture the customer when their intent is high and help them complete their purchase immediately. Offering to contact you via email gives them the option to leave the site for now and perhaps never return again. 
4. Product overview – Similar to the Apple look and feel, Harry’s addresses the most important features of their products and rather than having a bunch of text in one single place, they show the most important elements of their product and describe them using a powerful image and a short description. Note that the images of the products are not the static images we saw above the fold but images of the products being used: 
5. Providing clarity – At the bottom of the page you’ll find a summary of what the package includes, additional details and a quick explanation about shipping. This is a great way to provide clear instructions and reduce any concerns customer may have. One thing I would check, however, is its placing within the page. Is it placed somewhere people reach? Perhaps they should add a direct link to it higher on the page.
6. Add to cart notification-  Once you add a product to your cart, Harry’s  immediately updates you on its status via a small notification on the top right-hand corner. This gives the shopper a quick way to edit their cart, see their grand total and checkout.  

[x_line]

#5 Pure Cycles

Selling a bicycle online is a greater challenge than selling everyday commodities such as clothes, cosmetics or accessories. While most products can be purchased quite easily online, bicycles require a great deal of customization, know-how, details and additional information. Pure Cycles are a great example for online retailers who have a very specific target audience in mind or complicated product and need to provide a lot more information:

1. Added to cart notification – Pure Cycles uses a “added to cart” notification too, however it isn’t as noticeable as the one at Harry’s. Since they’re using the same colors (blue and white) as the call to action button, the notification barely stand out and the “view cart” call to action gets drowned and is almost unnoticeable. 
2. Exit pop up – A great way to remind people they have items in their cart before they leave is using an exit pop up. You’ll notice they too are using urgency to let you know the deal runs out in 58 minutes. However, 58 minutes seems like an exceptionally long time in this case. The urgency factor goes to waste here as they’re giving shoppers an entire hour to consider if they want the item. This wouldn’t be that bad if it wasn’t for the “uninteresting” incentive they offer. When selling high priced items ($425 for this item) mentioning the percentage of a discount would work far better than mentioning the actual figure ($10, in this case).  
3. Product information – Pure Cycles places the most important and digestible information, such as features, shipping and warranties, above the fold offering extensive content below about how the bikes can get delivered and additional information about the bikes. However, there is no direct link to the content itself or the sizing chart which means people may have to search for that content (we shouldn’t trust our shoppers to do that for themselves – they need links and cues directing them there). I’d definitely consider adding a small link next to each section that takes people to the full details. One thing I really like is that the description itself is whimsical and offers additional technical info in a click.  
4. Images – A great example of using image of people using the product. These type of images help shoppers envision themselves riding the bike, get an idea of its size and how they could use it. One thing to mention though is that these images aren’t part of the main product images, they can only be found by scrolling to the bottom of the page. 
5. Shipping methods and information– Selling bikes online isn’t as straightforward as selling shoes. Shipping and/or assembling your bike is more complicated than getting those shoes delivered to your front door.  This is a concern most shoppers probably have, and to tackle this, Pure Cycles has designed an entire section with detailed shipping information. This section is built like a pricing page and gives you all the details you need about the various ways you can get the bike delivered.  For this section I have two main comments:
   • Since this is probably a major concern for most shoppers, I’d add a direct link to this section around the main call to action or mention that there are various shipping options people can choose from at a later stage.
   • I’d remove the “Learn More” calls to action as they redirect you from the page.

[x_line]

#6 AO

There’s a huge competition when it comes to selling home appliances and electronics online. There are thousands of retailers selling similar products with better prices, deals and perhaps even better products which means your product pages must stand out in terms of content, customer service and user experience.

1. Trust, experience and social proof – AO uses various ways to stand out and provide a trustworthy experience. All below techniques are used to increase trust, likability and provide a more secure experience to shoppers:
   • You’ll notice their price match promise both on the header of the page and when you double tap the name of the product: “We match all retailers, even in the sales” ensuring shoppers they will get the best price on their site.
   • Shipping is not only free, you also choose the date you want the product delivered to your door, great way to personalize an experience and a big reason people would choose to purchase their appliance on this site rather than another.
   • Great job on highlighting that AO has been rated 9.5/10 on Trustpilot by over 74,000 customer reviews and that the product itself has been rated 4.5 out of 5 and reviewed 43 times. 
2. Call to action – While the desktop version of this product page provides a clear call to action (Add to Basket) on mobile, its responsive adaptation could be completely overlooked. The call to action button color is the same as the navigation bar and actually looks more like the site’s footer rather than a call to action button. This is also due to its shape and the fact they’ve chosen to have it across the entire page. Additionally the A+++ seal looks more like the call to action than the actual one.   Mobile version:Desktop Version:  
3. Additional information – AO have chosen a very interesting way to display additional content and information on their mobile site. Rather than having all information in tabs that open below or send you to another section on the page as they have on desktop, they slide the information in for easy navigation and show a clear way to close it.  Step 1: Step 2: 
4. Site navigation and reminders – Another great thing AO does which many retailers do not, is to add a call to action button that scrolls with you throughout the page. Since this washing machine has a lot of features and information, AO has made sure the call to action button scrolls with you as you read, offering a quick way to purchase the item. If you’re considering this option remember that the scrolling effect/feature isn’t a must, simply adding additional calls to action throughout the page can have the same effect.
5. Customer reviews: While AO presents their customer reviews in a clear and  great way, all reviews are extremely positive and a little good to be true. As mentioned before, while most retailers want “squeaky clean” reviews, those can seem “rigged”. Allowing some moderated “negative” reviews increases  authenticity.  

[x_line]

#7 Under Armour

1. Product reviews – People want to see reviews, recommendations and get opinions from people similar to them. Under Armour does a great job helping potential customers read the reviews relevant to them by displaying the names of the reviewers, the type of athlete they are, their gender, age and their height. In addition to helping shoppers find customers similar to them, they save a lot of the customer’s time and energy by allowing them to filter through recommendations according to what matters to them (e.g – photos, pricing, ratings and more). 
2. Sizing chart – One thing to note about their sizing chart is that it is only available if you scroll and there is no mention of it beforehand. However, the size chart is displayed in a very simple chart that’s easy to take in and has been personalized according to the specific product. They also offer a section called “Product DNA” which summarizes the most important feature of the shoe while offering to review other products from the same line. 
3. Added to cart notification –  Rather than having the notification as a short time pop-up, once you add an item to your shopping bag you get a large pop-up covering the screen notifying you that the items was successfully added to your bag. You are offered to either continue shopping or checkout, and get recommendations for complementary products. Another thing to note is their red notification (which looks like an error message) offering free standard shipping and a free return policy. These are two great ways remove any concerns and increase conversion rates. However, since this message stands out, it would work far better next to the “checkout” button rather than the “continue shopping” button. 
   
4. Persuasion technique – UnderArmour uses the same urgency technique as JDSports-letting you know how many other people are viewing the product right now. One main difference is that the notification scrolls with you throughout the entire page as opposed to  just appearing for a short time over the main image. 

[x_line]

#8 Macy’s

Talk about cognitive overload and being blasted with too much unreadable information! This product page does everything in its power to convince you NOT to buy:

1. Call to Action Button – Starting with the obvious… the call to action is cut. I’ve gone ahead and marked the average “fold” for you in a blue dotted line so you can see what I mean. This is what I see on the page before scrolling: no call to action around to be clicked on.
2. Product images –  Continuing the sense of overwhelment, both product images are crowded, lack whitespace and feel claustrophobic. In addition the main image is practically on top of the text on the right which contributes to the clutters and messy look and feel.
3. “People also viewed” section – Other than the fact that this section is completely irrelevant in any way (showing clothing on sale while I’m looking at kitchen appliances?!), and isn’t personalized in any way, it is also located in a dominating area which attracts a lot of attention. This means, less attention on the product they’re viewing, less attention to the (invisible) call to action and less conversions as a result.
4. Product information – Their product info seems to be listed as a shopping list and provides no additional personalization, detailed information or recommendations.

All in all, not a good experience.

[x_line]

#9 Pop Chart Lab

I decided to showcase Pop Chart Lab for one main reason: their product images. A classic example of completely missing out on assisting customers in understanding the product better.

Offering just one main image of the infographic they’re selling makes it very hard on a customer to understand the sizing of the poster. While they do mention the size is 24″ x 36″ for many, that doesn’t mean much or help with understanding how much room it’s going to take up on their wall. This is a perfect opportunity to show other items around it or show what it looks like on the wall so people can grasp its size.

In addition, they offer many different unclear framing options which can confuse customers even more about what the end product looks like. These types of products have to show the customer what the product looks like framed, unframed or mounted on a panel.

As mentioned, another option I’d consider is showing what the poster would like on a wall in a living room, allowing people to envision that item in their own home. This is a technique which helped us, along with other elements, to increase conversions for a retail customer by 550%.

[x_line]

#10 Little Sparrow Tea

I found this last example while I was actually searching for a certain type of tea (yet to be found) and felt compelled to discuss a few issues on it:

1. Call to action buttons – There are approximately 4-5 main calls to action on this page and an additional 10 minor ones scattered all over the page (in addition to the nav bar) creating many distractions. As we mentioned, the call to action button should be the main focal point of the page and shoppers should be able to immediately detect it and recognize it as their next step.  
2. Colors – In addition to the many calls to action on the page, there is also a lot going on the page in terms of colors. Since the “ADD TO CART” button is in the same blue as the logo and tea bags, there are many other colors that stand out far more than the blue (the yellow newsletter for example).
3. Missing information: No mention of shipping (its pricing or how long it will take), no help with “sizing” or weight to help shoppers determine how much to buy and no recommendations for additional products that may interest us ( like a teapot for example).
   

   Over to you

   While there are lots of other product pages we can review and many elements we can critique, there simply is no replacement to doing your own research. Although many things mentioned here, as good or bad features, can be relevant for that specific store, this doesn’t mean it would be right (or wrong) for you. Before optimizing your product pages, take the time to analyze your customers’ behavior on it (using heatmaps, for example), speak to customers, find out what frustrates them, and take a look at all your reviews. This will teach you exactly what content people search for. All you need to do now, is supply it.

Facebook Comments

comments

Powered by Facebook Comments