How to Improve User Experience on your E-commerce?

This is a guest post written by Piotr Jacek, SEO Team Leader at DevaGroup . Piotr has been working in the SEO industry since 2010. On a daily basis, he's responsible for running SEO campaigns, conducting website audits, optimizing websites in terms of UX, as well as managing and actively supporting the work of the SEO team.

The main benefit of adapting the website to users' needs is the ability to increase the conversion rate and thus the increase in generated income. A website that is fast, intuitive and easy to use will reduce the number of people who leave our website without taking any action. If we take care of UX already at the stage of designing and building the website, we will minimize the costs of testing, analysis and corrections on the website that may appear in the future. It gives double benefits: increased chances of generating higher profits and lower expenses. Understanding the needs and preferences of your ideal customers is crucial in crafting a UX design that delivers a satisfying and engaging website experience.

Many businesses own websites, but not all of them care about their UX optimization. If you ever wondered how to improve user experience in e-commerce, this is an article for you! We will present the concept of SXO and essential information and tips on adapting websites to mobile devices regarding speed and User Experience. First, however, we will show how it significantly impacts your online store's operation.

How to detect UX issues?

UX Audit

When it comes to identifying issues on our website from a UX perspective, the best solution will be to contact one of the agencies or specialists available on the market that offer comprehensive UX audits. These documents will provide many interesting and practical tips about potential pain points on your website, along with a ready-made solution.

An alternative approach could also be asking friends or colleagues to perform a specific task on your website. For example, if you run an online store, e.g. with shoes, you can ask them to find your dream model. It is a great, free way to detect fundamental problems with your website, which may even effectively prevent you from purchasing.

Encourage test participants to give honest feedback and comments about how the site works and to point out potential places, specific features or other elements that have caused them the most difficulties. Record each session: this way, you will gain additional valuable information for later analysis. The collected customer data should be sorted depending on the type of website, from the home page, through product categories and product cards, to the basket and the purchase made. It will allow you to easily identify which stage of the purchase path is the most difficult for your potential customers.

Statistics analysis

A slightly different approach to identifying potential UX issues on your website can be a detailed analysis of the traffic generated by the website and comparing it with conversions. It often turns out that although mobile devices generate much more traffic, the PC version converts much better. In such a situation, the problem most often results from not ensuring that the website is mobile-friendly in terms of speed and UX. As a result, even if users visit your website using smartphones, they encounter numerous errors and difficulties, which in the best case, leads to completing the purchase on the PC version, and in the worst case, to giving up shopping and choosing the competition's offer.

Online customer behavior vs UX barriers and pain points

Many users surf the internet on their smartphones, for example, while riding the train, waiting for the bus, using social media, or simply to pass the time. In each scenario, fast loading and comfortable website content display are crucial. A slow, complicated page not adapted to display on different devices can annoy the user and lead to lost conversions. Your website should always run smoothly so users can quickly get the information they seek.

Many customers, when browsing websites on mobile devices, only check the offer, available options and prices, while the actual purchase is made on the PC version or directly in a brick and mortar store. Very often, this happens due to the numerous errors and barriers encountered, among which we include primarily:

1. Tiresome scrolling – this is something that often leads to frustration when browsing extensive, long web pages. When the user wants to change the product search parameters, he usually has to scroll the page to the top. A much better solution for UX will be using a "floating" filter bar that is always visible at the bottom of the screen. Tests show that in this way, we can increase the length of individual sessions on the website.
   In addition, this solution increases the comfort of use and promotes more effective browsing of available products. The user can easily adjust the filters to their needs without returning to the top of the page. Another interesting aspect is that the "floating" filter bar can be a subtle reminder to users of the available filtering options, potentially leading to more informed and differentiated use of the site's offerings.
   

2. Comparing products (ensuring your decision) – online users appreciate the option of quick and easy comparison of the products on the site. This functionality helps them make informed purchasing decisions. If you don't offer such functionality or it's poorly designed, you can lose potential customers. A well-thought-out product comparison tool can be vital in building customer loyalty. By enabling customers to compare offers reliably and transparently, you show that you respect their time and decisions.
   It can build customer trust and lead to longer relationships with the brand. A product comparison feature can also contribute to a company's better understanding of buyers personas and their needs. By analyzing which products are most often compared, you can identify consumer trends and preferences, which can translate into better adjustment of the offer and marketing strategies.
   

3. Appropriate product presentation – online shoppers expect complete confidence in what they are buying. Posting photos of the product or room for rent on the site is a must. However, remember to use other modern forms of presentation, such as slides and 3D models, as well as short videos presenting the product. It is worth noting that the appropriate presentation of products can significantly affect the customer experience and thus their satisfaction and loyalty to the brand. 3D or video technology allows customers to "experience" the product in a way almost like in a stationary store, which can increase confidence in their purchasing decisions.
   Proper product presentation is also a chance to stand out from the competition. Innovative forms of presentation, such as 3D models, virtual fitting rooms or video presentations, can attract more customers and build the brand's image as modern and focused on customer needs. In addition, analyzing users' behavior on the site – for example, which presentations they view most often – can provide valuable information about their preferences and help to develop product presentation strategies further.
   

4. Incomplete information on availability and costs – information about product availability and delivery costs must be clearly marked from the very beginning, not at the last stage of the purchase path. Complete transparency regarding product availability and delivery costs is a sign of respect for the customer and a key element in building their trust. Hiding such information until the last minute can lead to customer frustration and ultimately abandoning the purchase. Clear and precise product availability information can help increase conversions, especially for products with limited availability. Customers may feel motivated to make a purchasing decision faster if they see that the product is limited or popular and, therefore, often purchased.
   Moreover, information about delivery costs can contribute to higher customer satisfaction after the purchase. If all costs are clearly defined at the beginning, the customer will not be surprised by additional charges at the end of the purchase process. It can lead to better reviews and a greater likelihood of returning to the store.
   

5. No autocomplete – using autocomplete in forms on the website is a way to minimize potential typos and errors and speed up the process of filling out fields. As a result, it can increase conversion efficiency. The autocomplete feature is essential, as it improves users’ interaction with the page, which can significantly reduce the effort needed to fill out the form, especially on mobile devices, where entering text is often less convenient.
   Using autocomplete can help increase trust in the site, as it shows that the company cares about the details and comfort of its customers, which can lead to increased customer loyalty and repeat purchases. From an online business perspective, more accurate data entry with autocomplete means fewer errors to correct and fewer problems with orders. It also means that users are less likely to abandon the form out of frustration, ultimately leading to higher conversions.
   

UX vs customer journey

Main menu

For most websites, the main menu generates the most interactions because it is through it that users explore the offer and search for the desired information, services or products. It is where the purchasing path of our potential customers begins. On the mobile version, the menu is often replaced by the so-called hamburger icon in which individual categories are hidden. Therefore, it is worth considering another way to present key categories and relevant subpages.

A popular solution on the mobile version is a menu in the form of "stories", i.e. stories, known for example, from Instagram or as a classic slider. Research suggests that presenting categories in this way on the homepage has a positive effect on increasing conversions. We increase the likelihood of conversion by giving users more opportunities to find the products they are looking for. If the customer journey is too complicated, users may get lost and eventually abandon the purchase.

Based on experience from social media, this form of presentation is more intuitive and attractive for most users. Interactive "stories" or a slider allow for easy and quick browsing of the most important categories, which may encourage further site exploration. On the other hand, it also makes it possible to quickly deliver critical information to users who prefer quick and efficient site browsing.

Internal search engine

Another navigation mechanism on the website is the internal search engine, the correct design and operation of which can have a key impact on increasing conversion. This solution is mainly chosen by determined users who know what they are looking for and what they want to buy, and thus convert much more often compared to customers using the main menu.

Features of a well-structured search engine:

• clearly visible search bar – research shows that instead of a small magnifying glass in the corner of the menu, a much more practical solution is to place the full search field in it, which translates into increased conversion;
• synonyms – the search engine should be able to return relevant results based on synonyms and various forms of the entered query;
• autocomplete and typo correction – especially helpful for longer queries;
• alternative products for no results – never leave customers with nothing; if there are no results for a given query, always try to present related results;
• optimized filters – on the search results page, it is worth using a filtering module that will allow you to narrow down the results further and find the desired product.

Remember to optimize both shopping paths, the one where the user goes through categories and filters before reaching the product they are looking for and the one where they use the internal search engine.

A properly constructed search engine can increase customer satisfaction, translating into loyalty and repeat purchases. The above features can make the search process more accessible, encouraging users to stay on the site longer. Well-designed and optimized filters can help to match search results to customer expectations better, increasing the number of purchases.

Product Comparison

Before making a purchase, customers usually carefully analyze the selected product, comparing it with other available options on the market. It is especially noticeable in the context of online shopping. For this reason, the product comparison engine, right next to the search engine, is a vital element of the website regarding user experience (UX) and conversion optimization (CRO).

When implementing a product comparison engine, consider its structure and functionality. The customer must immediately receive information on the main differences between the compared products. The ideal solution may be highlighting 2-3 key product features that distinguish them at the listing level, for example, in the form of drop down lists. It is especially important when it comes to the mobile version of the website, where the space for data presentation is limited. Compared products should always be visible on the screen without the need to scroll horizontally. Instead of elaborate presentations, use simple tables that contain concise, relevant information about each product.

The function of saving product comparisons will also help optimize the purchasing process. The customer will be able to return to previously compared products without the need to search the entire range. Well-thought-out structure of the comparison engine, which facilitates navigation, will allow the user to use the tool efficiently and intuitively, directly translating into his satisfaction and the final purchase decision.

Mobile site vs app

Having both a website and a mobile application, always remember to invest and implement the same recommendations on both platforms, as there is a noticeable tendency for customers to move between them. This fact is confirmed by statistics, which show that as many as 21% of users who start searching for a product on a mobile website finalize their purchase via the application. Closely observe how your customers search for information and products, how they complete the purchase, and how they interact with your brand and make sure that you are where your customers are most active.

UX designers often use focus groups to gather direct feedback and insights, helping refine and optimize a website's user experience for its intended audience. If your customers often go from a mobile website to a mobile app to complete a purchase, this may suggest that it offers a better shopping experience. In this case, it is worth investing in improving the mobile site to make it as attractive and functional as the application. The better the shopping experience you offer to your customers, the greater the chances they will become regular buyers of your products or services.

Cross-platform UX optimization

1. Optimize the shopping path between platforms – give the user a chance to get to know your website and avoid pop-ups and message boxes at all costs. If you have to, display them at the right moment, e.g. after completing a task, never randomly. It is not a good practice to display a huge pop-up window prompting you to download your application immediately after entering the site. Instead, use smaller, highly visible banners that look like an integral part of it, not an annoying addition. Remember to add specific information about why it is worth installing the application now, and use catchy icons and symbols. When adding functionalities such as Wish List or Favorite Products to the website, make sure they are integrated and available both from the website and the application.
2. Consistent design – if you have a website and an application, use the same design for both. Similarly, when preparing an application for different systems, e.g. iOS and Android, your website and application should look and work the same. This point is especially important for site navigation, which should be structured in the same way.
3. (Shorter) concentration of attention – when using mobile devices, the user can easily get distracted and stop shopping, e.g. by getting an SMS, phone call or a push notification. Therefore, when designing websites and mobile applications, it is extremely important to interest the user and focus his attention maximally. Prioritize elements on the page, especially above the fold, where your value propositions, CTA button and eye-catching photos, e.g. of the products on offer, should be placed.
4. Perceived page speed – due to many external stimuli that can distract Internet users using smartphones, it is imperative to make 100% use of the user's time spent on our website. In addition to speeding up the website or application, use various solutions that inform users that something is happening on the website all the time. In the example of loading subsequent page elements, these can be animations showing the website's loading progress. In this way, we will occupy and distract users, reducing the risk of leaving the site.
5. Mobile ergonomics – not everyone knows how important the bottom of the screen is on mobile devices. Due to the operation of the smartphone with the thumb, it is an ideal place for an additional menu on the page, navigation buttons, important CTAs, buttons, and small pop-ups. Properly designed input controls are fundamental in UX design, as they allow users to interact effectively with a website, contribute content, and engage in a way that enhances their overall online experience.
6. Offline mode – for both the website and the application, prepare special views dedicated to the offline mode, allowing the user to interact with your brand even when the Internet connection is temporarily lost. In such situations, it is worth displaying a short message to users with a contact option, e.g. phone number.

What else affects UX?

Checklist when optimizing your ecommerce site for UX

1. Key CTAs visible without scrolling – such essential elements of the product card as the price and the "Add to cart" button should be well highlighted and visible right after entering the page (above the fold). When scrolling, it is worth using the so-called floating bar, thanks to which the price and the button will always be visible, and the buttons placed in it, within reach of the thumb, with which we most often use the smartphone.
2. Fast registration using external accounts – setting up an account on the website should be as short and straightforward as possible. Add the possibility of immediate registration using Facebook, Gmail, LinkedIn, etc. This way, you will significantly speed up the registration process and reduce the likelihood of errors when filling in the customer data. When shopping on mobile devices, users are often already logged into, for example, their Gmail account in the web browser. Use it to your advantage!
3. Properly marked errors in forms – any errors that may occur when filling out forms on the website should be immediately marked. In addition to the standard red color, it is also worth using additional icons and symbols to attract customers' attention (e.g. exclamation mark or cross). Remember that among your clients there may be people with eyesight defects (e.g. color blindness – daltonism). After attempting to submit an incorrectly filled form, the page should scroll to the problematic place, along with a short comment.
4. Value proposition (service standards) – highlight the main benefits of your store/website and the products/services that you offer. This information should always be visible to the user on the home page and subpages, categories and product pages. Placing them near the "Add to Cart" button on the product card can positively impact purchasing decisions. It’s not always the price that determines the purchase, but also the quality of services and the value proposition, e.g. express shipping, fast delivery, free returns, etc. Show the customer why they should buy from you, not from the competition, and show what he gains by choosing your offer.
5. Appropriate type of keyboard for numbers – ensure that the fields in forms on the website for entering numbers have been appropriately programmed (zip code, telephone number, quantity of products). When selected on the user's mobile device, a numeric keypad with large, easily clickable buttons should be triggered instead of the default alphabet. This solution will significantly facilitate the correct form filling and reduce potential errors in orders. If the form is divided into several stages, remember to add a progress bar on the page so the user will know which stage they are at.
6. Limited navigation in the shopping cart – limit navigation on the page at the shopping cart level to elements directly related to it, reducing the risk of leaving the cart without making a purchase. Hide the main menu or link to the home page to focus the user's attention on the basket and completing the purchase process. In an ecommerce business, a well-structured UX design facilitates easy navigation, quick product discovery, and seamless checkout fostering loyalty and driving revenue growth.
7. Full and transparent information on delivery – add complete details on the availability of products, time, costs and forms of delivery on the website. This information should always be visible, preferably next to the "Add to cart" button. Customers prefer to avoid negative surprises in the form of additional, initially hidden costs presented only at the last step of the Path to Purchase, which often confuse users and determine the purchase decision.

Summary

Many designers view intuitive UX as a key driver of user engagement and business success on websites. However, before implementing any significant changes to your ecommerce website, it's always a good idea to run A/B tests to see which solution your customers will like more. When choosing a specific A/B testing tool, pay attention to whether it allows you to integrate data with Google Analytics. A great choice here is the free Google Optimize.

A/B tests checklist:

• minimum duration – 2 weeks
• minimum number of achieved conversions - 200
• prepare 2-3 different solutions to a given problem
• test in different markets
• run 1 test at a time
• do not test during holidays, online sales, etc.
• document research and test results
• test new tools and functionalities
• measure how UX changes affect conversions