eCommerce Web Design: A 36-Point Checklist to Create The Best eCommerce Site

eCommerce Web Design: A 36-Point Checklist to Create The Best eCommerce Site

According to Ecommerce Guide, nearly all retail growth in the US at present is driven by eCommerce — a trend which looks set to continue into the foreseeable future.

Dominant eCommerce brands like Amazon and Walmart understood the importance of utilizing the best eCommerce website design practice to enable a good customer experience.

And in order for your brand to deliver the same customer experience through your eCommerce platform, you need to make sure your site meets certain requirements.

So to help you prepare your eCommerce website, we’ve compiled a comprehensive checklist (with 36 items) that have been categorized into the following categories:

Site-wide eCommerce web design checklist

Before we delve into the essential requirements for inner-sections of an eCommerce website, let’s look into the fundamentals of an eCommerce site as a whole.

 

[#1] Ensure your website is responsive

This is crucial when it comes to designing your eCommerce site. With more devices being able to connect to the internet than ever before, you don’t want to have an eCommerce site that doesn’t work on a smartphone or tablet. Figures show that 62 percent of smartphone users made a purchase via their smartphone.

Plus, you’ll have no hope of succeeding with an omnichannel eCommerce marketing strategy if your website looks like trash on mobile devices.

 

[#2] The cart icon must be available on every page

Well-designed eCommerce sites have their basket or cart icons clearly visible in the top right corner of every page. If your customer has added items to the basket, it will show how many items are in the basket.

Stanley, a food and drink container retailer, goes a step further with their eCommerce web design, which shows a cart preview when customers hover over the cart icon.

Best eCommerce website design checklist: Stanley cart icon

 

[#3] The checkout button must always be clearly visible

The checkout button is normally found next to the basket icon. Some eCommerce sites have their basket icon lead directly to cart page as you can in the Amazon example below.

Best eCommerce website design checklist: Amazon checkout button

 

[#4] Have a prominent search bar on every page

If you take a look at any eCommerce website, they will have a search bar located at the top of every page. A comprehensive search function enables users to find a product in your catalog. If you are able to provide suggestive search terms whilst your customer types in the search bar, that’s even better.

 

[#5] Clear navigation menus

Having a clear navigation menu helps to identify the different types of product categories your website sells to your customer. It is important that you use general terms to segment your product items. For example, a fashion brand will differentiate their product range by “Men”, “Women” and “Kids”.

Best eCommerce website design checklist: ASOS navigation menu

 

[#6] Contact information on every page

Having contact information on every page reduces buyer anxiety. It gives customers added reassurance that they’re able to contact you should they have any queries.

 

[#7] Maintain consumer confidence

With cyber-security being a major concern for online shoppers, ensure every page has links to the following pages:

  • Customer Testimonials
  • Why Shop With Us
  • Privacy Policy
  • Delivery Information
  • Return Policy

You can link to these pages inside your site footer to keep things looking clean. Here’s an example from Nine Line Apparel:

Best eCommerce website design checklist: Nine Line Apparel footer

 

[#8] Show logos

If your eCommerce sells big brand names be sure to include their logo wherever possible. Having logos of big brands gives the customer an indication of what type of product you sell — plus, it adds some authenticity and prestige to your brand for being affiliated with industry leaders. Here’s an example of how Best Buy utilizes logos on their site:

Best eCommerce website design checklist: Best Buy logo proof

 

eCommerce Homepage Web Design Checklist

Your home is usually the first page your customers see. And many successful eCommerce brands see their homepage as the first step of a customer journey. Do not make your home page a product listing page, use it to create an appeal.

 

[#9] Prominent calls to action

Encourage your visitors to explore the site. If you are running a sale or a promotion on a selection of products, be sure to have this on the home page and include a call to action like “See Our Latest Deals” and include a link to a product listing of all products that are included in the sale.

Other examples of call to actions include “See our range of birthday ideas”. Your prominent call to actions must be relevant to the product you sell.

Here’s an example of North Face’s home page (see how their call to action encourages their customers to explore the site):

Best eCommerce website design checklist: The North Face CTA

 

[#10] Have emotionally appealing photography

Photography is very important when it comes to selling online. We highly recommend (if possible) that you invest in professional lifestyle photography to visually (and emotionally) capture the moment where your products are in use. Fashion eCommerce sites, like Reformation, have successfully used their lifestyle photography investment to capture moments of people wearing their product. Take look at the example below:

Best eCommerce website design checklist: Reformation photography

Another example is the travel industry, they capture the moment of people enjoying the sun, igniting envy and desire at the same time.

 

[#11] Include “Top selling”, “Featured product” and “Recommended for you"

Besides including products that are in a promotion, include products which are best sellers or even featured. You can even add a list of products which are suitable for your customer. This can be achieved in a number of ways; you can select products manually or automate the selection based on a different criteria (i.e. “customers also purchased…”).

 

[#12] Use imagery to support calls to action and “Top sellers"

Customers are able to absorb information better if it is presented visually. So use pictures of the product or of customers enjoying the product.

 

eCommerce catalog page web design checklist

Customers usually get to a product listing/catalog page through the search bar or by selecting a category on the navigation menu. The product page should never include all the products, otherwise, it will be too overwhelming. Present the product listing by what your customer wants, so do utilize tags to segment your products.

 

[#13] Add a category introduction

>Depending on your industry, it is good practice to include an introduction to the category of products with the appropriate hero image. It helps to improve customer engagement because you’re immediately presenting the products in context. If the customer came through search, then this step is less vital.

SEO tip: Use this section to create a “how-to” or “buyer’s guide”. This allows you to optimize category pages for different long-tail keywords. Revzilla is a great example of this. Best eCommerce website design checklist: Revzilla category page SEO

That particular page is ranking for more than 2.7k keywords and generating a lot of traffic.

Best eCommerce website design checklist: Revzilla category page SEO results

 

[#14] Show stock availability

As your customer scrolls through your product listing, let your customers know of stock availability on the product listing page.

Showing this information on the product listing page prevents your customer from feeling frustrated if they click through to the product page and finding out that the product is out of stock.

Read this next: 23 Tactics to Create Urgency and Grow Your eCommerce Conversions

 

[#15] Show filtering and sorting functions

Adding a filter and sort function helps your customers find what they are looking for much easier. To give you an example, if a customer wants to buy a pair of brown men’s shoes within the price range of $45 to $50, then they can select the color brown and price in the filter section.

Here’s an example of Walmart’s product listing page which has filters on the left side:

Best eCommerce website design checklist: Walmart filtering

 

[#16] Highlight best sellers or customer favorites

Customers tend to favor products that have bought by others or have been ranked highly.

 

[#17] Include customer review scores

Customer review scores can help customers identify which products have been highly rated and social proofed (see the example by Walmart above).

 

eCommerce product page web design checklist

The product page is where you win or lose the customer. It’s what they shopper sees after they select a product from your catalog page.

 

[#18] Make the “Buy” or “Add to basket” button prominent

You must incorporate the 3-second rule whenever a customer visits a product page. So do make the “Buy” or “Add to Basket” button clearly visible. Use bold and bright colors to help your button stand out.

See example by JD Williams below:

Best eCommerce website design checklist: JD Williams add to cart button

 

[#19] Feature an “Add to wishlist” button

The “Add to Wish List” button should not be as visibly prominent as the “Buy” button, but it gives the customer a chance to put aside items they would like to buy at a later date.

 

[#20] Upsell (aka “You may also like”)

The Iconic utilized a feature on their website that provided product recommendations based on what other customers have bought (i.e. customers who bought X, also bought Y) to maximum effect. It helps to create a personalized shopping experience on your website and also upsells the product.

Best eCommerce website design checklist: The Iconic upsell tactic

 

[#21] Short(ish) product description

Keep the product descriptions as concise as possible. Customers are unlikely to read wordy product description unless if they want to. If products have a lengthy product description, and the customer is interested, add a "read more” underneath the concise version of the product description to allow the customer to gain further information.

 

[#22] Product photos from different angles

Show a variety of photos showing different angles of the product. If possible, add a “zoom in” feature so customers can get a closer look at the product.

Best eCommerce website design checklist: ASOS zoom-in feature

 

[#23] Add video demonstrations

There are many ways to use video content on your product pages, but video demonstrations of the product are becoming extremely popular. You can make your own video to show customers how to use the product and also leave a positive review of the product as well.

Best eCommerce website design checklist: ASOS video demo

 

[#24] Show estimated delivery time

Don’t leave your customers guessing. Give them an accurate estimate for when they can expect the product to land on their doorstep.

Best eCommerce website design checklist: The Iconic Delivery

 

[#25] Use tabs for products that have a lot of detail

Products which are high-end purchases, usually have a lot of product information. Utilizing tabs helps keep product information neat and tidy.

 

[#26] Display customer reviews or testimonials

A list of all the customer reviews is usually found at the bottom of the product page. This gives customers a chance to look at what other customers have said about the product before they make their buying decision.

Using customer testimonials throughout your eCommerce website is one of our ten hacks to convert more visitors into customers and it’s great for SEO.

Pro tip: Make sure to implement Schema markup for customer reviews or testimonials.

Best eCommerce website design checklist: Biink product reviews

 

[#27] Show stock availability

Like the product listing page, showing the stock availability gives the customer an indication if the product is in stock. If stock levels are low, ensure this is explicitly stated on the page so that the customer can make a purchase sooner, rather than later.

 

eCommerce cart page web design checklist

Once the customer has chosen the products that they want to buy, they will review the items in their basket.

 

[#28] Show all fees upfront

Hidden fees are the number one reason for cart abandonment. If there are any additional fees, ensure this is mentioned on the cart page. For example, if your eCommerce sells concert tickets, make sure you inform your customer of the booking fee that they will have to pay.

 

[#29] Provide an easy way to update cart items

Give customers the option to update the quantities or remove unwanted products. Ego Pharmaceuticals, a skincare brand, is a good example to follow here. On their checkout page, you can easily update product quantities and remove unwanted products from the cart before checking out.

Best eCommerce website design checklist: Ego Pharm checkout

 

[#30] Include a “Return to shop” link

Customers tend to review their items in the cart and may want to return to the shop to browse through the product listing to buy more items.

 

[#31] Upsell (again)

The cart page is the final opportunity to upsell any products. Include images and product details that might pair up with the items in the customer’s shopping basket.

 

[#32] Show delivery options

Provide customers with all the delivery options that you provide. Customers tend to want their items delivered sooner rather than later. So if you offer same day or next day delivery, you can provide this with an added premium.

Best eCommerce website design checklist: Supps R Us shipping method

 

eCommerce checkout page web design checklist

Once customers are happy with the items in their basket, the customer will then want to purchase them. That’s where your checkout page comes in.

 

[#33] Strip away the navigation menu

When customers are checking out, you want them focused on ensuring the transaction is completed. So for the checkout page, remove the navigation menu like you would for a landing page.

 

[#34] Break up the order process into 4 steps

This ensures the order process runs smoother. You can break up the ordering process in the following 4 stages:

  1. The cart interface
  2. Customer name, details and delivery address
  3. Payment information
  4. Confirmation page

Northeast Nursery, a landscaping supply company, does exactly what’s required to produce a streamlined and conversion-optimized checkout process:

Best eCommerce website design checklist: Northeast Nursery checkout

 

[#35] Offer several payment options

The more payment options you provide the better. The most obvious payment method is via credit or debit card. But you can integrate PayPal and Amazon Pay as well since they are two of the most trusted off-site payment solutions.

 

[#36] Security badges

Give customers reassurance that their financial details are safe by showing your SSL certificate or any security badges on the check out page.

 

How’s your eCommerce site looking?

The checklist above will help you optimize your eCommerce web design for conversions. You should also run through our 70+ questions to ask when building an eCommerce website.

After that, it’s down to how you use your eCommerce solution to provide personalized omnichannel experiences.

ABOUT THE AUTHOR
Dennis

Dennis

Dennis, whose legal name happens to be just Dennis (it's quite common from where he came from), is a content and digital marketing addict.

When he's not too busy coming up with content ideas and promoting content, you can find him at 5.30am at the gym. Yeap, he's that guy.

Related posts

Popular posts