Chapter 2
Designing an Ecommerce Website

You are here: Home The Ultimate Guide to Ecommerce Designing an Ecommerce Website

Chapter summary

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.

Designing for the user

“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.

Common traits of online consumers

The focused shopper

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

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

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.

Products and categorisation

Identifying your products

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.

Grouping your products

Successful ecommerce websites have a clear categorisation system for their products. The benefits of getting this right are many and include:

  • Making it easier for people to buy, increasing conversions on your site – if the user can’t find it, they can’t buy it
  • Improving product awareness – when your categories are clear, people will have a better picture of your complete product offering

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.

Improving search engine visibility

In order to achieve strong search engine rankings, you’ll want to also consider how Google will move around your site.

Content silos

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.

Long and short tail search queries

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.

Designing your navigation

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.

The mega-nav

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:

  • Make sure each category within the mega-nav is clickable with a corresponding category page
  • Highlight each major category in bold or use another design convention to draw the eye and help users scan for what they want
  • Use appropriate spacing to make the mega-nav items easy to read
  • Don’t be afraid to put the same product in multiple categories if it makes sense to do so

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.

asos mega nav 2019

ASOS.com

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.

b&q mega nav

DIY.com

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.

The importance of load times in ecommerce design

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:

  • Reducing the size of your images where appropriate
  • Reducing code dependencies
  • Reducing client-side processing

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.

Sharing

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.

Designing for internal search

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.

Designing your product pages

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.

Product page features

There are some common elements to product pages that you may like to include, as your users will expect to see them:

  • Core product information
  • Product imagery
  • Clear path to purchase
  • Conversion focused content

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.

Detailed Descriptions

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:

alex and ani product page
Alexandani.com

Designing the purchase experience

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.

Add to basket

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”;

  • Show your customers their cart contents, or quantity and total value, at the very least
  • Give directions on how to complete checkout
  • Show your customers where to view their cart in full
  • If you have any USPs, such as free shipping on the cart value, then make this known!

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.

The cart page

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;

  • Your calls to action; make it easy for users to progress to checkout, but also not extremely difficult to edit their cart contents or to return to shopping to add another product to make the most of a basket value shipping deal. We often see a “Checkout” button above and below the product grid on a number of stores, but the placement and layout of this page for your particular audience is something you should test.
  • Exploiting your trust, security and accreditations; if you accept American Express or PayPal, or have daily site SSL checks, or offer an online warranty such as Google Certified Shops, ensure these and more are highlighted on this page to give your customers the confidence in buying from you.
  • The cart contents itself: if a customer has selected a blue widget, ensure the blue image is shown instead of the default. If a product has a line item discount applied to it, or if there’s a basket value discount in place, then ensure this is highlighted appropriately.
  • Cross sells: If your product usually ships with complimentary products, ensure you let your new customers know about these products (or suitable bundles) via “Customers also bought” cross sell modules available in most ecommerce content management systems in the cart page.
  • Shipping: Even if you have extremely simple shipping rules for domestic delivery, ensure these are clear and up-front in your cart page. Not showing these up-front can lead to basket abandonment later down the line, and can lead to a lot of frustration. For stores with more complex rules, it’s good practise to expose a shipping calculator so that there are no nasty surprises when it comes to completing the purchase. In shipping calculators, you also get the opportunity to begin data collection without committing to a purchase, so it’s a good idea to consider the input fields required to power these. And lastly, if you offer free shipping, make sure this is clearly annotated near the basket total – this will add confidence.
  • Support: Offering free support throughout the shopping process is something that all great stores will offer, especially now as live chat services provide mobile applications for busy store managers that are just starting out, or not tied to a desk all day. Ensure you offer support for customers who might have particular requirements, either via email, live chat or a ticketing system. Generally, reaching out for support is a good signal that your potential customer will purchase from you, so reply as quickly as possible!

Checkout

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:

ecommerce cart abandonment
Source: https://baymard.com/lists/cart-abandonment-rate

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…”.

Order confirmation

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.

Top tips for shopping basket and checkout page design

  • Keep number of pages required to a minimum
  • Show users where they are in the checkout process using breadcrumbs or a progress bar
  • Incorporate trust signals such as credit card logos and security certificates
  • Suggest similar items or upsell on basket page
  • Ensure your analytics and tagging is fully configured to enable marketing efforts in the future

Trust signals in ecommerce design

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:

  • Display security logos, especially on pages pertaining to payments
  • Use guarantees or return policies to assure users they won’t be stuck with a purchase they no longer want or that doesn’t work
  • Make it easy to find customer service contact information, to help users who have questions along the way
  • Show customer reviews

PC World do this well on their website, where a number of trust signals are evident across the page:

pc world ecommerce trust signals
PCworld.co.uk

Calls to action (CTAs) in ecommerce design

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:

  • Use contrasting colours on your primary CTAs to help them stand out
  • Use commonly used language such as ‘buy now’ or ‘add to basket’ and avoid deviating from these, which may cause user confusion
  • Make the primary CTA the biggest link on the page
  • Position the primary CTA in a place the user’s eye is likely to be, such as the price or product description

Designing for mobile commerce

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.

Mobile first

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.

Mobile navigation

Your navigation will also need to adapt to different screensizes.

The following examples illustrate two different approaches to mobile responsive ecommerce navigation:

b&q mobile nav
B&Q mobile navigation 2018

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.

lush mobile nav
Lush.co.uk mobile navigation 2018

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.

Get in touch