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:
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.
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.
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.
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.
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.
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”.
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.
With cyber-security being a major concern for online shoppers, ensure every page has links to the following pages:
You can link to these pages inside your site footer to keep things looking clean. Here’s an example from Nine Line Apparel:
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:
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.
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):
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:
Another example is the travel industry, they capture the moment of people enjoying the sun, igniting envy and desire at the same time.
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…”).
Customers are able to absorb information better if it is presented visually. So use pictures of the product or of customers enjoying the product.
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.
>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.
That particular page is ranking for more than 2.7k keywords and generating a lot of traffic.
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
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:
Customers tend to favor products that have bought by others or have been ranked highly.
Customer review scores can help customers identify which products have been highly rated and social proofed (see the example by Walmart above).
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.
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:
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.
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.
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.
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.
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.
Don’t leave your customers guessing. Give them an accurate estimate for when they can expect the product to land on their doorstep.
Products which are high-end purchases, usually have a lot of product information. Utilizing tabs helps keep product information neat and tidy.
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.
Pro tip: Make sure to implement Schema markup for customer reviews or testimonials.
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.
Once the customer has chosen the products that they want to buy, they will review the items in their basket.
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.
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.
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.
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.
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.
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.
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.
This ensures the order process runs smoother. You can break up the ordering process in the following 4 stages:
Northeast Nursery, a landscaping supply company, does exactly what’s required to produce a streamlined and conversion-optimized checkout process:
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.
Give customers reassurance that their financial details are safe by showing your SSL certificate or any security badges on the check out page.
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.