Ending up losing $1.42 trillion because of UX gaps is a sad situation if you come to think of the elaborate opportunity any business holds—and this is why we spoke to several eCommerce founders to figure out what they’d recommend.
Alongside, we also feature here our insights having worked on 500+ businesses across the world in 5 years—read on to discover more:
10 eCommerce UX Trends to Watch Out For In 2024
If you already haven’t, an eCommerce UX audit will tell you what to reach out for as your optimize your storefront—for 2024, here are some of the top ways you can transform your website UX for the better:
- Personalization in content & layouts through AI will rule eCommerce UX in 2024 - Fabrity
- Data-driven design informed by user preferences & behavior will be go-to for greater user satisfaction - Pepper Square
- Optimizing for accessibility based on guidelines by the World Wide Web (W3) Consortium will be a key element - UX Collective
- A visually rich website with limited yet bold text is what eCommerce businesses will have to focus on - Propelrr
- Intuitive search filters that will help shoppers refine their search in a more detailed way will become even more important - Arounda
- Use strategic data capture to improve shopper satisfaction and gather feedback simultaneously - InfoTrust
- The need to use microinteractions to increase engagement & satisfaction will emerge as even more important - Wix
- User-centered copy featuring key information that will resonate with the shopper, will become vital - Shopify
- Interactive product displays like hover effects and 360° product views will create more shopper satisfaction - Web Circle
- Contextual user experiences based on real-time data reading like weather will take center stage - Rivulet Digital
13 eCommerce Leaders Share How They Provide Amazing UX
What makes a good online customer experience is a host of factors that help shoppers discover, ask, reconfirm and finally make relevant purchase decisions:
1. Checkout process that’s trustworthy
Research says that at least 18% of all checkout processes face abortion because shoppers find them too complicated—add this to the many other reasons why shoppers abandon their carts, and you have a big problem to fix.
Here’s Kate Ross, Hair & Beauty Specialist, Irresistible Me sharing on her experience with eCommerce checkout UX:
“We noticed some customers were leaving their carts without buying, so we made the checkout smoother and faster. And we noticed more people actually finishing their purchases, which was great for our sales. One big piece of advice is to listen to your customers. We always pay attention to their feedback.”
Skincare & makeup brand Beauty Pie offers a free-flowing checkout experience by featuring multiple checkout CTAs and keeping their forms super functional:
If you already haven’t, feature the following in your eCommerce checkout UX:
- Make password creation easy (especially if you’re asking shoppers to create an account—best though is to offer a guest checkout option)
- Instead of citing “estimated shipping speed” (and citing the number of days as a window), use “estimated delivery date” for greater transparency
- Use Luhn validation for credit card fields (this way mistyping won’t go unnoticed and shoppers won’t have to submit the form, only to be told to retype, which often leads to checkout abandonment)
2. Site loading at lightning speed
One of the prime markers Google uses for its first page rankings is page speed—typically websites that appear on the first page of SERPs have page speed of about 1.65 seconds.
As for shoppers, 80% say a slow website is far more frustrating than a website that’s temporarily down—that’s how important a fast-loading site is as far as the best eCommerce UX is concerned.
Brian Devening, Owner, Snubbies, reflects:
“We prioritize website speed and ensure it is mobile responsive as most of our customers shop using their phones.”
James Wilkinson, CEO, Balance One opines:
“Experiencing slow-loading web pages can seem like an eternity; a fact substantiated by a Google study – 53% of mobile users abandon sites taking longer than three seconds to load.”
To load your eCommerce website faster:
- Aim to load your page(s) within 2 seconds of the associated link being clicked
- To scale images, use formats like WebP and JPEG200 only
- Use one-line descriptions while offering product recommendations on the homepage or landing page—here’s what Ikea does to highlight certain category recommendations:
- Remove redundant and additional code
- Avoid sliders on your homepage and stick to banners instead
3. Grab attention through great “search” function
It’s one thing to have shoppers randomly move through different pages of your eCommerce website—and quite another when they want to “search” if your store has what they have in mind.
The crucial difference here is intent, which means if your search is comprehensive & indicative enough, these shoppers are more likely to convert.
Alex Horsman, Head of Marketing, Ammo shares:
“Our practical user interface makes Ammo.com user-friendly and easy to navigate. Ammo.com has a clean design and intuitive layout, which helps customers find what they want in seconds. Our search bar and product categories help users pinpoint their desired products, speeding up the purchase process.”
eCommerce brand Nordstrom boldly call out their search function—and when a shopper types in a keyword, shows up both popular categories and suggestions to ease choosing:
To make your eCommerce UX search & categorization functions shine through, do the following:
- Always add hint text to your search bar design (for example “what are you looking for today?”)
- Make your predictive queries span various categories (and autocorrect fetch the most relevant ones)
- Offer a “trending searches” prompt the moment a shopper clicks the search bar (this is especially helpful for new shoppers)
- For product categories to be noticed, the sweet number is 7—but even if you have a number of them, let it not cross 12
- Add synonyms for uncommon keywords to show relevant results and sell more
- Avoid showing “No results” to your shoppers. To do this, you can add customized recommendations and content suggestions on your empty search results page
- Autocorrect typos to avoid returning empty search results, removing this friction from the shopping experience entirely
4. Convince through compelling product descriptions
All great product info has one thing in common: they tell a story that the shopper can relate to and make a purchase decision.
Here’s what Guillaume Drew, Founder & CEO, Or & Zon opines about the best eCommerce user experience descriptions can create:
“We have categorically organized our products, offered detailed descriptions encompassing the product's history, the artisan behind it, and our sustainable and ethical production procedures.”
Normand Chevrette, CEO, CME Corp, on the other hand, says:
“When we introduced a high-demand ventilator model, we didn't just display its technical specifications. We went further by incorporating user-generated reviews and showcasing firsthand experiences from medical professionals who had utilized the equipment in diverse scenarios.”
Our eCommerce client Hardwood Lumber Co. is known for the superlative UX they create through product descriptions that are high on information—so that shoppers know what they’re getting into:
For your product description UX to be on point:
- Offer a snapshot of information right under the product name (you can always feature a “more details” section as a link that can be expanded or have a separate section later labeled “product information”)
- Flank written text with labeled icons (this can highlight key elements like “sustainably made,” “money back guarantee” and “free shipping")
- Use an accordion style information display (that can either be expanded and contracted through “+” and “–” symbols or what Ikea does with an arrow as a visual cue)
5. Create an ‘experience’ through images & videos
In the absence of an in-store experience and real-time customer personnel, shoppers fall back on visuals to make sense of the brand & its offerings—concurrently, bad visuals represent one of the most pressing UX problems.
Guillaume Drew, Founder & CEO, Or & Zon, opines:
“We added videos showing the creation process of each product, directly from the artisan’s workshop. This not only enriched the authenticity of the products but also gave customers an emotional connection with the item they were purchasing. The result was a significant 35% increase in our conversion rates within six months”
On the other hand, Gareth Newman, Founder, Blakely Clothing states:
“When we launch a new collection, the items are often designed to be worn together, so through our imagery, we send our customers on a journey. In turn, through cross-selling on product pages, cart level and through retargeting, we see an increase in our average order value month on month.”
eCommerce brand Fenty Beauty features boldly labeled images and for good measure, also throw in product page videos that send out reassuring messages to the target audience:
To strengthen the UX around images & videos you use:
- Place a video within the image gallery (this improves discoverability—just ensure it’s not a long one and is ideally in GIF format covering the most vital parts of showing the product in use)
- Limit the number of images to not more than 7 (always show the count of images against the total number as shoppers scroll)
- Consider placing a linked text to the Youtube Video right below the product name (this can be effective if you’re dealing with a slow loading website)
6. Cut out friction through seamless omnichannel
More than 60% of shoppers tap into several channels of a brand to access information, seek support and buy products. This makes a seamless omnichannel experience an instant necessity for conversions.
Christy Pyrz, CMO, Paradigm Peptides says:
“Many businesses make the mistake of simply focusing on their eCommerce website when considering the user-experience but in reality it begins earlier, and that is why we focus on creating a seamless omnichannel experience. We make certain that all of our access areas have identical messaging, use similar graphics and colors, utilize the same link pathways, and access the desired landing pages.”
eCommerce brand Warby Parker is known for their omnichannel flex—be it through their virtual try-ons, home trials or UX created through pop-up shops and shop-in-shops:
To reduce omnichannel friction and create the best eCommerce UX:
- Offer “shop through the app” prompts when a shopper is navigating your site or social media (apps typically reduce friction in the checkout process)
- Offer “We noticed you like…” product prompts when shoppers switch channels (this ensures continuity of experience)
- Feature a scannable code with the product shipment to offer suggestions, product recommendations (and make sure to flank this code with relevant text like “Scan for tips & suggestions”)
- Make your layouts recognizable across all channels (be it visual elements, typography or the brand iconography you use)
- Use a chatbot that quickly picks up on customer details & past interactions (to reduce asking shoppers the same questions again)
7. Fall back on one-page checkout
Talk about checkout friction, and the instant answer seems to be one-page checkout—replete with auto-suggestions and preferred payment methods.
Oleg Segal, CEO & Co-Founder, Deala says:
“Initially, our users had to navigate multiple pages before securing a deal. Recognizing this friction point, we streamlined the process down to one simple page. Following this change, we witnessed a dramatic 25% uplift in conversions.The single piece of advice I would like to share with fellow store owners is to keep the customer in mind at all times. Every design choice, every feature addition should ultimately enhance the customer's journey.”
Beauty brand Sephora’s one-page checkout flows easily and offers a “save & continue” button prompt after each major section:
For your one-page checkout UX to be top notch:
- Feature a progress bar that covers all the sections on the page (this way when a shopper finishes one section the progress bar can proceed and color code the covered section differently)
- Use different checkout CTAs to target different audiences (Nike, for example, has different CTAs for guests, members and those who use PayPal for payments)
- Feature neat, separate layouts for form filling, cart summary, shipping & delivery details and trust seals
For more ideas, read: The Best One Page Checkout Examples in eCommerce (2024 Update)
8. Prioritize post-purchase ease
Once a sale is made, many eCommerce businesses think their job is over—the truth is it’s just begun. In fact, a poor post-purchase experience essentially means your customer retention & LTV will suffer.
This is what Gareth Newman, Founder, Blakely Clothing has to tell us:
“Building trust with our customers is huge, first time buyers are usually testing the water but once they have purchased and our post-purchase journey begins we often see return customers purchasing more expensive items and adding more to their bag. Successful businesses don’t just sell a product, they sell a brand, and the creators of those brands who live its ethos are the ones that succeed.”
For great post purchase eCommerce UX, ensure to do the following:
- Segment your emails with care (make use of all the data you generate to target more specifically—this invariably leads to better conversions)
- Highlight your FAQ page link across product pages and emails for easy reference (and come up with a separate & detailed FAQ page if you already haven’t)
Fashion brand ASOS features a separate FAQ page and offers up topics as neat categories for easy self-help:
- Prioritize informational content as much as transactional content to make shoppers feel supported (use
popular marketing mediums like email and WhatsApp to convey)
9. Make navigation a joy
No matter where the shopper is in their customer journey, they’ll come back to shop with you time and again only if they experience ease in moving through your storefront.
And this is why great navigation is a facet of UX you can’t possibly skip out on.
Dan Dillon, CEO & Chairman, CleanItSupply, shares:
“We constantly update our website to make it user-friendly and intuitive, ensuring ease of navigation and quick access to information. This involves continuously refining features, design, and layout based on customer feedback and behavior analytics.”
Burt’s Bees is an iconic eCommerce brand that takes its navigation seriously—whether it’s about their primary menu being clear to even first-time shoppers or category highlights that target different kinds of shoppers:
Here are a few non-negotiable UX steps you have to incorporate for seamless navigation:
- Limit the number of high-level categories in the horizontal navigation panel at the top of the site
- Feature easily relatable sub-categories under each category
- Color code any category (like “sale” or “gift guide”) that you want more shoppers to notice & convert from
- Feature categories and sub-categories based on user intent (for example, if you’ve seen a fair amount of conversions come from bundles, feature a “bundle & save” option in the primary menu)
- Opt for a sidebar menu if you have hundreds of products (combine this with a relevantly labeled hamburger menu)
- Bring in high-level categories in a separate section after the first fold (Wayfair, for example, showcases a “shop by department” section, which can attract those who haven’t stopped to explore what’s within the hamburger menu)
- Ensure strong visual cues to make navigation easy on the eyes—here’s an example from Chewy:
10. Prioritize responsive design
Going by research, by 2024, the US alone will have 187 million active mobile shoppers. And this means just one thing: not designing specifically for mobile will make any eCommerce business lose out on a WHOLE LOT.
In connection to this, Brian Devening, Owner & Founder, Snubbies tells us:
“We prioritize website speed and ensure it is mobile responsive as most of our customers shop using their phones. Additionally, we utilize Swiftype's site search functionality to provide quick and precise search results, further enhancing the user experience.”
Here’s what Lisa Richards, CEO, The Candida Diet shares with us:
“Our website was not sufficiently mobile-friendly. We commenced a systematic overhaul--transforming product categories into highly navigable entities – and reformed the checkout process to be encapsulated within a single-page layout.”
Here are a few responsive design UX principles that will make your website convert better:
- Highlight the search bar above the hero image section (keep it centrally aligned and make all other ambient features smaller)
Here’s a great example from Kohl’s mobile site:
- Offer a visual cue that a section is following the one the shopper is currently looking at
Check how nutrition brand Golde does it by using a different color to alert the shopper:
- Consider using a slideout menu (especially if you have several categories and products; keep an “X” button handy for shoppers to close out the expanded menu whenever necessary)
11. Use clever visual hierarchy
Why is it that when you visit a UX site you’re drawn to certain areas of the page? It’s because the site uses a visual hierarchy.
The main reason you should use a visual hierarchy is to make it easy for your visitors to read and understand your web pages.
Take a look at how odor eliminator brand Poopourri aces visual hierarchy in this example:
To get your visual hierarchy UX sorted:
- Ensure there’s enough contrast between two content blocks
- Start any page with the most eye-catching visual or offer
- Start your homepage with transactional product information and then move into more non-transactional brand information & imagery
12. Drive authenticity through UGC
When looking for information about a product, 51% of US consumers trust user-generated content more than other information on a company website.
User-generated content, or UGC, is an excellent way to make your site seem genuine and for new visitors to understand how regulars feel about your products.
Rhian Stuart, Head of Digital, Blakely Clothing tells us:
"We’re seeing that UGC drives interactions and conversions on a much larger scale than branded content does in both paid and organic marketing channels. Being able to incorporate the customer into the branding and allowing them to tell their story of the brand is a much bigger driver than we have ever seen before.."
Beauty brand Deciem, for example, goes into in-depth reviews (which also concurrently drives the legitimacy of the storefront):
To create the best eCommerce UX through UGC, ensure:
- To bring in several relevant filters in the reviews section
- Pull up a snippet from a positive review and showcase it in the first fold
- Feature a “social wall” right above reviews for shoppers to click & go to your Insta/FB feed
13. Gather feedback (but don’t be intrusive)
Though customer feedback is crucial for business success, only 40% consider leaving reviews for negative experiences as against 67% for positive ones. The antidote? Feature and prioritize user feedback that’s less flattering—it’s one of the evergreen eCommerce UX trends that’ll help you earn customer trust.
Ilia Mundut, Founder & CEO, Hefty Berry opines:
“Regularly solicit feedback through surveys, customer support interactions, and user behavior analytics. This will help in understanding pain points, identifying areas for improvement, and making informed decisions to enhance UX.”
Matt Little, Owner/Founder, Festoon House says:
“Put simplicity and quickness first. Oh, and pay attention to what your consumers have to say—feedback is invaluable. They'll tell you what works and what they don't like.”
Home Depot features a sticky feedback button, which when clicked reveals multiple aspects of UX that a shopper can leave feedback on:
To make the UX around feedback more compelling, consider:
- Using a sticky feedback button that can then expand into a form (feature no more than 5 questions to avoid frustration in shoppers)
- Feature a feedback pop-up in the order confirmation page (this is immediate so ensure you ask simple questions like “What did you like about shopping with us?” and “What could be better in your shopping experience?” and offer multi-choice answers)
14. Live chat that feels (almost) human
By now it’s a known fact that issues resolved on live chat have a 13 times faster resolution rate as compared to emails and online form submissions.
Lisa Richards, CEO, The Candida Diet elaborates:
“A live chat feature facilitated immediate customer service assistance: a resourceful aid offering swift, direct interaction. Simultaneously, we observed a significant decline in bounce rates; notably, our mobile users—previously at an alarming 76% bounce rate—improved drastically to just 49% within six months of implementing changes.”
Jewelry brand Brilliant Earth collects a message on the requirement, email ID and nature of query before an actual executive begins the chat so that the shopper doesn’t have to repeat these details:
Thinking of optimizing UX through live chat—here are a few steps we’ve seen work for clients:
- Don’t just reserve live chat for the product pages (we’ve seen bringing it into the homepage has both improved engagement & conversions for clients)
- Feature live chat links in the header and footer (don’t just depend on a floating button to draw attention)
- Use a clear label like “Chat with Us” instead of “Ask us Questions” (also when the shopper clicks the live chat button, give them a choice to continue chatting with the bot or transferring their query to a human representative—if there’s a delay in human response, convey that)
15. Quick coupon search for the best deals
Did you know shoppers who use coupons end up spending 24% more than those who don’t?
So, like it or not, how you do coupons on your storefront has everything to do with UX.
Oleg Segal, CEO & Co-Founder, Deala says:
“One particular measure we have taken is to simplify the coupon hunting process. We developed an intuitive search function and categorized brands, enabling users to quickly locate their desired coupons, resulting in reduced bounce rates and increased customer retention.”
Wayfair clearly features their discounts, deals and coupon code information for shoppers to get adequate direction:
To ace coupon search UX, here are a few things you could do:
- Feature an expandable section labeled “available coupons” or “available promotions” in your mini cart, cart page and checkout page
- Open your category page with a category-specific discount code & associated discount %
- Use the notification bar to highlight “discount applied at checkout—no code required” deals
5 UX Mistakes That Invariably Impact Conversions
We’ve come across several UX design mistakes that eCommerce businesses generally make across our free audit sessions, but here are 5 of the most glaring ones:
1. Too many pop-ups
Even if you have the best discounts or gated content, too many pop-ups can become both distracting and annoying. However, if you want shoppers to take note of an offer before they lose interest, using the time delay approach may help. In this case, don’t show a pop-up before 3 to 5 seconds after a shopper has landed on your website.
2. Lack of navigational breadcrumbs
Without breadcrumbs, your shoppers will have a tough time orienting themselves within your storefront. Showcase path based breadcrumbs across your site to make sure shoppers know where to go back to.
Notice how Everlane leaves breadcrumbs covering the high-level category and sub-category (“women” and “t-shirts”) for shoppers’ ease.
3. Lack of or too much product information
The problem of too little or too much is a real one when it comes to UX, especially around product descriptions.
To avoid this, focus on:
- What the product features as ingredients
- Why it would be good to use it
- How to use it
- What to use it with
4. Poor mobile browsing experience
While a great desktop browsing experience is the ultimate necessity for eCommerce shoppers, it’s a bad idea to forget that a little over 43% sales come from mCommerce.
So responsive design that features key breakpoints is a good idea—with screen sizes ranging from small to large:
Small: lesser than 640 px
Medium: 641 px to 1007 px
Large: 1008 px and more
5. Super complicated checkout
Find, buy, get out—that’s how easily shoppers want to checkout.
But if you’re giving them grief over lack of shipping cost transparency, excruciatingly long forms or even lack of popular payment methods, your conversions are sure to suffer.
Which leads us to share what some driven eCommerce founders are doing to sort out their website UX scene.
Crucial UX Parameters For a Successful eCommerce Store
To tailor UX effectively for shoppers to have a superlative experience on your eCommerce store, here are are some parameters you’ll have to look into:
UX begins even before a shopper lands up on your website—so ensuring the keywords or phrases they search for result in pages they want to actually visit is crucial to engagement & conversions. And once they’re on the site, offering them an integrated navigation as well as detailed search functionality will create the best eCommerce UX.
A visually appealing store complete with products getting the highlight and use cases showing up as desirable, is crucial to conversions & repeat customers in eCommerce.
How easy is it to find bestsellers? How quickly can someone access customer support? How little effort does one need to make to view recently browsed products? The simpler the user experience, the greater the chances for conversions.
How quickly does your site load? How easy is it to view the ongoing offers? How easy is it to understand the text that you’ve displayed across the site? Without functionality, even a gorgeous eCommerce store won’t turn in the conversions.
Does the store stand apart in the category it does business in? Will a shopper be able to tell your brand apart from its competitors? Is it distinctly recognizable on social media? To assess the uniqueness component of your eCommerce UX, these are some questions you need to ask.
This parameter is crucial in ensuring shoppers want to continue discovering products on your site and in the best case scenario, converting too. Assurance can come from various angles: product content, social proof, trust signals like popular payment methods etc.
To make shoppers stay back on your site, you have to subtly convey that you have what they’re looking for, even if they don’t immediately find it—this includes recommendations they’ll likely browse, links to helpful pages like “bundle & save” and “holiday guide,” more ways to view a product (read: 360 view or even a video.)
3 Steps to Create a Customer-First Website Experience
Just optimizing your on-site isn’t enough. You also need to use data, understand how shoppers are responding to your website, and use these insights to improve your site. By continuously optimizing your customer experience, you can increase engagement, increase conversions, and boost repeat purchases.
Here are 3 steps you can follow to measure, understand, and optimize your customer experience.
Step 1: Tap into analytics to understand areas of improvement
Your analytics has a lot of information about your site. Use it to identify areas of improvement, from drop-off touchpoints to low-selling products. You can also use your heatmaps along with your analytics to track the different metrics important to you.
Our suite of tools includes click tracking, funnel analytics, and heatmaps, built to help merchants make data-driven decisions easily.
Step 2: Collect feedback from customers post-purchase
You can also understand how customers perceive your e-commerce store by asking them about it.
Conduct surveys after a customer shops from you to get feedback from them. This feedback will help you understand what works within your site, what's causing frustration for them, and whether they'd recommend your store to others. The purchasing experience will be fresh in your customers' minds and they'd be more honest with their responses.
You can then collate this feedback and use it to optimize your on-site experience, meeting your customers' needs and expectations better.
Step 3: Use these insights to optimize your strategy
Use the insights from your analytics and the feedback you've collected to make changes to your site. These insights will be backed by data so the optimizations you make will have a better impact. You'll be able to see better engagement and conversions through them.
You can repeat this process every few months to maximize your growth.
GET A FREE UX AUDIT OF YOUR STORE:
98% of visitors who visit an eCommerce site—drop off without buying anything.
Why: user experience issues that cause friction for visitors.
And this is the problem Convertcart solves.
We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversions.
How we can help you:
Our conversion experts can audit your site—identify UX issues, and suggest changes to improve conversions.