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:
13 eCommerce Leaders Share How They Provide Amazing UX
5 UX Mistakes That Invariably Impact ConversionsÂ
Crucial UX Parameters For a Successful eCommerce Store
3 Steps to Create a Customer-First Website Experience
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.â
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.Â
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.â
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
90% of shoppers say that the most crucial element they consider while buying is a productâs photos. Similarly, 84% claim that a brandâs video has had a direct influence on their purchase decisions.Â
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.â
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 AOV 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.Â
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. 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.â
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.
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.Â
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)
You might also like to read: 20 Solid Ways To Recover BigCommerce Abandoned Carts
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:Â
Convenience
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.Â
AestheticsÂ
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.Â
Simplicity
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.Â
Functionality
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.Â
Uniqueness
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.Â
Assurance
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.Â
Options
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.
Related reading:
18 UX hacks to reduce cognitive load in eCommerce
Product page UX: 22 data-backed secrets for high conversions
Simplify online shopping for senior citizens: 11 UX ideas
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.Â