Design is so important to the experience a user has on your site. Well designed websites support user journeys and improve engagement statistics. Moreover, like any bricks and mortar store should, a well designed ecommerce website will help customers find what they want/need, display products in an appealing manner and facilitate cross and upselling opportunities much as any merchandiser worth their salt would do.
In this chapter, we’ll explore some of the key considerations in designing your ecommerce website.
“The main goal is not to complicate the already difficult life of the consumer.”
Raymond Loewy, renowned industrial architect, first said this in the early 19th century and it stands true today.
The modern consumer is bombarded by messages, sometimes conflicting, which are intended to guide them to an expected action, yet more often than not put them off entirely.
The job of a successful ecommerce website is to reduce the complexities of online shopping through every means possible.
So what does this mean for ecommerce owners, marketers, designers and developers? Design your site to be as easy to use as possible!
This starts with understanding your audience, as discussed in chapter 1, as they will form the backbone of how you approach site design. There are other common traits of online consumers that can further guide your design, depending on which applies to your business.
The focused shopper knows what they want and they’re not here to waste time browsing. Instead, they appreciate tools which get them to the product they want quickly and enable them to buy, pay and move on in as few steps as possible. While they might be intrigued by additional offers or savings when presented in a tactful manner, this shopper simply wants quick results and will respond best to functions that support this behaviour.
The browsing shopper is much more open to taking their time. They’re the kind of shopper that, if this was an offline situation, would stroll around town and dip into the shops that pique their interests along the way. Online, they’re still looking for things that appeal to them and will happily move around your store until they find what they like.
The cautious shopper is wary of online commerce and has traditionally done their shopping in brick and mortar stores. They know there are benefits to online shopping and want to buy, but are cautious nonetheless. They’re looking for anything which can instil trust in your shop and help them along the way.
With all of these in mind, there are a number of elements to consider in your own ecommerce website design, as we’ll explain here.
When planning for an ecommerce website it is crucial that you understand what your products are and how you will like to categorise them before building your website. This will ensure that your main navigation is as clear and user-friendly as possible.
You wouldn’t set up a market stall with all the products hidden or difficult to find. The same applies online.
It’s important to showcase your products in a way that makes it easy for people to find, and appealing once they do. This section will discuss how to best categorise your products to make the user journey as appealing and straightforward as possible, which will ultimately lead to a positive user experience.
Successful ecommerce websites have a clear categorisation system for their products. The benefits of getting this right are many and include:
The best way to start grouping your products is based on your own logic. It makes sense that garden tables be situated amongst garden furniture and that women’s trainers are found in footwear, so to an extent, you can conduct your own categorisation based solely on your own knowledge.
With this foundation in place, it’s then a good idea to start layering in some additional insight from data you hold about how your audience has browsed your site in the past, and how they search. Review your existing Google Analytics data to look at ‘behaviour flow’ of how users have moved around pages, or look at your internal search queries to understand the terms users have used to find your products in the past.
You can also use external search query data, such as that found in tools like Google’s keyword planner, or even in the ‘people also ask’ boxes for your product terms. This can give you insights into related terms people search when looking for your specific products, and can therefore inform how you choose to categorise your products based on what users consider to be related.
You’ll find that as you create categories, many of these can in fact be grouped into a head-category. For example, you may have categorised your coffee table in ‘tables’ and your sofas in ‘seating’ and these things all fit within a higher category of ‘living room’, let’s say.
Typically, an ecommerce site will have 8 to 10 head categories with a list of subcategories beneath them. If you find you have a sub-category with just one or two products within it, consider whether these would be better suited to another category, so you end up with a streamlined, refined list of categories that help users to find what they want on your site.
In order to achieve strong search engine rankings, you’ll want to also consider how Google will move around your site.
Of course, Google is working toward a preference for sites with the optimal user experience, so creating an experience that’s positive for the user should come first and foremost. But it still goes to follow that you should consider the more technical impacts of your categorisation choices.
For example, if we consider a website in terms of a group of grain silos, we can get a better understanding of how Google views your content.
The idea here is that you want to categorise your content into logical groups, or silos. This means that each ‘silo’ can effectively be named after your product group / category, and then the more pages / products then fit into that category, the more important it is considered to be by search engines.
This means that if yours is a brand that wants to be found for ‘shoes’, you’ll want to put lots of ‘shoe’ products into your ‘shoe’ category, thus elevating the relative importance of the ‘shoe’ silo.
Equally, if you wanted to be known for ‘running shoes’ and ‘smart shoes’, you might want to make those into secondary categories within ‘shoes’. Or, if all you sell is ‘shoes’, those variants/types of shoes will become primary categories, with the site overall being the main ‘shoe’ silo.
By creating strong category pages and categorising products effectively, you improve your chances of ranking highly for short and long-tail search queries. Categories can be structured to target each step of a searcher’s intent, from the point where they’re just browsing, right through to the purchase point and onwards, which will provide you with more opportunities for visibility.
Look at Amazon as an example of a hugely successful ecommerce retailer; their use of categories extends into over 30 departments into which products can be entered and cross-referenced. This makes it easier for the user to navigate to the items they want to find, and for shop owners to clearly display their products in the most appealing manner.
Whether you have got dozens of products or hundreds of them, it is important to choose a categorisation system which works now and will continue to work well into the future. Ensuring that your categorisation can support your business as it scales is also an important consideration.
We’ll talk more about SEO for ecommerce later in this guide.
The navigation is one of the most important elements of any website, but it is particularly important for ecommerce sites.
Your navigation is the signpost which points potential customers to the product they want, and which leads to a conversion.
By planning out how your products should be categorised and sub-categorised, you can apply the same theory to your navigation. This approach is essential for designing a site for the focused shopper but also provides guidance and confirmation to the browsing and cautious shoppers.
One of the most-favoured navigation styles is the mega-nav – and for good reason. This method of exposing a large number of sub-categories beneath a top level head-category appeals to both customers who know what they want and those who want to browse for inspiration.
If you choose to use a mega-nav style for your website’s navigation, consider the following tips:
Examples of successful mega navs
The mega-nav is a commonly used approach in ecommerce so you’ll likely see plenty of them around the web. Here are some examples of mega navs that work really well, categorising products effectively and making it as easy as possible for users to find what they want.
In this example, Asos.com uses a mega-nav to help users reach the item that they want or to browse by categories or brands.
Note here how the navigation options at the top are very simple; users can select ‘women’ or ‘men’ depending on what they’re looking for, and then explore the site on the most general ‘gender’ level, or delve deeper into categories such as ‘new in’ or specifically to the product they want, such as ‘shoes’.
In this way, Asos is appealing to the focused shopper and the browsing shopper. The large blue buttons on the banner you see behind the navigation are another indicator that Asos has identified a gender split in their audience and that they are attempting to make it as easy as possible for users to enter the gender area appropriate to their needs.
Diy.com, the website of retailer B&Q, has achieved an aesthetically pleasing, very clear mega-nav. Here, the user can choose to browse by the room they’re decorating, by the department they expect their item(s) to be in or by specific item groupings.
As with Asos, the main benefit of this mega-nav style is that it appeals to the focused and browsing shoppers. Cautious shoppers too will appreciate the ease of navigation and the clear demonstration of the extent of the product range is a good indicator that this is a well-established business and one that can be trusted to buy from.
The added benefit to this navigation is the design style, which you’ll note hasn’t been compromised itself nor does it compromise the functionality of the navigation. All too often, design can take precedence over function to the detriment of the user, but in this case, form absolutely follows function and the result is a beautiful example of a mega navigation for ecommerce.
Users will leave your website if it fails to load quickly – and Google has also stated that load times are a factor in where your website ranks in the search results.
When designing an ecommerce website, it is important to recognise that there will be a lot load-heavy requirements, such as multiple images per product. You can keep your website’s load time on a mobile to a minimum by:
We explain more about mobile load times in chapter 4 ‘Building an ecommerce website’.
Prominent CTAs and screen content
Whilst the days of ‘designing for the fold’ are behind us, on a mobile device it’s still important to consider what will be shown on the screen when a user accesses a page on your site.
Consider where the CTA (call to action) will be positioned as the user browsers on different screen sizes, and whether this can be improved to better showcase the product or what you want the user to do.
Cross platform journeys
It’s not uncommon for a user to browse on one device and then make a purchase on another. Whilst cross-platform features such as a basket which is populated no matter which device the user logs in on are more complex that basic functionality, they can aid conversions by improving the user experience.
Mobile users have a tendency to share content via their mobile devices. Make this easy for them on your ecommerce site by including share buttons and enabling them to send the product they’re looking at back to themselves or to their friends.
There are many plugins and social sharing alternatives that you can add to your website.
Not all users will want to use your navigation all the time. For the focused shopper in particular, it’s essential that they have a method of getting directly to the product they want, and internal search is a great way to achieve this.
Note the prevalence of the search bar in the examples already shown in this chapter. The inclusion of the magnifying glass symbol in the mobile versions and the full bar in the desktop versions is a common construct of ecommerce sites and as such, the user will expect and indeed seek out the internal search functionality.
Using common icons such as the magnifying glass, along with putting your search bar in a commonly used position (top right on the page) will make it as easy as possible for your users to find it.
It’s also essential that the internal search delivers a useful and well-presented set of search results from the website itself. Websites which use internal search but deliver Google search results will fail their users; make sure the results showcase the products the user is likely expecting to find and that they’re not clogged up with irrelevant search results or links to areas of the site that don’t match the search intent.
For example, if a user searches for a ‘samsung np300 laptop pink’, they are most likely looking to buy that particular product and therefore want to see the product page prioritised in the search results. Even if you’ve written blog posts about that product or have online reviews of it, these should be delivered below the product page.
If the user simply searches ‘samsung’, deliver them to the category page for that brand and not the product pages for all their models.
Getting the internal search right is an integral part of the ecommerce user experience.
Your product pages are arguably the most important pages on your ecommerce website. This is where your potential customers become actual customers, where they can learn more about your product and choose to put it in their basket.
An obvious disadvantage to shopping online as opposed to offline is the lack of ability to touch and experience the product prior to purchase. This means that online users don’t get to hold the product, to feel its weight or move it around to see it from different angles.
An important role of the product page design is therefore to emulate this tangible experience through the use of images, videos and text information.
This means crafting product pages that are unique to your site. While manufacturers will likely provide a standard description, taking the time to write it in your own words and put your own tone and opinions to it, if appropriate, will help your brand to stand out from its competitors. Unique descriptions will also benefit your search rankings when people search for your products through Google.
There are some common elements to product pages that you may like to include, as your users will expect to see them:
It is also a good idea to include ratings or reviews within the product description, to aid trust in your site and brand.Further information on the content of product pages can be found in chapter 5.
Core Product Information
Display your core product information above the fold, this information should help people understand what your product does. The imagery here needs to be clear and give a visual representation of the positioning and details of your product.
For example, if the product you are selling is a kettle then there isn’t too much information needed other than the name, brand and price and clear imagery.
Path to Purchase
The conversions CTA’s on a product page need to be clear and visible, don’t overload a user with too many options. If you need to select a colour and size, don’t add too many other CTA’s as this starts to clutter a product page and will harm your conversion rate.
After you’ve had the core product information displayed above the fold along with a clear path to purchase that’s when it gets down to the more in depth details. These need to answer any questions your users would have around your product and answer any worries they have before they even think about them. This is where you want to find the features, FAQs, delivery details and warranty information.
A great example of a well designed product page can be found on the Alex and Ani website, this utilises all the above the principles to create an engaging product page with plenty of additional content to help the user to their decision:
The purchase experience is arguably the most important for an ecommerce website. Your customers need to be aware of the process as it happens, with clear calls to actions to view their shopping carts and to check out.
This is where it all begins – your customers will expect to be able to select an item for purchase, and your website should present a seamless way of adding this to their basket.
There are definitely a few design decisions to consider here; whether or not the user should remain on the same page, or whether they should be taken straight to the shopping cart. The latter may be more appropriate if typically you sell items with a higher ticket value and lower average basket quantity, but you might want to keep users on the product page, via a nice dynamic cart update or alert, so that they can continue adding to their basket. Use historical data, or complete some competitor research, in order to ascertain the best route forward for your approach.
If you are intending to keep your customers within the shopping experience on the product page, then there are a few things you need to bear in mind. This is mainly inspired by Steve Krug’s principles in “Don’t Make Me Think”;
For additional value later down the line, when we com to talk about promotion, ensure that you tag all “add to cart” events in your tag management or analytics products, so that you can successfully show retargeting adverts to these customers if they do not complete their purchase.
Too many web developers engineer solutions not entirely fit for purpose when it comes to the shopping cart. This page needs to show your customers exactly what it is that they are purchasing from you. This is where user experience design should really lead a web build: the cart page should funnels users through to your checkout process first and foremost. Everything else at this point is secondary.
There are a numbers of elements which need consideration when considering the layout of this page;
Typical shopping cart abandonment rates are in the region of 60-80% (baymard.com, 2017) so it’s no wonder so much of ecommerce conversion rate optimisation focusses here. As with all trends over the last few years, this figure is exacerbated by the mobile shopper, so capturing or accurately retargeting an abandoning mobile shopper will no doubt be your number one priority once live.
When designing a new page, or re-designing an existing one, always follow the principles laid down as “best practice” before adding your personality and individual take on the checkout journey.
It’s no surprise that some of the most common reasons for checkout abandonment are; unexpected costs, account creation and checkout complexity. See below for other reasons for checkout abandonment:
From this graph, the the arguments are clear; keep your checkout process lightweight, keep the forms to one page and don’t ask for anything unnecessary. Be helpful – autofill what you can, and make some clear assumptions which customers are able to edit only if they need to (i.e. different shipping and billing addresses).
In terms of your ongoing marketing efforts, don’t forget to ask for your customer’s email address as early as possible in order to enable basket abandonment email marketing, and tag progression throughout the process so that in your analytics you can monitor dropout per stage.
Over the years, the team at Impression have come across a number of strained checkout processes, including those using off-site baskets and checkouts. Unless absolutely necessary, avoid these at all costs. All of the platforms we discuss throughout this guide have perfectly adequate and configurable shopping cart processes.
In terms of language, be personal where possible. Include names if your CMS will allow this level of personalisation, and ensure you use language such as “You are purchasing…”.
At this point, the order is complete but your customer’s journey need not end. At this point, you need to be sure your tracking is set up correctly in order to first record the purchase in your analytics account, but second, trigger all relevant tags in order to opt your customer out of any abandonment ads you have planned.
An order confirmation page itself doesn’t actually need to say anything specific, but it’s usually a missed opportunity to gain insights from you customers, or even have them turn their already-entered details into an account with you by adding only a few additional details.
If you’re using a form-based payment gateway like PayPal Pro (not a server integration) then you’ll need to ensure that Payment Data Transfer is active so that your CMS captures the “success” message.
If you’re not comfortable asking customers to jump straight into creating an account with you, then perhaps take this opportunity to show them a quick survey, to gain insight on some of the questions you’ve no doubt already cut from your initial checkout page we discuss above.
Trust signals are an important element of website design, particularly in ecommerce where users are being asked to submit payment details and share sensitive information such as billing and delivery addresses.
Put simply, if your site looks outdated, is broken, lacks quality images or generally doesn’t look ‘good’, people won’t buy from it – no matter how great your product is.
There are a number of ways you can improve the perceived trustworthiness of your ecommerce website through design:
PC World do this well on their website, where a number of trust signals are evident across the page:
Calls to action, or CTAs, are the elements of website design that guide users to do something, be that complete a purchase, sign up for a newsletter, download a PDF or simply to move to another page of the site. Through CTAs, we can guide our users to complete the goals we set for our sites.
In the case of ecommerce websites, the most important CTA is ‘buy now’ or ‘add to basket’. The intention of any ecommerce website is to drive sales, and the design of the site is an important contributor to this.
Your ecommerce website design should display CTAs prominently. Here are some techniques to help draw focus to your CTAs and inspire action:
According to data from Comscore, mobile internet usage overtook desktop usage for the first time in 2014. In August 2016, Google removed the ‘mobile-friendly’ label next to websites in the SERP’s after announcing that over 85% of all websites are now mobile-friendly. This shows how important it is for your site to be designed with mobile in mind. In 2018, Google rolled out its mobile-first index, meaning it will review the mobile version of your site before all else.
It comes as no surprise, then, that mobile users expect a good experience on your ecommerce website from the navigation to the checkout pages whether they view it on a mobile, a tablet or a desktop device. Ecommerce designers will invest in ensuring their mobile designs are in line with, or even better, than the desktop equivalent.
The best method for achieving mobile usability, according to Google, is responsive design, which changes automatically depending on the size of screen on which it is viewed.
This means that ecommerce designers are met with the task of designing a site which looks great and works well across all devices.
This goal will be much better achieved using a ‘mobile first’ approach to design. Design your website for mobile first, and consider the functionality of a mobile device when deciding on the functionality of your desktop website.
By starting with the mobile screen size first, you’ll be including the most important elements of the design in the smallest iteration, and then adding to that as it grows. Designing for mobile at the end of the process inevitably means websites lose elements of their desktop design, meaning the mobile experience is a lesser version of the desktop equivalent.
Your navigation will also need to adapt to different screensizes.
The following examples illustrate two different approaches to mobile responsive ecommerce navigation:
Using the B&Q website as an example again, the mobile version retains the functionality of the mega nav, along with the icons which were so visually appealing. Sadly, the icons are only part of the ‘shop by room’ menu choice; it might be nice for B&Q to integrate this element into the other menu choices, too.
The Lush website is another example of a clean and easy to use mobile navigation. In this example, items drop down rather than moving the user across to the next navigation page, as in the B&Q example.
Consider mobile functionality
Mobile devices work differently to desktop devices on the whole. Savvy ecommerce marketers incorporate this functionality into their design, to improve the user experience.
One example of this is the way users move around your site. They will scroll and click using their finger, so make sure that the buttons and navigation options are big enough for people to press.
Another example would be to trigger the numerical keyboard when a user clicks on a field which requires numerical input, such as a credit card number. You can also add ‘click to call’ functionality into your website to enable users to call you easily if they need to.