Fifteen Logo

Important Design Elements for E-Commerce

August 25, 2017

The main aim of an e-commerce website is to guide the user through to your checkout as easily and quickly as possible. As with any website, the design and layout of your website play a big part in the success of this. And if your customers can’t find what they are looking for, it’s highly likely that they will find another online retailer to complete their purchase.

Being someone who designs websites day in, day out, I thought I’d share a few elements to take into consideration when designing an e-commerce website specifically, in order to help improve its success of converting customers.

Telling Your Story

Your website should deliver the right information to the user at each step of their journey. It should help them to make an informed decision on what they are buying, all the way from their research phase through to purchase.

When the user arrives on your website, they should be able to easily identify who you are and what you offer.

Your homepage is a key place to tell your story and should introduce your brand and clearly display your offering, to reassure the user that they have come to the right website. Your key selling points should be prominent, and customers should be able to see how you differentiate from your competitors. It’s a chance to let your personality shine through.

Navigating Your Website

As with any website, your users should be able to navigate around your website easily.

If you have a lot of products, it very likely that these fall into a number of categories. A well thought-out navigation can help to display these in a structured and organised manner, allowing the user to navigate through with ease, refining their search as they go. You could consider a mega menu or dropdown design that will allow you to display these without cluttering and over complicating the main navigation.

For those users who land on your website knowing what they’re here for, including a prominent search bar is a great tool to aid them in finding the right product and/or information for them.

When your users reach your product, letting them refine their options will help to locate a particular product quicker and easier. Allow functionality to arrange the products by elements such as price, size or best sellers, alongside the ability to filter by categories suited to your products. Don’t forget the include the ability to undo these actions, so your user doesn’t have to repeat the process over and over.

Adding breadcrumbs is also an easy way to allow the user to flow through your website.

Giving Clear Call to Actions

Call to actions are a key aspect of any website. They’re one of the most important elements to guide your user through to your products and subsequently your checkout. Your call to actions should be strong and obvious, asking the user to take direct action by clicking on it.

Ensure they have clear and precise messaging that is relevant to the action that is happening and use language that is suitable for your audience – “Buy Now”, “Add to Basket”, “Sign Up Now”.

Your call to actions should have prominence on the page so your user isn’t having to search for their next action. This should be taken into consideration when deciding on size and placement. Choosing a contrasting colour from the rest of the page is a quick way to make these highly visible and stand out from the rest of the information on your page. Keeping the design consistent across your website will increase the user’s ability to identify these quickly.

Selling Your Products

Your product page needs to inform, assure and motivate your user to click that all-important “Add to Basket” button.

Investing time and effort into your photography will quickly draw users in. A brilliant set of photographs not only looks professional but is the best way to showcase your products accurately. This is the only way users can get a feel for the real products, so making sure these are right is crucial. Allow for multiple shots per product so the user can get a detailed look at the product.

Provide your user with detailed and informative descriptions of your products and if your product comes in a variety of sizes/colour/quantities, make sure these options are displayed clearly and easy to use.

Showing related products can help to keep a user shopping on your website, offering similar and related products. Remember not to over clutter this page though.

Checkout Design

Your checkout area is the most crucial point in your user’s journey. This is not the place where you want them to bounce, abandoning the products they have in their basket.

There is a lot of functionality required to this page that will allow your user to finalise their choices before purchase, including the ability to change quantities, choose a shipping options and apply discount codes. All information should be displayed clearly, with a prominent checkout button.

Removing any unnecessary distractions from the design of this page, such as the header and footer content, will encourage the user to focus on completing their purchase.




Stay on top of your digital game with our blog updates.

More posts