JeremySaid's Blog for Startups and Lead Generation

The Biggest Mistakes in E-commerce UX Design That Cost You Money (And How To Fix Them)

Posted by Jeremy Smith on May 13, 2016 10:16:24 AM

Want to know what gets me blissfully upbeat and in a wonderful mood?

An e-commerce website with a flawless user experience.

I’m looking at this, and I’m salivating. Not because of the food, but because of the UX.

graze homepage

I’ve argued before that user experience and conversion optimization are tightly connected.

Don’t take my word for it. Don’t even trust your own intuition. Look at the survey data.

importance-of-b2b-website-design.png(Image source)

Thankfully, we’ve seen a gradual improvement in the user experience and intuitive nature of e-commerce sites. Technology has come a long way, and UXD has been able to keep up.

Remember when Amazon.com looked like this?

amzon first homepage

Among the things that have contributed to the ease of e-commerce store development are the off-the-shelf e-commerce platforms like BigCommerce, Shopify and WordPress extensions like WooCommerce.

While these SaaS platforms may seem easy to get started, there’s a lot to consider when launching.

It’s not as simple as putting up a shopping cart and plugging in products.

Many online retailers make little mistakes every day that can significantly affect the user experience and ultimately limit conversions and reduce revenue.

These mistakes are easily avoidable, and if you’re already committing them they’re easy to fix. Let’s take a look at the most common UX mistakes e-commerce sites are making.

Before diving in, let me toss in a few disclaimers:

  • These are just a few of the many e-commerce UX mistakes that one could commit. This list is the proverbial iceberg tip.
  • UX is exceedingly broad, so this article attempts to follow those broad contours, not homing in on any specific area of UX.

Okay, let’s do this.

My Favorite mistakes in E-commerce UX Design

1. Poorly written or lacking product descriptions

When people visit a brick-and-mortar store they have the ability to see a product from every angle. They can pick it up, look at it, touch it, try it on, sit on it, read the manufacturer’s packaging and compare products side by side.

woman-reading-label-in-grocery-store(Image source)

Shopping online removes that personal product interaction.

It can frustrating for a customer who is interested in or looking for a specific product only to discover that, after clicking into it, there’s no additional information. They don’t know the specifics, the dimension, the size, the features, what it comes with or how it will benefit them.

They’re left to guess or assume based on whatever images are provided, and you never want to force your customer to guess.

They’ll often guess wrong.

Here are some examples of poor product descriptions:

Bad_Product_Description(Image source)

DescriptionCase10(Image source)

CompatibilityBadCase1(Image source)

And this? No clue.

1-no-description2(Image source)

What you should do

Your product description should offer as much information as possible.

It should answer virtually every question the customer may have. Include a detailed written description and state the sizes, materials, weight, dimensions, how it’s used, why it’s used, why they want it, what will happen if they don’t buy it.

Even more, it should focus on the value it brings to the customer.

Don’t just focus on the features of the product. Turn those features into bulleted benefit statements. This helps connect you to the customer on a more personal and emotional level.

You also want to avoid being too technical or professional in your product descriptions. Inject personality appropriate to your brand as well as your audience.

Remember the boot image above — no product description worth writing home about? Here’s an improvement:

Good_Product_Description(Image source)

And what about that weird water thing? Notice this improvement:

3-description-ok(Image source)

Look at this one — clean, intuitive, descriptive and compelling.

ecommerce-13(Image source)

Each product description is an opportunity to entertain as well as educate your customer.

Being a bit of dog-lover myself, I’m pretty fond of this product description below. It has the right amount of levity along with detail and descriptiveness.

how-to-write-product-descriptions-dogandpupstore-malucchi(Image source)

They had me at “maltipoos on mopeds in the Med.”

Totally unrelated, but here’s your maltipoo fix for the day.

dog(Image source)

(You’re welcome.)

Your product description and images are the online equivalent of your customer’s interaction with the product. This is how they touch, taste, feel, sit, squeeze, toss and hold it.

Make the experience as detailed, informative, descriptive and visceral as possible.

Do it right and you make more sales.

Don’t do it and you’re committing a UX mistake that will cost you money.

2. Missing contact information

You might think that because you’re an online retailer that contact information isn’t necessary. After all, you don’t have a local business, so you don’t really need to worry about the NAP indexing and local citations with search engines … right?


Contact information on your website is more important than you think. It’s a huge trust indicator for customers, especially those who have never done business with you before.

Contact information, even if it’s just a local number (or toll-free number) lets them know they’re dealing with a real company and they’re handing their credit card information over to a real company that is responsible.

That might seem like a lot to convey through just a phone number or company location info, but it matters.

When there’s a problem, the customer wants to know they can reach someone quickly if they need help. It’s about the trust, not just the technical aspect of presentation.

And trust is a UX issue.

If you’re hiding your contact information or it’s buried somewhere in the website, users are less likely to trust your site and your business.

If, on the other hand, your address and information is readily available, it enhances trust.

candy warehouse contact page

Keep in mind that trust can be generated through a variety of methods, not simply contact information and phone numbers.

The site below works to improve trust by use of assurances, shipping information, and a satisfaction guarantee.

training mask homepage

What you should do

Contact information is far more important for local brick-and-mortar shops, where people appreciate the community-oriented approach to shopping. If you operate exclusively online, the presence of a phone number may be less important to your target audience, which may be comfortable with a 100 percent digital transactions and familiar with 100 percent remote offices.

If you are a local business, put your phone number in the header of your website so that it’s clearly visible.

glass doctor homepage

In the footer, make sure at least your phone number is visible, and you may wish to add your location, too.

water flow systems homepage

This gets your contact info displayed on every page of your site, so no matter where the customer lands they can see how easy it is to get ahold of you.

footer exmaple

All this information, as well as having an easy-to-find contact form, adds to the level of consumer trust.

imaginovation homepage

Remember that the more local, expensive or technical your product is, the more likely a customer is going to want that contact information readily available.

3. A complicated checkout process or complex forms

Over-complicating your checkout process can be one of the most damaging UX mistakes you can make in e-commerce. This is the stage where a customer has chosen what they want and they’re ready to buy from you.

They are set to hand you their payment information.

Some online retailers make the mistake of creating a lengthy process that goes through multiple pages trying to gather a ton of information before reaching the checkout.

The more steps you put between the item going into the cart and the final checkout page, the more opportunities your customer has to abandon the cart and never come back.

Here’s one example of unnecessary info as part of a checkout/opt-in:

platinum rewards sign-up

And here’s a micro-exploded view of Apple’s old, multi-step checkout process:

figure1_sm(Image source)

What you should do

The best approach to any checkout process is to streamline it.

Keep it to a single page using something like an accordion checkout with sections that expand as each is completed.

multi-column-one-page-checkout(Image source)

If this isn’t possible or can’t be used, then be sure to include a very visible progress indicator that shows the customer where they are in the checkout process.

checkout-progress-bar(Image source)

Likewise, avoid any checkout process that requires your audience to register for an account before they can proceed to buying an item. One of the most common ways around this is to offer your customers a guest checkout option.

house of fraser check out process(Image source)

Their information is still collected in full during checkout, and you can give them the option to save their information for later, which generates an account for them.

This model gives them the choice instead of forcing it, which can lead to higher cart abandonment and lost revenue.

4. Creating a single-product-centric design

What I mean by single-product-centric is your customers find a product, they choose the product and they head to the checkout. At no point during the process are they shown recommendations for other products for upsells, or similar products they might also like.

This is a common UX mistake among startup e-commerce businesses that aren’t familiar with adding extras to the design and checkout process.

That mistake leaves a lot of money on the table.

Another mistake in the same vein is to limit those recommendations to only the checkout page.

At the point of checkout, some customers may want the extra product but don’t want to go back through the shopping experience. They want to just be done with it.

The following sites aren’t doing anything explicitly wrong. They’re simply offering a product, and letting you check out.

No problem, right?

ecommerce product page layout(Image source)

artemis landing page

OTC product page

Actually, there is a problem. By offering, upselling, cross-selling or adding-on items, you could improve the value of each customer.

What you should do

On every product page, you should present suggestions for similar products or products that match up with what is being purchased.

These can be related top sellers, featured products or, like Amazon does, something that shows the user “Customers who purchased this item also purchased …”

In fact, Amazon is the master of this. Cart add-ons are probably one of the reasons why a customer intends to simply get X and Y, but ends up buying A, B, C and the rest of the alphabet.

amazon search options 1 amazon search options 2 amazon search options 3

You were buying some extra batteries, and you end up getting a laser tag set for your kids.

Go Amazon.

Before the customer begins entering their information, show them some suggested items that are related upsells and give them the ability to add the item(s) to the cart with a single click or to expand the product and view it in full.

5. Hiding shipping rates

One of the largest causes for shopping cart abandonment is related to shipping rates.

You should never force a customer to go all the way through the checkout process just to find out how much shipping the order is going to cost them.

This kind of mistake is the UX equivalent of driving a Prius into a reinforced concrete wall.

chart of reasons for cart abandonment

Yet many online retailers make this mistake time and again. I’ve personally walked away from countless online carts because shipping costs weren’t made readily available, even in estimate form, somewhere during the cart process.

Customers want to have an idea of how much a product is going to cost them before they commit to anything, and well before they share any personal information with you.

Here’s an example of shipping cost being hidden until checkout, even with a carrier being selected:

product page with shipping costs

What you should do

Most shipping carriers utilize API integration to tie their calculators into most major e-commerce platforms. This allows you to integrate an “estimate shipping cost” in your cart so a customer can check on the shipping fee as soon as they’ve added products.

All they have to do, in most cases, is enter their ZIP code. The carrier uses that information and the product specs in the cart (dimensions and weight) to calculate and provide an estimate on shipping based on your configuration and their system.

If you use flat-rate shipping based on weight or per product, it’s even easier to display this information to your customers and greatly reduce cart abandonment. Display it prominently on its own page, in the product pages or immediately in the cart as products are added.

Don’t make them wait until the final checkout screen to discover shipping costs.

6. Poorly designed in-site search

Depending on who you talk to, 30-80 percent of e-commerce site visitors use site search as their primary means of navigation to locate products they need or to research a product they’re interested in.

For many e-commerce sites, the site search is the top item in the nav bar, and the most used function on the site.

jcpeney search bar

But for all the use they get, you’d be surprised at how dysfunctional site searches often are.

Regardless of how many people use it and how often, you want your site search to be easy to use.

Some studies have even shown that site search users are twice as likely to convert and make a purchase.

Yet, even major brands make the mistake of over complicating site search with filters while leaving out support for fuzzy or exact product searches. In fact, 34 percent of site search integration doesn’t support user search by product name.

This is a huge error given that someone searching for an exact match on a product name or model number means their intent to purchase is about as high as it can be.

If they know what they’re looking for, but your site search says it can’t be found, then they’ll bounce and look somewhere else.

Here’s an example:

kohls prodcuct pact

What you should do

Make sure product data is optimized on your site for product names as well as make/model numbers. You also want to ensure that your search function is able to search by brand, category, product name, description keywords, model names as well as fuzzy or misspelled search phrases.

It should be able to match misspellings to products in the same way Google search asks you “No results for (your search), did you mean (recommended products)?”

Or try for something a little more interactive, like this:

instatsearch search page(Image source)

You may also wish to withhold filtering options until after the user searches. CandyWarehouse.com, for example, front-loads their site search bar, like this:

candy warehouse landing page

The UX is clean and simple. Then, when the user types in a query, they will see filtering options.

Candy warehouse product page for jelly beans

7. Cluttered Header Images or Hero Graphics

It’s natural to want to design a store that looks attractive in the hopes that it creates a strong, compelling user experience when visitors first land on the homepage. As a result, more and more e-commerce stores are using large hero images that rotate, or sliders on the home page.

This is a huge waste of premium real estate, and even if you’re using sliders to draw attention to promotions and products they post a number of problems.

  • Automated sliders disrupt the thought process and increase cognitive load on the customer.
  • They’re so prevalently used for promotions that customers often tune them out the same way they tune out advertisements.
  • Slider content is rarely relevant because it needs to appeal to wide demographics.
  • They don’t typically display well on mobile devices.
  • They offer no SEO value and can even cause issues with search optimization.

Here are some examples:

eyetracking_slidersignored(Image source)

Here’s further evidence that people don’t click on carousels/sliders …

carousel-click-chart(Image source)

What you should do

Sliders tend to be a byproduct of indecisiveness. When you have a lot of things to promote, but don’t know what you want to promote, everything winds up in a slider with different images or videos being delivered.

That just leads to overload and, in many cases, customers don’t see past the first image so they may miss promotional messaging entirely.

Instead, focus on creating a single, static hero image with the strongest value proposition that is focused on your ideal customer.

To avoid banner blindness, implement a strong and very visible call to action that will grab attention when users land on the page.

8. Tiny photos and small tap targets

Small photos, even with the ability to zoom in or enlarge, can reduce conversions because they force additional clicks as part of the overall checkout process.

Ideally, you want to minimize the number of clicks to get a customer to the final checkout page, yet many online retailers create additional click requirements just to get the basic information a customer wants.

Another problem related to smaller images can present itself when other elements are shrunken, like checkout buttons, breadcrumbs and general navigation.

For mobile users, this is called a tiny tap target. It’s a prime example of a desktop-first design that doesn’t take mobile users into consideration.

For someone on a smartphone, it can be hard to tap on the content if it’s not developed with a responsive design that scales to the screen appropriately.

Here’s an example of product images that could be larger, leaving wasted whitespace:

Hero outdoors product page

Here are some examples of call-to-action buttons that are a little on the small side and may make mobile interaction difficult:

atcbutton1-updated(Image source)

ASOS product page(Image source)

What you should do

According to SmartInsights, more than 50 percent of shoppers are on mobile devices nearly three hours per day, and 80 percent of shoppers search the web using their smartphone (47 percent use tablets).

That means it’s imperative that you design media, images and anything a customer needs to click on to be viewable and easy to interact with regardless of the device they're using. Responsive designs can help, and Google recommends that tap targets and buttons be at least 48px tall/wide.


Some of these mistakes may only impact your conversions by a very small percentage, maybe less.

Others can significantly inhibit conversions and cost you a great deal in revenue. Don’t think that just a .5 or 1 percent conversion loss isn’t a big deal either.

For high margin, high value products and/or sites with significant traffic levels, that 1 percent or less difference in conversion can translate to a lot of lost revenue.

If you’re committing one or more of these mistakes on your e-commerce site then it’s time to talk to a conversion optimization expert who can help you improve your UX.

Topics: Conversion Optimization, e-commerce, ecommerce, site search, user experience

Want to hear more from us? 


Subscribe to the JeremySaid blog for Startups and Lead Generation.


You'll be notified as soon as we have something new for you to read!

Subscribe to Email Updates

Recent Posts

Posts by Topic

see all