If you have an e-commerce website, it means you’re selling something online. This doesn’t have to be a physical product, but it could be a service. Whatever you’re selling, the purpose of your website is to showcase what you’re selling and get as many people as possible to buy it!
Unfortunately, not everyone visiting your website is going to instantly make a purchase and they are going to be looking around the site for a while to influence their decision either way. So, you’re going to want to optimise your ecommerce website so that it’s designed to convert.
We’ve put together this article to help you find ways of improving your conversion rate of your ecommerce website with these essential UX elements.
What is UX?
First of all, let’s introduce what UX is exactly, because it’s something that’s misunderstood by many… including designers!
UX stands for user experience and it’s the process that design teams use to create meaningful and relevant experiences to users. It’s essentially anything that affects the user’s interaction with a product. And in this case, the “product” we’re referring to is the ecommerce website.
If you’d like to delve further into what UX is and what UX design is, then we’ve written an article particularly on that.
If you’re looking to explore more just about ecommerce UX, then please read on for our essential UX elements for ecommerce websites!
The User Journey on an Ecommerce Website
Essentially, the user journey of each person interacting with an e-commerce website goes through the same process. Your challenge is to make each step a wonderful experience for the user so that they keep progressing through the journey.
This user journey includes:
- Website discovery
- Product search/Browsing
- Product page
- Cart
- Checkout
- Confirmation
We cover each of these stages and give you tips on how you can improve the UX at each step of this ecommerce user journey.
Stage 1: Website Discovery
Many people skip this part because they only concentrate on selling. But how do people find your website in the first place? And if they do, what should their first impression be?
Apparently it takes just about 0.05 seconds for people to form an opinion of a website! We’re clearly very judgy people! But that’s quite a scary statistic. Therefore, first impressions absolutely will count.
Great UI
UI stands for User Interface and refers to the overall look and feel of the design. Good UI should always take into account of the UX. Your ecommerce website should have great UI that’s branded up accordingly to the company’s brand identity and be simple and clear to navigate.
Hick’s Law is a concept which states that the more options a person has, the longer they will take to choose. Now, if good UX states that you should make it as easy as possible for the user to find their information and make an informed decision, then you need to narrow down the number of choices for them.
So, great UI should include a minimalistic feel with clear call-to-action buttons, and landing pages dedicated to each major category/product. These are also fantastic for SEO.
Homepage
Since your homepage is more than likely the first page a user will see, you need to make sure that it not only looks great, but easily shows the information they’re looking for.
A visible search bar, a couple of promotions and a visible value proposition at the front and centre is a great start. The below is an idea of how to lay out your homepage for your ecommerce website.
Source: coredna.com
Easy Navigation
Great ecommerce UX has fantastic navigation, that makes it super easy for users to find exactly what they want. They should be able to browse different product categories or filter out what they want.
These menus should be found in the header and the footer so that the user can access them at different stages of their journey.
Remember Hick’s Law though!
Product Search
Add a search bar
Search bars are one of the most important components for any e-commerce website. When a user lands on your site, they typically have a specific item or service in mind and will use the search bar to find what they’re looking for. According to research done by Invesp, 60% of users shop online with intent – they’re not impulsive buyers.
The size of your search bar should be small enough that users don’t get overwhelmed with results yet large enough so that they can easily read what’s being searched for without having to squint at tiny text (or worse: misspellings). We think it’s best to include a long bar next to a magnifying glass, to make it clear what it’s for.
Don’t forget about the search results though! We’ve seen many developers add a search bar and then forget to customise the results pages and they’re a mess! Ensure that the results pages display the results clearly.
Filters
Filters are another way of improving the UX of product search, especially if you have a site with several products. You can include the usual filters such as colour and size etc., but if you really delve deep into who your target audience is, you can provide some much more personalised filter options.
Adding a price filter is usually very popular, so people can immediately find products that they can afford, rather than being disappointed when they see the price.
We love ASOS’ filter system:
Product Page
Use beautiful product photos (and video!)
Product photos tell a story and create an emotional connection with the product. The best way to do this is to have multiple photos of the item from all angles, so that customers can see exactly what they’re getting. Definitely get a professional photographer to shoot your products, no matter how good you think you are at doing it! Because there’s a huge difference between the output and in turn, a big difference in sales.
Larry Kim, an infamous digital marketer, blogged that video actually makes users 85% more likely to purchase a product! So, if you can get videos of your products or video testimonials, then this is a great idea. People connect to videos as they feel more “real” and get a better vibe and build more trust.
However, just ensure that you don’t put too much content on your page or upload these photos/videos without optimising them properly or you will end up with a slow website and that’s definitely not good for UX!
Include detailed product descriptions.
While the product image is essential, it’s not enough to simply show your product. You need to provide the full story behind what you’re selling, including details about its features and benefits.
A great way to do this is by providing a detailed description of the item you’re selling. This could include:
- A description of what the product is (e.g., “This is a red medium t-shirt with black sleeves”).
- A list of all relevant features (e.g., “The shirt has four pockets on each side”).
- A list of all relevant benefits for customers when buying this item (e.g., “Sleek pockets allow you to store things in them”).
Include shipping information and returns process
Your ecommerce website footer should show this information, but it’s worth putting on the individual product pages too. The more transparent you are about your processes, the more confident people will be about making a purchase.
Add Trust Indicators
Adding to the above about being transparent about everything on your site, you build trust in your brand. You can also do this by adding in ratings, reviews and other social proof.
Testimonials from happy customers can be a great way to add credibility to your website. If you have clients who are willing to share their experiences with your business, simply ask them for permission to use their testimonials on your site. You can even include a form where people can submit their own testimonials if they don’t want their full name published on the site.
You can try plugging in a widget from other well-known review platforms such as Trustpilot. Their reputation alone will add validity to your brand if you are showing the reviews directly from their site.
More than 70% of users won’t make a purchase until they’ve read a review, and people are heavily influenced by others. There are lots of social proof plugins that you can use on a WooCommerce site and they often pop up with confirmation that someone just purchased a product in real time.
Checkout
Have a clear order summary
Another very helpful stage is the order summary page, as this allows the user to easily review everything they’ve purchased, how much it costs and if they want to make any changes.
Again, this means that there are no surprises at checkout.
Provide multiple payment options and make checkout easy
The last thing you want to do is to put your customer off purchasing right at the last stage, so keep the checkout simple and clear. No offers popping up or distractions on the page.
There are a number of payment options available to e-commerce websites, including:
- Credit cards (Visa, Mastercard, American Express, etc.)
- PayPal
- Apple Pay
- Google Wallet
- Bitcoin and other cryptocurrencies
It’s important to understand what type of payment your target audience prefers to use as it’s all about improving their user journey. However, having multiple checkout options is a often a good idea so that users can select the one they prefer and check out swiftly.
Let users checkout as a guest
Veeqo list the lack of a guest checkout as their number one reason for lack of UX conversions. Customers do not necessarily want to be forced to join another mailing list and have yet another account at an ecommerce website, and so there should definitely be a guest checkout option.
Again, this removes the friction of being forced to put in all their extra details to be able to complete the purchase.
However, a nice thing to do is to add a checkbox so they can easily create an account after purchasing so that they don’t have to fill in all their information again if they do want to revisit the site.
Order Confirmation
Just like with an order summary, it’s important that you include a clear order confirmation screen with all the details on it, so that users can quickly check they didn’t miss anything out or make a mistake. This allows for quick action should they need to amend anything.
Once an order is made, a lot goes on behind the scenes to get it ready; for example, you may have the order connected to a warehouse, who finds the product, arranges shipping with a courier etc., and so it’s often too late to cancel or amend the order after this process has started.
Email Updates
Good UX includes the post-sale communication. Keep your buyer up to date with the status of their order by explaining where it’s at in the shipping journey. Provide them with tracking updates and other actions they can take in the meantime, along with contact information should they wish to change anything.
Additional Ecommerce UX Elements
We arranged the above UX tips for an ecommerce website in categories based on the stage of the user journey, but we thought we’d include a few more tips that are more generalised.
UX (user experience) on mobile phones
According to Business Insider’s Intelligence report on mobile ecommerce shopping trends of 2022, over 40% of all ecommerce revenue comes from mobile phones. This may be considerably more for your website and you will need to check your data in Google Analytics to compare.
But it definitely means that your website should be mobile-friendly. This also doesn’t mean just having a responsive website design, but mobile UX should have specifically been taken into account and more than likely a specific separate mobile design have been undertaken to maximise the user journey on a mobile.
FAQ page
An FAQ page is a great way to just answer your customers’ most common questions. Not only does it help increase the chances of a sale because their questions will have been answered for them right there on the site, but it also saves you customer service time! You may have had to answer an email, live chat message or a phone call to answer this customer’s question.
Display your FAQ page on the footer of your ecommerce website so it’s available on each page, but also on the relevant product pages.
Contact page
It’s super frustrating for a user if they cannot get in touch with an ecommerce company. It also makes the company look a bit shady if there are not many contact options. With so many scams out there at the moment, companies need to do what they can to show they’re a legitimate business.
So, have a contact page with multiple ways to get in touch, including links to social media channels. And be responsive!