What You Need to Know for an Ecommerce Website Redesign in 2022

If you subscribe to a service from a link on this page, Reeves and Sons Limited may earn a commission. See our ethics statement.

Is this the year you’re going to redesign your ecommerce website? If it’s been a few years since you have, then you need to know that a lot has changed.

It almost goes without saying that a modern ecommerce site has to be designed for mobile first, as most that I work with now get 70% or more of their traffic from mobile devices. However that’s just a starting point—there are a lot of subtleties to consider if you want to your site to convert users into customers.

I’ve consulted on the usability for a wide range of ecommerce sites over the last five years and I’ve worked out the principles that the best ones follow. I’ll take you through eight ways to make sure your site is up to scratch for today’s user, inspired by guidelines from my book Designing Ecommerce Websites.

Avoid long videos on the homepage

The homepage is a place to impress. A lot of websites put money into high-end photography but you might consider using video here to show off products or tell the brand story. After all, video is everywhere now, especially on social media.

When used correctly, video can be great for informing users as well as exciting them. Yet no matter how flashy your video, if the user needs to click play, be prepared for most people to ignore it. In the many user tests I’ve watched, this is the most common behaviour with landing page videos.

Why? At this stage of the user journey, their attention spans are short. Users are more likely to leave the site altogether and bounce, not commit time to watching something unknown.

At the start you should help users move through quickly so stick to short, silent, auto-playing, looping videos. This way you get the information across without them needing to engage deeply. Longer videos can become very useful later in the journey for explaining things like product features, when the user is more interested.

The Prynt site uses a short auto-playing video to show the product in action. There is also an option to watch the full thing with sound.

Don’t fill your homepage with excess content

If you’ve done the hard marketing work in getting users onto your homepage and you’ve created a compelling pitch for your store, what next? There’s lots you could tell them about your company so is now the chance?

Be careful. The longer you make your landing page the more you risk the user switching off or getting confused. Whilst users are comfortable scrolling, they’ll soon stop if the content isn’t directly related to their task.

Whenever you design, stick to the rule of ‘one page, one purpose’. The purpose of this page is to introduce what you sell, and get the user to look for those products.

Do they really need to see your five most recent blog posts, your latest tweets, and a wall of Instagram images? Social posts are particularly unhelpful as you’ve just got users onto your site and clicking these will take them away again.

The more things you put on the page, the more distractions you're giving the user from your main action and the key thing you want them to do. Mobile users tend to have shorter sessions and focus on achieving tasks—extra content won’t help with that.

Make your filters easily accessible

When you have a lot of products, filters are essential for helping users find what they need. The vast majority of ecommerce sites (about 90% of those I’ve studied) have their filters in an overlay on mobile. This makes sense when there isn’t much space available but it does mean users aren’t very likely to actually see them.

As a rule 95% of users don’t change defaults and this applies to opening a filters menu to select specific options. It’s something that has been borne out in the ecommerce user tests I’ve watched too. Finding products on listings pages is one area where the ecommerce browsing experience is superior on desktop.

If your users filter then they’re more likely to find a product that they actually want. Your challenge on mobile is finding space-saving ways of doing so. One method is showing the most relevant filter category in the page with buttons for the options (see Macy's below). Tapping one would load listings with that filter applied, at which point the next most relevant filter would show.

ecommerce redesign - macy's filter options
The Macy’s site brings some filter options into the page as buttons. Burberry makes the filter categories visible on the page.

At the very least make sure your button to reach the full filter menu is obvious. It should also clearly indicate when a filter is applied, so users know when they are seeing a limited set of results.

Redesign your listings for bigger images

Most ecommerce listings pages try to show many products on screen at once. As a result the product images tend to be quite small (it’s why they’re traditionally known as thumbnail images).

Yet the image is a key part of helping the user make a decision about which product to select. In many cases it tells you a lot more than any text can. Products like clothing and furniture rely on the user making a subjective distinction between the different things on offer.

You can even have big images on mobile. Apps like Instagram have led users to expect high quality wherever they are and I've often seen users appreciate this. It doesn't matter where they are on the site, good photography is always loved.

Airbnb have big images that can be scrolled through (left). Zara (right) have full screen width images on their listings.

Of course if you think something can be better sold in a few images then do so. Travel sites often have multiple photos in listings thumbnails with a subtle arrow to scroll through them. Many clothing sites offer the option of showing the product on its own and being worn by a model.

Display product options as buttons

You'll be aware that many products are available in variations such as colour, size, material, or something else. The product details page is where users ultimately make that choice. To make the choice easier you should avoid dumping these options in dropdown menus.

They should be visual buttons to help the user see all options and they should make clear when a variation means a change in price. If the variant changes the look of the product (such as the colour) then selecting it should update the main product image. This leaves the user in no doubt as to what will be ordered.

ecommerce redesign - nike size options
John Lewis (left) have product colours as buttons with visual indicators. Nike (right) expose all size options and disable the sizes that aren’t available.

Another benefit is that by disabling certain buttons, the user can then see at a glance which variants are out of stock. Again, this saves scrolling through a dropdown list of options.

When it comes to size selection it’s best not to have a default size. If there is users could end up adding the default rather than they one they want. This could lead to you getting lots of returns and frustrated customers.

Leave out the share buttons

Facebook, Twitter, Pinterest, Instagram, LinkedIn, Snapchat. Your users probably hang out at one or more of these social networks. So should you give them sharing buttons on your product details pages?

Many ecommerce sites still present those little icons in the hope that it will encourage people to promote their wares around the web. Unfortunately, they’re almost certainly a waste of time.

No-one clicks them. Actually 0.2% of people do, according to one study. Also it might seem like a snippet of code but it comes with lots of extra stuff that slows your page speed down.

The rise of paid ‘influencers’ means the modern user no longer wants to go broadcasting for brands without something in it for them. More people will be willing to share in private with a friend or family member. Links that allow sharing through email or an instant messaging service like WhatsApp are likely to work better.

Integrate payment wallets

Payment wallet services such as PayPal, Apple Pay and Android Pay are on the rise. It’s increasingly common to see them as options on ecommerce checkout flows. In fact they may kill off the standard checkout and possibly the use of credit cards and cash altogether.

ecommerce redesign - amazon pay integration
Tamara Mellon (left) have the option of Apple Pay, PayPal, and Amazon Pay in their basket and checkout. Gucci offer the ability to jump to PayPal from the ‘add to bag’ notification.

Entering a password, fingerprint, or face scan and then being able to immediately complete checkout is so much more convenient than filling out forms. With ecommerce dominated by mobile, offering easy payment that doesn’t involve fiddly form-filling is essential.

The sheer ease of use should encourage more users to complete checkout with you. There’s also a security benefit as users will likely feel safer with a wallet as intermediary if they haven’t heard of your brand before.

Across the user tests I’ve run on checkout flows, I regularly hear comments like “I much prefer the option of using PayPal” and ”I’m very security conscious and will only pay using PayPal“. PayPal is currently well known but when deciding which to use go with your site's most popular countries and devices.

Allow users to collect

A growing number of ecommerce websites offer users the ability to collect their order rather than have it delivered. It’s good for users who aren’t at home very often and also can’t get delivery to their place of work. Giving this option will only increase the number of users who can buy from you.

The easiest (and often the best) approach is to add collection as an alternative to delivery in the checkout. Ask the user to enter their location and show them options for where they can pick up their order. It’s also important that you show the pick up location’s opening hours—this data often comes from integrating with a delivery company.

A click and collect window from the ASOS checkout, allowing the user to choose which convenience store to send their delivery to.

The more complex approach is for you to integrate the option to collect into every product details page on the site. This makes sense if you have bricks and mortar stores as it allows stock checking in specific shops.

However problems can arise when users have multiple products in their order. If they aren’t careful they can end up with some products for delivery and some for collection (a ‘mixed’ basket). To avoid this the earliest I recommend letting the user specify collection or delivery is at the basket stage so it applies to the whole order.

More ecommerce advice

That was eight ways to make sure your ecommerce site is redesigned to be fit for 2020 and beyond. Of course there's more than that to consider when redesigning a full ecommerce website. In fact I’ve written a book containing 66 guidelines for designing online stores that convert, based on 10 years of UX design experience.

The book is called Designing Ecommerce Websites, it’s available on Amazon in a variety of formats including paperback and Kindle. Or you can get hold of the digital PDF version on my site, which includes all the illustrations from the print book. You can also get 15% off the digital version for a limited time with the promo code PLATFORMS.

Comments 0 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

Rating *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shopify light modal wide - this exclussive deal one dollar 3 months