“We innovate by starting with the customer and working backwards. The focus is not the product, but the customer.”

Said Jeff Bezos when describing Amazon’s approach to user experience.

'We innovate by starting with the customer and working backwards. The focus is not the product, but the customer' - Jeff Bezos #ecommerce #UX #ConversionRate Click To Tweet

There’s a lot of wisdom in that statement. In the ecommerce world, it’s easy to fall into the trap of focusing on the product at the expense of the customer. I’d bet that most retailers have been guilty of doing so at some point.

All too often, in the drive for higher conversion rates and more revenue, retailers make optimization changes geared towards short-term gains, without fully considering the individuals they’re selling to. In the short-run, this might work. But in the long-term, it’s a colossal mistake.

UX testing and optimization is fundamentally about creating an experience that meets the needs of your site’s visitors. Done properly, UX aligns fully with conversion-focused ecommerce optimization, improving the quality of the customer journey while increasing your bottom line.

In this post, we’re going to provide you with a full roadmap for optimizing the user experience of your online store, covering everything from site speed to product page descriptions.

Here is the list of what you can find in this article:
What Is Ecommerce UX?
Why Is Ecommerce UX Important?
What Are the Most Important Ecommerce UX Metrics?
What Ecommerce Platforms Have the Best UX?
How to Improve Your Ecommerce UX (User Experience): 11 Tips
1. Collect Direct Customer Feedback
2. Improve Your Site Speed
3. Build Intuitive Navigation and Search
4. Distinguish Between Mobile and Desktop
5. Simplify Checkout Forms
6. Use a Customer-Centric Information Layout for Product Pages
7. Optimize for the Whole Sales Funnel
8. Use Wireframes and Prototypes
9. Alert Customers to Offers, Discounts, and Freebies
10. Recreate an In-Store Shopping Experience
11. Run Consistent, Long-Term Tests
Summing Up UX Tips for Ecommerce
Sound good? Let’s dig in.

What Is Ecommerce UX?

The term “user experience” refers to the overall experience that customers have when they visit your website. Simple enough, right?

Crucially, user experience encompasses the particular set of feelings – convenience, ease, satisfaction, etc. – that users have when they interact with your store. A “good” user experience is one in which a customer can fulfil their requirements – whether implicit or explicit – in as easy and enjoyable a manner as possible.

User experience optimization is not the same as conversion-rate optimization. UX optimization centers around metrics like satisfaction, usability, and “willingness to recommend to friends”. Other forms of optimization are aimed exclusively at boosting specific metrics like conversions, AOV (average order value), and CLV (customer lifetime value).

So how do you ensure that you’re optimizing for both? By including UX metrics in your optimization campaigns. You should measure overall satisfaction along with metrics like conversions and purchase value.

Satisfied customers, for example, are more likely to return, thus increasing your retention period. They'll also be more willing to take advantage of offers and promotions, thus boosting your average order value. #UX #Ecommerce Click To Tweet

When you do this, you will find that long-term metrics with a direct impact on your bottom line also begin to improve. Satisfied customers, for example, are more likely to return, thus increasing your retention period. They’ll also be more willing to take advantage of offers and promotions, thus boosting your average order value.

Why Is Ecommerce UX Important?

In a nutshell, ecommerce UX is important because it has a direct impact on your “big four” performance metrics: conversion rate, average purchase value, purchase frequency, and retention period.

Satisfied and happy customers that are willing to recommend your store are more likely to return and make high-value purchases. By providing positive user experiences, you will build more brand loyalty, receive more recommendations, and extend the period of time that customers continue to shop with you.

Growth hack your ecommerce conversion rate, sales and profits with this
115-Point Ecommerce Optimization Checklist

Ecommerce user experience is also essential from the standpoint of competition. By running campaigns (or optimization “sprints”) dedicated exclusively to improving user experience, you’ll be adding a dimension to your optimization strategy that most of your competitors won’t have accounted for. This can be a big advantage for your store.

What Are the Most Important Ecommerce UX Metrics?

So which are the most critical metrics for measuring UX? In contrast to metrics that quantify specific actions, and can be gathered without any user input, most UX metrics require direct feedback from customers in the form of surveys.

Here are the top three you should track:

  • Satisfaction – How happy are users with the shopping experience? This data is usually collected after purchase via forms in which users are asked to rate the experience from “Very Happy” to “Very Unhappy”.
  • Willingness to make a recommendation – How often do customers share your offers and promotions when prompted? NPS (Net Promoter Score) is a popular version of this metric.
  • Task completion – How many customers adequately finish the tasks they arrive on your site to complete.
    We’ve written an extensive guide that covers the best optimization tools in 2019. Many of these tools can be used to gather direct customer feedback, either from your site’s natural visitors or by dedicated UX testers.

What Ecommerce Platforms Have the Best UX?

If you’re thinking about changing your ecommerce platform to improve your overall user experience, you might be unsure about which one to opt for. Generally speaking, the best platforms are those that have a high degree of flexibility when it comes to customizing your storefront and adding UX-focused features, rather than platforms which are fantastic out of the box.

Here’s are our top five ecommerce platform recommendations when it comes to usability:

  • Shopify – Shopify is one of the most popular platforms for small and medium-sized businesses. It’s ideal if you have a smaller store because the array of customization options, themes, and add-ons make it easy to implement and test design changes quickly. The platform also has an in-depth analytics platform for tracking and analyzing customer behavior in the context of UX.
  • Magento – Magento is an enterprise-level solution that allows for a high degree of customization when it comes to designing your storefront. If you have a dedicated developer team, Magento will give you the freedom to customize your user experience exactly the way you want to, with access to a powerful set of features, themes, and add-ons.
  • BigCommerce – BigCommerce is regularly ranked as one of the best ecommerce platforms overall. It has a sizeable following made up of both large and small businesses. As a larger business, you have the ability to combine a number of in-house customization options in an environment that is ideal for developers to make more complex changes.
  • WooCommerce – If you run your site on WordPress, few other platforms can match the feature-set that you get with WooCommerce. In terms of user experience, there is a lot of freedom to customize your storefront and customer journey, along with a host of plugins that make it easy to add new features without having to enlist the help of developers. There are issues that larger enterprises have reported with WooCommerce, especially when trying to scale. For small to medium-sized businesses, however, it’s a solid solution.
  • PrestaShop – PrestaShop is an open-source and cloud-hosted platform that is ideal for heavy customization. The flexibility of PrestaShop makes it a perfect choice for developers and retailers that want a high level of flexibility without the additional costs of enterprise solutions like Magento. Thousands of add-ons make the task of implementing new functionality even simpler.

How to Improve Your Ecommerce UX (User Experience): 11 Tips

Here’s a rundown of what we think are eleven essential UX tips:

1. Collect Direct Customer Feedback

Surveys and feedback forms should be your weapon of choice when it comes to UX optimization. The best way to gather data about your site is by asking customers questions through short, simple forms.

Now, that seems straightforward enough. But crafting engaging forms is far from easy. In fact, finding the right formula for surveys can be tricky.

Here are a few pointers to keep in mind:

  • Keep forms short – Ideally, limit forms to around five questions or less to reduce drop-off.
  • Offer incentives – Customers and users are more likely to fill out forms for some kind of reward. Consider offering a discount coupon or free gift.
  • Show forms immediately after transactions (or send them in an email) – A successful purchase represents the end of the customer journey and is usually the best time to collect feedback. Remember to ask this single, most powerful feedback question.

Longer-surveys have-a-lower-completion-rateLonger surveys have a lower completion rate. (Source)

2. Improve Your Site Speed

Users hate slow sites. There’s nothing more frustrating than having to wait for a clunky page to load.

Improving your site speed is one of the easiest and quickest ways to boost customer satisfaction while also increasing your conversion rate and order value.

Increasing-your-page-load-times-will-boost-your-average-page-valueIncreasing your page load times will boost your “average page value”. (Source)

Head over to Google PageSpeed Insights and run your site through the free tool. You’ll be given practical tips for boosting your site’s speed and eliminating problems that are slowing it down.

Want more insights like this?

Get weekly ecommerce tips, strategies and leading industry knowledge.Delivered right into your inbox.

    onI have read the privacy policy and I accept newsletter terms and conditions.

    Please select this checkbox to continue

    Woohoo! You’ve just signed up. Check your inbox to confirm the subscription.

    Here’s a quick rundown of the key steps you should always take:

    • Optimize images – Use appropriate formats for images and ensure that they’re no bigger than they need to be.
      Minify HTML, Javascript and CSS – Minification is essentially a process that “minimizes” developer code, getting rid of unnecessary spaces, commas, notes, and so on. When you use a popular CDN like Cloudflare, your site’s code will automatically be minified.
    • Reduce redirects – Redirects require multiple server responses, increasing the amount for time it takes for pages to load fully. What’s more, redirects are incredibly frustrating from a user experience standpoint.
    • Use a fast hosting provider – There’s not much you can do to improve the speed of your hosting if it’s slow. Ensure that you pick a fast provider, preferably one with experience in the ecommerce sector. You may also want to consider upgrading from shared hosting to a dedicated server or VPS (virtual private server).

    We’ve written an in-depth guide about site speed that you check out by clicking here.

    Ecommerce sites should be built to enable browsing. Many customers will come to your site without any fixed goal in mind. Or they might be looking for a specific product but also be open to discovering other items. Alternatively, visitors may be looking only for a particular product or set of products.

    Whatever the case, you should make it as easy as possible for visitors to find what they’re looking for with intuitive navigation and search features.

    • Keep the following points in mind:
    • Use well-known category labels.
    • Don’t reinvent the wheel. Use a navigation layout that visitors will recognize. Allow users to move back and forth between categories and subcategories on mobile without being taken to a new page. Use subcategory dropdowns under the main category labels on desktop.
      Allow-users-to-move-back-and-forth-on-mobile.Allow users to move back and forth on mobile.
    • Add labels to icons on mobile so customers know exactly what they’re clicking on.
    • Use a search function with auto-correct and include product information like price and product images in the search results.

    Always remember to design separate search and browsing options for mobile and desktop. The way that users interact with menus on handheld devices is different from the way they browse on desktop.

    4. Distinguish Between Mobile and Desktop

    Behavior on mobile differs from desktop behavior. You need to account for different customer needs and habits when designing for mobile vs. desktop.
    Visitors-tend-to-browse-more-on-mobile-but-usually-buy-on-desktopVisitors tend to browse more on mobile but usually buy on desktop. (Source)
    This is something that a lot of retailers get wrong. They don’t treat their mobile ecommerce site as a separate entity catering to a different set of buyer expectations.
    Here are some of the most important optimization tips for your mobile experience:

    • Replicate mobile gestures learned from social media – Social media platforms like Facebook and Instagram have “trained” browsers to interact with mobile page elements in a certain way. It’s common, for example, for people to zoom in on images by “pinching” them and to swipe to see subsequent images. You should mirror these features on your mobile site.
    • Make CTAs and other important links the width of the screen – Make key buttons the width of the screen, thus enabling browsers to tap them with either thumb.
    • Simplify product pages – Because space is at a premium on mobile, every element needs to earn its place. Include only the most essential information at the beginning of the page so that visitors aren’t distracted by non-essential information. Product photographs are usually the most engaging elements, so place them at the top of the page before the title.
    • Use the whole screen for filter options and toplayers – When a visitor accesses the filter options for a page, or when they open a “toplayer” or “pop-up” (such as a shipping calculator or sizing information), ensure that all the screen space available is used. This makes it easier to interact with the various options.

    Take a look at our in-depth guide on m-commerce where we show how to 3X your mobile revenue.

    5. Simplify Checkout Forms

    Cart abandonment, which is high on both mobile and desktop, is often a result of long and frustrating checkout forms. There are several simple tweaks that will make checkout forms much more user-friendly.
    Cart-abandonment-is-high-across-all-devicesCart abandonment is high across all devices. (Source)
    Here’s what you should do to streamline checkout forms on both mobile and desktop:

    • Simplify the inputs required – Nobody likes long checkout forms. Ask only for the information that’s absolutely necessary.
    • Use floating labels – Floating labels appear in the corner of form fields. They allow users to double-check they’ve entered the correct information.
    • Use real-time validation – Show a little green tick next to the form field to reassure customers they’ve entered the correct information, rather than alerting customers to mistakes when they hit the purchase button.
    • Enable auto-fill – Auto-fill allows customers to populate checkout forms with details already stored in their browsers or on their mobile devices, dramatically cutting down on the time it takes to enter information.

    There will always be users that abandon their cart during checkout. Ask for visitors’ email addresses at the beginning of the process so that you can remarket to them at a later stage.

    6. Use a Customer-Centric Information Layout for Product Pages

    Information should be organized in a way that makes it easy for visitors to consume. It’s very satisfying, for example, to view a product page where the product description is located next to the image, all the necessary information required to make a purchase decision (price, shipping details, item options, etc.) is close to the Call to Action, and on which reviews are easy to sort and read.

    Here are some tips for your product page layout:

    • Copy should be scannable – Use short paragraphs and bullet points wherever possible. Highlight the most essential information.
      Include price, shipping information, and product options next to the main CTA – Visitors will usually want to review this information immediately before making a purchase. Ensure that you include it in close proximity to the main CTA.
    • Show a dedicated section for reviews – Many customers will want to check product reviews before committing to buy. Include a dedicated section (with sorting options) further down the page.

    It’s not always possible to collect direct customer feedback about specific pages. But heat maps are an excellent way of visualizing how customers interact with product pages. You should also consider running video user testing.

    7. Optimize for the Whole Sales Funnel

    You need to take a birds-eye view of the whole customer journey. This means optimizing all of your pages for a positive user experience, including your home page, category pages, cart pages, and so on.

    Also, never forget about the post-purchase experience ? transactional emails, returns and refunds.
    Its-easy-to-forget-to-optimize-for-the-whole-sales-funnelIt’s easy to forget to optimize for the whole sales funnel. (Source)
    Visitors to your site should feel as though they can move from one page to the next seamlessly, with a minimum of distractions.

    Ask the following questions to ensure that all your pages fit together well:

    • Can users navigate between categories easily?
    • Do you include a cart button in the header for when buyers are ready to check out?
    • Are certain pieces of information, such as shipping and discounts, reiterated across product, cart, and checkout pages to reassure customers?
    • Is it easy for customers to seek help or speak to a person directly (especially for high-ticket items)?

    Many retailers forget these points, focusing on optimization of specific pages at the expense of the whole site.

    8. Use Wireframes and Prototypes

    Wireframes and prototypes streamline the process of creating a positive user experience by enabling your design team to effectively brainstorm and visualize changes across the whole customer journey.

    It’s crucial that you review changes, in the context of your whole site, before testing and implementing them. Often, problems become apparent that wouldn’t otherwise have been noticed. Wireframes, which are less-detailed forms of prototypes, allow developers to quickly review new ideas.

    The use of detailed prototypes also ensures that developers know exactly which changes to implement, significantly reducing the margin for error during the testing and implementation phase.

    9. Alert Customers to Offers, Discounts, and Freebies

    Customers love promotions, sales, free shipping, etc. Include notifications about all of these benefits on product pages. And re-emphasize them on the cart page. Customers will often be “drawn in” by a particular discount or added bonus, but may become uncertain if it isn’t re-emphasized when they come to the cart or product page.

    The-reserved-cart-page-highlights-free-shipping-and-30-days-refund-policyThe Reserved cart page highlights free shipping and 30-days refund policy.
    If you run any promotions and advertise them through email or on social media, it’s also essential to make sure that landing pages match up with any ad content, leaving potential customers with no doubt that they’re in the right place. If you are offering an item at a discounted price, including the original price next to the discounted price.

    10. Recreate an In-Store Shopping Experience

    Shopping should be an enjoyable activity. Replicate the in-store experience as much as possible by allowing customers to interact with products through high-quality images, well-written descriptions, and informative customer reviews.

    Shopping should be an enjoyable activity. Replicate the in-store experience as much as possible by allowing customers to interact with products through high-quality images, well-written descriptions, and informative customer reviews. Click To Tweet

    Include the following on your product pages:

    • High-resolution images that show important features and can be enlarged to see specific details.
    • Evocative descriptions that create a tangible sense of the product along with providing technical features.
    • Reviews and testimonials that include rich media like videos and images which show the product in use.
    • Details about the size of models for clothing items.

    It’s impossible to fully replicate an in-store experience but, with the right use of on-page elements, you can come pretty close.

    11. Run Consistent, Long-Term Tests

    The tips in this post are only useful in so far as they improve the user experience for your ecommerce store.

    But there’s a fatal mistake that it’s essential to avoid.

    Many online retailers take an “on-off” approach to user experience optimization. Every few years they’ll rehaul their entire site, changing everything from the whole design to the product descriptions and images. This simply doesn’t allow enough time for serious testing, the gathering of user feedback, and troubleshooting of both major and minor problems.

    Instead, you should copy the big players like Amazon and take a long-term approach to testing. You should test many small changes over weeks and months rather than redesign your whole site in one go.

    Once you’ve tested changes, you can implement the winners and brainstorm new ideas going forward. Over time, your whole site will change completely, but without the many drawbacks of an all-or-nothing approach.

    Summing Up UX Tips for Ecommerce

    Let’s just circle back to Jeff Bezos for a second. He described Amazon’s mission to “become the most customer-centric company on Earth.”

    It seems like you can’t pick up a business magazine or read a blog post nowadays without hearing the word “customer-centricity”.

    But there’s a reason why the term is so popular. Customer-centricity works.

    And the way to create a truly customer-centric ecommerce store is by optimizing user experience consistently and indefinitely. If you do that, you’ll be miles ahead of your competitors.

    Download Your Free 115-Point Ecommerce Checklist and Growth Hack Your Revenue and Profits

    If you would like a comprehensive guide covering everything you need to know about user experience optimization, download your free copy today. It contains everything you need to boost your key metrics: revenue, profits, conversion rate, average order value and keep your customers happy.
    Ecommerce Optimization Checklist

    💡 At Growcode, we develop and maintain online shops and B2B ecommerce on Magento!

    Growcode Ecommerce Blog / Ecommerce / 11 UX Tips for Ecommerce That Will Help You Improve Your Conversion Rate