Common Design Mistakes eCommerce Sites Make

As a WordPress Maintenance and Support Specialist at FixUpFox, I manage ecommerce websites on a daily basis. There are a few common mistakes that I see when people are starting up new ecommerce sites that I’d like to go over. Fixing these mistakes before your site is launched means that you’ll be presenting a better experience to potential customers, leading to higher conversion!

Not following design standards

We have a quarter-century of ecommerce design to draw upon when building our own sites. There are many standards and guidelines that exist for how to make a usable site that converts. Most of those standards are evident when you look at what a good ecommerce site is doing and note where things just make sense.

As an example, you’re likely to have pictures of your products to the upper left of a product page, with the product details to the right and description below. In that area to the right, you’re most likely going to find an add to cart or buy now button. You’re also going to be able to navigate through thumbnails if multiple images exist (and they probably should), as well as zoom in on images in some way.

The Petshop WooCommerce theme demonstrates a lot of great design standards, including compelling product images, straightforward navigation, and breadcrumbs to let you easily look at related products.

There’s no reason to stray too far from that layout when designing your ecommerce site. Don’t reinvent the wheel! Having some standards means that your visitors will know where things are, and not have to discover some other method of navigation.

Overly complex navigation

Speaking of navigation, there’s a lot to address there when it comes to design mistakes.

There are many ways navigation can affect your site. You want to ensure that the right customer can get to the right page with the fewest clicks, from entry onto your site to checkout.

Here are a few tips for fixing the navigation of your site.

  • Place less used navigation elements in the footer. You should absolutely provide trust to your customers in the form of a privacy policy, return policy, and terms and conditions. But links like those, as well as other useful but not as important for converting links should go in the footer of the site.
  • Make buttons and links large enough to click on mobile. If something is clickable, it should be clickable on mobile. We’ll talk about more mobile mistakes below.
  • Make search and filtering prominent. Customers don’t always know how to find what they’re looking for, and it’s your job to help them. Place a search bar and icon prominently on the page, and allow filtering if enough products exist to allow for it.
  • Make the shopping cart and add to cart buttons easy to find. This should be a given, but I’ve been on sites where I can’t figure out right away how to add a product to my cart, or how to get to my cart after I’ve added it. This is how sales are lost!

Not displaying related products

You may offer discounts on shipping or products if a customer purchases past a certain threshold. You may have products that go together, even if it’s not immediately obvious from the description that they do. You may just want to highlight the fact that two products are commonly purchased together, or that you want to have people buy.

One way to do this is to display related products on your single product page and in your shopping cart. A cross-sell is a product that would be in addition to the product that you are buying. For instance, if you buy a phone, you may also buy a phone case, which would be the up-sell. An up-sell would be a comparable product, but higher value in some way, like a newer model of a phone than the currently viewed product.

If you are using WooCommerce for your storefront, it’s easy to add related products, as well as cross-sells and up-sells on your store. Check out the WooCommerce documentation for instructions on how to do this.

Sign Up For
More Awesome Content!

Subscribe to receive our monthly newsletters with the latest helpful content and offers from SiteGround.

Thanks!

Please check your email to confirm your subscription.

Having a site that is not mobile-friendly

There aren’t many excuses left to not have a mobile-friendly ecommerce site beyond not wanting to make more sales. For some retailers, including Amazon and Walmart, more than half of their ecommerce site views are from mobile-only visitors.

You should look at a few things when making your website mobile-friendly. Ensure that it is responsive, meaning that all of the content stays on the page, but moves around to fit on the screen and not require sideways scrolling. Allow forms to autocomplete so that customers can easily enter shipping and billing data that they already have saved. Make all buttons and links large and make all text easy to read. Wherever you can, reduce the size of images and files to make your storefront faster to load.

The TeePublic mobile site is easy to navigate, while still displaying graphics for products front and center. Search, filtering, your cart, and navigation are all present and easy to access.

When in doubt, look at your site on a phone or two, as well as a tablet if you have one. Try navigating around and making a purchase or searching for products to see how it feels. If you can’t figure out how to get around your own site, your customers won’t be able to either.

While you’re at it, test your site on a variety of browsers as well. Chrome may be the dominant browser now, but it wasn’t always the case and it hopefully won’t always be. Check out your site on Firefox, in Safari and Edge if you can. Thankfully there are fewer cross-browser weirdness issues than in the past, but it still helps to be sure.

This was the fifth installment of our Black Friday series. Eager for more tips on optimizing your ecommerce performance? Stay tuned for more posts just like this one featuring industry experts and some of our technical partners. Learn how to improve your website design, conversions, online marketing, and more.  

author avatar
David Wolfpaw

David Wolfpaw is a web developer, with a focus on WordPress. He builds custom themes, plugins, and site integrations through his company Orange Blossom Media. He is also deeply involved with the WordPress community, as the lead organizer of the WordPress Orlando Meetup, an organizer of WordCamp Orlando, and a valued member of the SiteGround WP_Ambassador program. He has been managing his own business long enough to know that an important part of work is knowing when not to work.

Design

Comments ( 1 )

author avatar

Great article

Dec 08, 2019

It's always a pain when these kinds of things happen. You would think big companies would know better then to make these kinds of mistakes, but it just goes to show that even giants "fake it till you make it", and they aren't "making it" at all.

Reply

Start discussion