10 Common Ecommerce Website Design Mistakes and How to Fix Them

Fix these mistakes to create a better shopping experience for your customers.

Photo by Shopify Partners from Burst

A good ecommerce design plays a key role in a successful online marketing strategy. That’s because beautiful design and visual characteristics can increase the perceived value of your brand and products.

However, creating an attractive ecommerce website isn’t as easy as clicking the “launch” button. You may make mistakes when designing your website without knowing that. To build a website for optimal results, you need to understand the do’s and don’ts so you can avoid those mistakes.

We’ve put together 5 common ecommerce design mistakes new merchants often make, plus best practices you should follow and bad habits you should avoid. This will ensure your ecommerce website is always on point.

1. Product photos mistakes

Using low-quality images or too generic stock photos for products leaves a bad impression of your website in customers’ minds. Customers may not trust your site and immediately switch to your competitor.

Why? Because your customers can’t touch, taste, or try products on your ecommerce website as they do when they shop at a physical store. So they’ll rely heavily on images and graphics to envision your product and decide if that item is right for them.

Do’s:

  • Create product photography to ensure your product photos are high-quality and authentic. When doing that, take photos on a white background because that helps reduce distractions and make your products the center of attention. Also, because the white background reflects white light onto your product, you’ll have a well-lit product photo that needs few or no brightness and contrast adjustments.
  • Pick stock photos that are relevant, realistic, and natural, meaning those photos depict a real scenario. By doing that, you help customers easily envision how they can use your products in real-life.
  • Reduce image sizes to increase the loading time because the more time it takes for a page to load, the quicker shoppers leave your site. You can use Shopify’s free online image resizer to optimize images. Try to keep your image file size below 70 kb.

Don’ts:

  • Use busy backgrounds or add objects to product photos because they can’t distract customers from your products.
  • Rely too much on stock photos because the chance is that your photos are similar to your competitors’. Suppose your competitors’ websites have created a negative experience for visitors. That can reduce visitors’ trust in your site and add friction to the process.

2. Careless product description

A common mistake when designing product descriptions is using several fonts and putting too much text, which gives shoppers a headache because it makes your content hard to read.

Product descriptions are where shoppers learn about your products. That’s why you should make it as easy as possible for shoppers to understand what your products are about and how they’re beneficial.

Do’s:

  • Make product descriptions scannable and readable using a consistent font, short sentences, short paragraphs, bullet points, headings, and white space.
  • Use GIFs or videos to display your products in action so customers can quickly understand how your product works and its benefits.
  • Make key points bold to emphasize the essentials and draw readers’ attention.

Don’ts:

  • Fill the page with long paragraphs because that makes it hard for readers to find the information they want to know.
  • Add too many links to other sites. You should add links to product descriptions so customers can look for similar items. But don’t overdose them because, after all, you want shoppers to add the product they’re seeing to their cart. If you distract their attention and lure them to another page, they may lose interest in buying.

3. Excessive use of pop-ups

Pop-ups can be useful to generate new leads, promote offers to customers, and increase conversion rates. That makes it tempting for new merchants to display many pop-ups on their sites. But excessive use of pop-ups can backfire.

Poorly-designed pop-ups and mistiming ones annoy customers. Imagine a shopper is reading your product description, then all of a sudden, a pop-up demands their attention. Things are made even worse when that pop-up isn’t at all relevant to what the shopper is reading (an opt-in form asking for their email address, for example).

Do’s:

  • Match your pop-up design with the rest of your website in style, colors, and fonts. Be sure to fit everything in perfectly. That way, when your pop-up appears, it’ll feel like part of the experience, not an outside force inserting itself into your site.
  • Set proper times to display pop-ups. For example, show an entry pop-up as soon as a visitor arrives at your online store, a scroll-based pop-up after the visitor has scrolled down a certain percentage of the page. You may also want to use an exit-intent pop-up to stop the visitor from leaving your website.
  • Use contrasting colors for buttons to make the buttons engaging and pleasing to the eye.

Don’ts:

  • Show pop-up too early or randomly. As explained above, misplaced pop-ups can interrupt customers’ attention and want to leave your site.
  • Include too many fields in a pop-up. Asking too much information can make your pop-up design look cluttered. Customers may also want to leave your site without signing up, which may decrease your conversion rate by 50%. Most of the time, an email address is all you need to get value from a visitor.

4. Complex navigation and poor search

Complex navigation can happen when you sell many products and don’t know how to categorize them properly. The shopping experience may be worse if, in that case, you don’t show a search bar on your site. If a customer can’t quickly find a way to search your site for the product they want, they’re more likely to go somewhere else for it.

Do’s:

  • Be clear and direct when labeling the top-level navigation so customers can know exactly what they’re getting each time they click a label. Use drop-down menus if you have different categories and sub-categories.
  • Show navigation options in the footer of your site. Take advantage of the footer to help customers easily navigate to pages like “about,” “return and refund,” and “shipping policy.”
  • Make your search bar prominent and easy to find. It’s best to show it near the top of your website so customers can quickly find a particular item or category.

Don’ts:

  • Use generic labels like “products” or “services” because these labels do nothing to communicate with customers.
  • Show too many labels in your navigation bar. With few menu labels, your customers’ eyes are less likely to scan past important items.

5. Poor mobile optimization

If your website isn’t responsive or mobile-friendly, it can crash or show errors when being visited on mobile devices. That can make visitors frustrated.

With mobile commerce sales projected to reach $3.56 trillion in 2021, it’s time to optimize your website for mobile.

Do’s:

  • Choose a responsive theme to ensure your site is mobile-friendly. If you don’t have a responsive design, visitors won’t be able to properly view or interact with your site, which will cause them to abandon your store in favor of another.
  • Ensure your navigation bar and drop-down menus are touch-friendly. This helps create a seamless experience for mobile visitors when browsing through your site.
  • Test your site on mobile devices for functionality. Your website may look good when viewing on a desktop, but it may look different on mobile. Do multiple tests before launching your site.

Don’ts:

  • Use small fonts because they’re hard to read on a desktop and even more difficult to read on a mobile screen.
  • Ask customers to switch to desktops while they’re viewing your site on their smartphones. That negatively affects their shopping experience on your site, and they may leave you right away.

Over to you

It’s time to go back to your website and check if you make these ecommerce design mistakes. Then, follow the do’s and don’ts above to improve your site’s appearance.

Freelance Content Marketing Writer. I write about marketing and personal development. Work with me: www.lavenderwrites.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store