20 Awesome E-Commerce Website Design Tips
When it comes to running a successful e-commerce business, it’s the little things that can make all the difference.
Attention to detail when it comes to e-commerce website design is a critical part of a well-structured modern-day sales process that retailers all around the globe spend millions of dollars on each year trying to perfect.
From optimising their sales funnels, to conversion optimisation, to product bundling, to website security; the customer experience that your users are subject to is everything in online retailing.
In this article we’ll provide you with 20 awesome e-commerce website design tips that will help you increase sales and decrease the number of missed opportunities you’re seeing across your site.
Let's start by working on your shopping cart design
If there’s one thing you want to get right on your e-commerce site it’s your shopping cart design.
The goal of any e-commerce site is to encourage spending with the least amount of resistance on the users’ behalf. One of the absolute “must-do processes” is to ensure that there are no barriers between user intent and finalising a sales process is undertaking a period of shopping cart analysis.
Below we’ve provided some helpful tips you and your web designer can implement to improve your shopping cart experience and sales funnel with the goal of reducing the number of dropouts you see on your site and increased up-sells you can make happen. Each of these items are widely used by successful e-commerce retailers and will aid your e-commerce design greatly if implemented effectively.
1. Minimise your clicks to purchase
In 2000 Amazon patented one-click buying to circumvent typical shopping cart forms. This was revolutionary as it minimised the number of steps/clicks a customer was required to undertake to make a purchase.
By capturing and storing a customer’s credit card details online and authorising purchases with a single-click, customers we able to fly through Amazon check-outs. This technology has been licensed to many other retailers since then and has become an industry standard, but it’s surprising how many e-commerce retailers still do not take advantage of reduced click check-out technologies.
When designing your e-commerce shopping cart, you should aim for no more than the following steps to complete a transaction:
- The customer clicks a “Buy” button on a product page and automatically adds an item to their shopping cart
- The customer then hits “Pay now” and their payment is either processed using stored payment details (i.e. Credit Card or PayPal), or
- The customer enters their details as a guest to finalise payment
If your shopping cart involves anything more than this, you’re guaranteed to be losing customers. So make sure your cart is up to scratch!
2. Add a ‘Trust Seal’ to your website check-out and payment gateway
In 2016 Baymard ran a study that reviewed the various elements affecting check-out abandonment. What their team found was that having a trust seal was the fifth most important element users wanted to see on an e-commerce check-out when attempting a purchase.
This means that without a trust seal, you’re going to lose customers who would otherwise make a purchase from you. An easy way to ensure your site is viewed as safe is by displaying the trust seal of your payment gateway vendor on your check-out. This simple e-commerce design trick will ensure your visitors stay on your site and make it through to payment without any loss in business.
3. Ensure you offer ‘Guest’ and ‘Account’ check-outs
It’s a pet hate of mine (and I clearly represent the entire e-commerce community), that when I visit a site I'm forced to sign up for an account to proceed with my purchase. Yes, it’s important to capture your customers’ email account and permission for future marketing endeavours, but not at the risk of losing them during a sales funnel because this can be done at a later date.
Lot’s of customers simply want to make one-time purchases without creating an account. If creating an account for the purpose of capturing email and permission to market is what you’re trying to achieve, you can do this by adding a selected checkbox giving you permission to market to your customer. This will ensure that your check-out process runs smooth and no drop outs occur as a result of unwanted sales funnel steps.
4. Provide product review capability
When your customers reach your check-out, you don’t want them leaving this page for any reason (unless it’s to finalise payment). That’s why it’s a great idea to provide a link to any line items in your check-out making sure they open up into a new window, or a small picture and the details of the line item to ensure there’s no temptation to leave your check-out page.
This simple trick is actually a really great way of keeping your customers focussed on making a payment. Personally I like providing a combination of both items with a preview of the product I’m looking to purchase, a short description of the product including the price, and a link to the actual product page. This works well using a simple summary table and is easily implemented across most payment gateways.
Tip: Make sure you include a "Remove" button as shown below, this further decreases any desire to navigate away from your check-out page.
5. Don’t forget to include promo codes
There are literally thousands of examples of online retailers who have used promo codes to attract new customers, and why not? Why wait for your customers to come to you, list your promo codes on sites like RetailMeNot where you can get in front of a large audience of 'discount loving consumers'.
We recently wrote an article discussing how Dominos Pizza has been able to succeed online via the use of it’s technology, and you guessed it, promo codes are a major part of how they attract millions of visitors to their website and apps each month.
When using promo codes on your site ensure you keep track of the codes you release and that there is an expiry date on each code. This can save you a lot of money in the long run and prove an effective means of keeping your customers engaged in what you’re doing by releasing new codes online.
6. Ensure you have a postage strategy
One of the final considerations your customers will make before deciding to proceed with a payment on your site is how much postage they’re going to have to pay. If your customers notice that they can purchase the same item for cheaper online but the cost of postage makes it more expensive than their local retailer, the sale will be abandoned.
In recent years’ free postage has become a major attraction for online customers, but it only works e-commerce retailers if the price is built into the overall product cost or you’re putting through enough volume to cover expenses.
One option which I like is free postage above a certain amount. TennisOnly.com.au does this really well offering free postage on items above $150. This allows them to account for shipping costs in the overall cost of an item, whilst offering $5 delivery on all orders below $150 which is a neat tactic also.
7. Don’t forget to build your email database
As mentioned, your shopping-cart and check-out pages are a great place to build your email database.
If you're looking to get the most from your e-commerce design, consider segmenting your subscribers at this point. For example, if you’re operating an e-commerce store that sells both Men’s and Women’s clothing, you can record which item a customer purchased so you can send them relevant updates rather than just blanket emailing them with offers.
A simple way to do this is by incorporating a pre-selected checkbox into your check-out process asking permission to send email updates whilst recording what type of product or service the customer purchased.
8. Offer multiple payment methods
These days there are literally hundreds of payment gateways that offer all sorts of payment methods that e-commerce retailers can use.
Typically your customers will expect a credit card option, but there are also many other options you may want to consider adding as back up. This includes:
- PayPal: One of the first payment vendors online, PayPal is a trusted payment gateway which can process credit cards but requires an account to be setup. PayPal is pitched squarely at users who already have a PayPal account and want to use funds in their PayPal account to make a payment.
- AfterPay: Fancy offering payment of larger items in multiple scheduled payments? If so, AfterPay is a great way to capitalise on those who would prefer to pay in instalments. This relatively new concept is gaining momentum in a big way popping up both in-store and online.
- Bitcoin: Are you looking to cater to a more tech-savvy audience, if so Bitcoin may be for you. The value of Bitcoins fluctuates quite a bit so be careful, but there's a large audience out there with Bitcoins in their virtual pockets you may want to look at marketing to.
Let’s get to work on your product page
By now your shopping cart and check-out experience should be greatly improved. Next we’re going to focus on what we can do to improve your "Product" page.
Product pages are a fundamental part of high quality e-commerce website design. Whether you’re building your first e-commerce site or optimising an existing site, the following tips will help you drive more sales.
9. Optimising your “Buy” button
A well-designed “Buy” button is a must-have for any e-commerce website, and the good news is that it’s a pretty simple task to achieve. When implementing a Buy button we recommend the following:
- Ensure your Buy button does not blend into the background of your page
- Is positioned in a prominent location above the fold of your page
- Is large enough to show prominence on your page, a standard hyperlink is not enough
- Using a bright colour that helps your button to stand out from the rest of the content on your page
- Is positioned on the top right-hand side of the page to account for user reading habits
- Is positioned closely to the total value of the item being purchased
- Has enough white-space around it not to feel cramped in the page design
10. Make sure you include plenty of photos
If you’re shopping online, one of the most important things you want to see is plenty of photos of a product you’re considering purchasing. The reason this is so important, is because the goal of your product pages is to assure potential customers of what they’re purchasing.
Although the real estate industry is all about driving enquiry, across the board property listings are a great example of what you should be doing on your e-commerce product pages with regards to imagery. The listing below found on Domain.com.au has 20 high quality photos of a property for sale. Each of these photos gives you an excellent idea of exactly what’s for sale and adds a lot of value to the advertisement.
We recommend having at least 4 to 5 photos of each product you’re selling on your site encapsulated in an image slideshow. This is a great way to tempt your users into spending more time perusing your products and imagining what it will be like to own them.
11. Include as much product detail as possible
One e-commerce design tip you’re going to want to follow, is adding as much detail to your product pages as possible. The tech-industry does this particularly well. Takes companies like JB Hifi or Apple. If you’ve ever visited one of their product pages they go to a lot of effort to ensure there's a ton of product detail or their pages so both their users and search engines can understand what’s on offer.
High quality product descriptions and technical specifications are a great way to differentiate yourself from your competitors and add to your product image gallery.
12. Related product up-sells
Related product up-sells are a must when it comes to e-commerce product page design. Below we’ve provided an example of a related product listing module when purchasing a Wilson tennis racquet on Amazon.
As you can see all these products are items that a tennis player would like to purchase in addition to their new racquet. This technique is simple and can add a lot to your bottom-line. Not only this but related product listing up-sells are a great way to profile customer behaviour for email marketing campaigns, even if they don’t make the up-sell purchase right away.
13. Optimise your URL’s and Title tags for readability
A great way to enhance your e-commerce product pages is by optimising for your pages for increased search engine visibility. The simplest way to do this is by accurately describing the content of your pages in your URL's and title tags.
Starting with your Title tag, try to keep it under 70 characters and state the name of the product you’re selling. With your URL, separate each of the words in your product title with a hyphen character (-) and ensure all characters are lowercase. This is best practice for URL structure.
Below is a great example from Rebel Sport showing the URL and Title tag of a pair or “Nike Mercurial Superfly V Mens Football Boots”. This is a highly unique product name and is a term someone looking to purchase these boots would enter into Google. Optimised Title tags and URL structure are both part of Google's top 200 ranking factors and should be a consideration when implementing each of your e-commerce product pages.
14. Include sizing, colour and quantity details if relevant
If you’re selling clothing or shoes, displaying clear sizing, colour and quantity information about a product is really important if you’re going to close a sale.
Things to consider when displaying these details include:
- The more information you can display the better
- Showing available sizes and those that are out of stock is really important
- Display measurements (in cm or inches) for items such as shirts where height and widths are relevant
- Allow your users to select different colours and change your product imagery to display those selections
- Ensure all elements including product quantity are easy to manage
Humans by nature are highly visual, hence displaying detailed sizing, colour and quantity information is a great way to increase the chances of a sale on your e-commerce site. Below is a simple example found on the Portmans site. This includes colour, sizing and quantity details which are really user friendly.
15. Consider offering bulk-buy and bundling functionality
Product bundling and bulk-bulk e-commerce strategies are both excellent ways of getting your customers to purchase more items from you. Why? Because people love a deal.
If you can offer multiple items at a discount, free shipping on multi-purchase orders, or discounts for bulk purchases, this can be a great way to keep those dollars turning over.
Companies such as Alibaba have built the entire business model around bulk-pricing, whilst companies such as GoDaddy have made a lot of extra sales using bundling as a strategy offering highly affordable add-ons.
Advanced e-commerce website design tips and tricks
Now that your shopping cart, payment gateway and product pages are working well, it’s time to focus on some advanced tips and tricks you can use to enhance your e-commerce website design. Let’s get started with your home page “hero slideshow”.
16. Limit your Home page "hero slideshow" to three slides
When it comes to hero slideshows, “less is more”. The reason this is the case, is that your visitors generally don’t stay on your home page long enough to view all your slides, therefore you don’t want to slow your home page down by including too many slides that simply won’t get seen.
Below we’ve provided an example from web hosting company GoDaddy. As you can see GoDaddy has included three slides in their slideshow, each with important an offer that's available across their site. These offers are updated regularly, so don’t forget to refresh your hero slides to build your repeat visitation base.
17. Understand your “cost of acquisition calculation” to collect emails
One common tactic many e-commerce retailers use is incentivising email sign ups with a gift certificate using a cost of acquisition calculation.
For example, if you’re looking to grow your email database and are happy to spend $1 per subscriber, you may be able to achieve this with a seemingly higher offer like the one below from Uniqlo.
In the below example Uniqlo is offering a $10 discount when a customer makes their first online purchase. When you consider the actual cost of doing business, it’s important to note that it’s cheaper to sell online and the $10 incentive is worth considerably less due to product markup. Not only this, but Uniqlo has an opportunity to impress their new customer and up-sell them on their website meaning this $10 voucher could likely earn Uniqlo considerably more than the "$10" cost to deliver a subscriber (even if they don’t use the voucher).
18. Your customer support should be easily accessible and multi-channel
These days’ customers like to interact with e-commerce vendors across a variety of channels, and it’s important that you cater to common customer support channels to keep your customers happy.
Firstly, make sure you have a support@ email address readily available that your customers can email you on to discuss any issues they may be having. This should be configured to be received via your contact form and be linked to an online help desk service such as FreshDesk where you can assign each customer a support ticket.
You should also provide phone support to cater for both local and out of office hours. E-commerce is a 24/7 game, so you should aim to assist your customers for as much of the day as possible. At a minimum, aim to run your phone support from 8am until 8pm, 7 days a week. This is a vast improvement on standard business hours and will differentiate you from your competitors because e-commerce customers generally shop more frequently during personal hours.
A great example of a company using social media as one of their primary support channels is Best Buy. We recommend check out Best Buy Support for an awesome example of social customer support.
19. Ensure your site is SSL secured
In 2014 when Google released this post on the Webmaster Central blog, it has been clear that having an SSL certificate on your site is a search engine ranking factor not to be ignored. Therefore, if you don’t have an SSL certificate installed on your e-commerce site you’re crazy!
Installing an SSL certificate is both easy and affordable with most hosting providers offering SSL certificates for sale. You should be able to pick up an SSL certificate for a single domain for around $100 per year, and a multi-domain certificate for a few hundred dollars per year.
20. Provide easy to use search filters
Over the years there’s been a lot of debate about the value of on-site search, however during that time nobody has denied it’s value in the e-commerce world.
If you’re running an e-commerce store you want to make sure you’re designing your e-commerce search to have plenty of filters your customers can use to hone in on exactly what they’re looking for.
A great example of this is Sedo.com, a leading domain brokerage site. Sedo’s customers can spend hours searching for the perfect website name so need awesome filters than can help them narrow their results. I recommend taking this site for a spin as Sedo's site may give you some great ideas you can apply to your own e-commerce search facility.