Best Ecommerce Web Design Examples And Why We Love Them
Ecommerce websites can be very subjective, everyone has their own opinions as to what looks good and what works well. In this article, we are going share our favourite ecommerce web design examples to show behind the scenes evidence of how certain UX techniques, that don’t seem significant at first, can make a big difference to the design & functionality of the website.
Best Product Lists & Filtering
Adidas:
The importance of the product listings page
You may not know how much you use website search bars until they aren’t present
This page is key for the user in finding exactly what they are looking for, even if they don’t quite know exactly what that is yet. Sure, there’s a search feature to enable the user to find a specific product (or set of products), but when the user only has a few attributes in mind of what they desire, then a user-friendly, easy to navigate, aesthetically pleasing product list/filter will help them find the perfect product for them.
The key is to build something that is pleasing to the eye and simple enough for anyone to use.
List layout
The site has hierarchy breadcrumbs on the category product list, the breadcrumbs can be clicked
The ‘Back’ Button is universally used to help customers return to their previous page
Large-scale eCommerce websites – including those in our list of our favourite ecommerce web design examples – can often become a maze. If the user wants to return to the category listing or search results page, but can’t remember how they got there in the first place, then breadcrumbs are a highly-effective method of allowing the user to navigate the website more easily.
Breadcrumbs should be clear, concise and obvious. Using a “back” button makes it even easier for the user as well. The easier the user can find the product they want, the less likely they are to leave the website and go elsewhere.
Increasing the browser width adds more columns, content, or larger thumbnails
Help your customers shop faster with a wider viewport showing more products on display
Of course, responsive design is an absolute must, that goes without saying, but a truly responsive design that scales seamlessly with the browser/device viewport width is key. Allowing the user to view a snapshot of each product at the optimal size will mean they are able to see the perfect amount of detail, whilst scanning through the highest possible number of products.
The number of results is indicated upon search
Upon searching for a product or attribute, the number of results is displayed. That’s a good indication to the user whether their search is too broad, or too narrow. In this particular case, the displayed number of results isn’t too overpowering; they don’t take any focus away from the more important elements on the page.
List Items: Interface & Hit Areas
Product specs, brands, or features are visually separated from the product title
Ensure your product name is clear and concise, help to make your customers purchasing decisions easier
Within the product description, the most important factor is the product title and price. This has to be clear, descriptive and the largest font size compared to the other attributes. Aside from imagery, which has to be strong regardless, this is what differentiates each product and allows the user to make further comparisons other than the look/style of the product. It is increasingly important, the larger the eCommerce store is.
That being said, other attributes like colour, category, size (or any attribute depending on the type of product) should be considered here. It will result in the user more accurately finding the product they desire, without having to click through as many single product pages before finding the right one for them.
We have already established the price is displayed prominently, which includes the old/discounted price.
Single-path – Yes, the list item is implemented as one large hit area. The entire element is clickable through to a single product
To have a “view product” button on each product listing isn’t necessary. Instead, what Adidas has done here, has enabled the entire product content to be clickable. This helps to reduce clutter, remain focus on more important factors and reduce the height of each item to allow for a greater number of products to be displayed within the viewport.
A secondary image on hover is present
Viewing other variations within the product gallery can help your customer shop quicker and more efficiently
Whilst this is only on desktop (or non-touchscreen devices), this allows the user to view other images for a particular product.
Filtering: Scope & Logic
Yes, it is possible to apply two values of the same filter type
With a large product catalogue, allowing customers to tailor the search results to their needs can increase conversion rates and keep your customers on-site for longer
Combining multiple filters, reduces the number of items in the search list, this displaying only products tailored to the users’ requirements.
Sticky filter bar
Relieve the pain of customers scrolling back up to the top page just to add another filter. Keep the filter bar sticky allowing easier access
Even upon filtering the products, the user will likely have to scroll through the page in search of the item they desire. In doing so, they may want to filter further but in turn, not lose their scroll position on-page. This is when a sticky filter bar (one that has a fixed position on the page) can be highly useful.
This must work asynchronously – loading the new results without refreshing the page and forcing the user to the top of the page again.
Best Single Product Page
ASOS:
Often users will land directly on a single product page from google. This page must be content-rich. Once landing on this page, the user may not even scroll down further. That is why key information must be present and visible above the fold.
Ultimately this is where the user decides whether and what product to purchase. Unlike in a physical store, you aren’t able to touch the product or ask questions to a salesperson. This is why this page must be content-rich, to drive users there in the first place. It must also be highly descriptive and aesthetically pleasing, so the user stays on the page and can make an informed decision. Competition is high, this page must stand out from the rest.
Product Page Layout
Image gallery items are clickable & draggle
Many of your products may have intricate detailing, so with the functionality to zoom in further customers can get a better understanding of the product. This could lead to a decrease in return rates
Without strong and easy to navigate imagery, the chances of converting a visit to that page into a sale dramatically decreases. Without strong imagery, the user is likely to not be comfortable purchasing that product. Angela Roche has written an informative article on the importance of imagery in your eCommerce website, find it here.
On desktop, there are thumbnails easily within the viewport and on mobile, along with any other clutter, these thumbnails have been removed to ensure the maximum size of this image is displayed.
Certain products have finer detail, so with the functionality to zoom in further (on both desktop and mobile), the user is better able to mimic their online shopping experience as if they were in a physical store.
Upsells, cross-sells & recently viewed
Lead customers further around your site with recommend products through upselling and cross-selling relatable items
It is often you go to a site with a specific product in mind. But a lot of users browse and purchase on impulse. With that in mind, maximising the number of products related to the product currently being viewed is likely to result in the user adding additional products to their basket and thus, creating a higher average order value per customer.
Upsells and cross-sells mustn’t be a random set of products, they must be products most similar to the current one. The user wouldn’t usually have landed on the current page by mistake, they would have searched for it (whether that’s from the search results or from the navigation), but the product might not be completely what they want or they might want to pair it with other products.
On large scale eCommerce sites, users might browse through many products before finding the one they like. This product may have been a previous one they viewed, but they are unable to remember the product name. This is where a “recently viewed” feature can be useful, to allow easy navigation back to that particular product and avoid the user leaving the site altogether.
Show more…
Provide as much information as possible for your customer, however, be cautious with the amount of information you are previewing
This relates back to the first point regarding ‘above the fold’ content. Sometimes, the information here isn’t enough. The user might need more detailed information in order to make a sensible decision. Whilst this is an important feature of a single product page, it must not take the focus away from the key information. This is why only partially showing this section before the user clicks or interacts with it, is important from a UX and design perspective.
The ‘Buy’ Section
AJAX Add to cart (page doesn’t reload)
Loading pages through AJAX can increase your site speed, nothing customers enjoy more than speedy processes
Allowing items to be added to the cart through AJAX simply means this process is achieved without reloading the page. This is beneficial in creating a faster and smoother add-to-cart process, where the user will not lose their position on the page. If this functionality is used for this process, then an animation or alert must be displayed so the user can recognise this item has in fact added to the cart.
Delivery information in modal
Avoid unexpected delivery costs at checkout and give your customers the opportunity to calculate their full purchase before reaching their endpoint
A key factor to any eCommerce shopping experience is delivery – and this is true for our favourite ecommerce web design examples. Whilst this does have to be priced competitively, the ease with which this information can be accessed by the user is vital. This is why displaying the delivery information, whether it’s product-specific or site-wide, in a modal/popup on that page is key. If the delivery information is on another page, the user might lose the page they are currently on and not purchase the product.
More Information
Despite all of your efforts ensuring your product listing is fully optimised, the item still may not be right for your consumer for various reason such as model height
Unique information here, specific to the type of product, might be a make or break for some users. Take this example. Despite the imagery being very clear, the user still might struggle to know which size will fit them best. By displaying the height of the model and the size of clothing they are wearing, the user will be able to compare that to their body composition and more accurately choose the best variant for them. This will likely, in turn, minimise the number of returns from sizing errors.
Best Mobile E-Commerce
Etsy:
The majority of your users will land on your website via the homepage and on mobile too. Ensure your design is well considered without leaving customers feeling lost
Etsy is one of our favourite ecommerce web design examples. Their homepage is likely the first page the user lands on. This page is usually viewed on mobile devices. With this being said, it’s arguably the most important page. Your design must be a mobile-first approach. Avoid high bounce rate.
Homepage
61–70% of categories are visually represented
Categories relevant to season/popularity
Leading with product categories can help your customers begin their initial search
Displaying product categories that users are most likely to click on will drive traffic to single product pages and result in a higher chance to convert a user session into a sale. If the user can more easily find the product they are looking for, then there is less chance they will exit the site before they lose interest.
The imagery used on categories & layout
Allowing 6 categories to be above the fold and to have category images presented next to the titles, all within the viewport, enables users to more easily find the product category they are looking for, even without reading the title.
Search and the main navigation appear before the homepage content
Multi-level off-canvas navigation
Using broad terms for top-level categories can in fact help your customers find what they want
The structure of this navigation allows for multiple levels of sub-pages, which are in fact sub-categories. Sometimes product categories can be too specific, where users might not know exactly what they are looking for. Using broad terms for top-level categories, like Mother’s Day, for example, will mean users can more accurately find the subcategory, than the product they’re looking for. You’ll find that this is a theme across our favourite ecommerce web design examples.
Upon clicking to the lower level navigation menu, there are “backlinks” to the previous (or parent) category. This is especially important to avoid the user losing their place within the navigation.
Sticky search bar and navigation
Fixed search bars can help your customers navigate around your site to find their desired product quicker and easier
Mobile pages can often require a lot of scrolling when compared with viewing the site on a desktop. Usually, there is the same amount of information, but instead of this information being displayed horizontally, it’s often “stacked” vertically. This is where “sticky” elements can be appropriate. In this case, it’s a fixed search and navigation bar as you scroll down the page.
It’s only a small change – it’s one you’ll see on a number of our favourite ecommerce web design examples – but it can have a big impact on the overall user experience, especially as the search field is very prominent.
Suggested search
Suggested search can be a great guide for those customers who may not know what they are looking for e.g birthday gifts
Often users come across an eCommerce site in search of products as gifts. They might not know exactly the product or product type, they are looking for. As a result, they might need some inspiration for what to search for. This is where the suggested search comes in. Before typing, the most common search entries are visible and when the user starts to type, these common entries are tailored more towards the content being typed.
General Layout
Can browse products without creating an account
Guest browsing
Forcing customers into creating an account can in fact deter them from completing a purchase
In an ideal world, you want every customer who purchases a product to create an account. This way you can target them with promotional offers and are then more likely to create repeat customers. But, not everyone wants to create an account, especially if they aren’t sure of the products available within the store.
Allowing customers to purchase products, or at least browse them, without creating an account will in fact mean that users are more likely to complete the checkout process. You can of course offer rewards and discounts for guest customers that create an account, as an incentive, but it shouldn’t be forced
Footer has semantic sections with headers
Menu
Ensure your footer is full of all the required information customers expect to see such as FAQ’s
Instinctively people will go to the footer of the website to find key information that does not directly link to the shop. This includes FAQ’s, Help, Contact etc. All of this type of information is displayed in the footer, as it should, within dropdown fields. Not every item here needs to be displayed in a long list, which is why the top-level pages need to only be present without any user interaction.
Currency & Language
If you’re shipping worldwide, ensure your site is optimised for several currencies and languages
This of course depends on the size of the store and the target audience, but as your eCommerce site expands and grows, the demographic of users do too – that’s if you decide to deliver/sell internationally.
If this is the case, then language & currency convertor is required. Most users won’t buy from a site in another language, currency or both.
These settings are displayed in a modal (popup) to avoid cluttering other important elements on the page. They are usually settings that only need to be changed once, so whilst they do need to be easily accessible, they don’t need to be visible after the changes have been made. You can then save these settings to your account (or within your browser) so they do not have to be amended every time you visit a page.