User Experience audit aims to discover usability issues and areas that need to be improved in order to increase user satisfaction. Think of UX on your Shopify website as of the customers when they enter a regular store. Would they rather go to the one that is neat, has intuitive structure and signposts that make it easier to move around and purchase needed products? Or would they choose the store that is a complete opposite?

The answer is pretty clear, so below we share UX recommendations delivered by the SoftwareSupp expert for Pitbullstore, one of the most popular eCommerce in Poland based on the Shopify platform.

Shopify website design – UX best practices that boost sales

The goal of the project: To improve UX design and optimize the Shopify-powered website for mobiles in several areas, especially the product and category page. The objective is to increase the store’s conversion rates and raise overall sales.

Project time:  33 hours

Content of the UX audit:

1. The purpose of an UX audit
2. Description of the methodology
3. Identified Shopify website problems typical for mobile devices + recommendations
4. Summary

I am a UX Designer with over 12 years of experience. I specialize in designing customer experiences based on quantitative and qualitative data. My great achievement was to increase mobile applications’ conversion of one of the largest tour operator by more than 10%. – Katarzyna Gajewska

The purpose of a UX audit

The audit is a complete evaluation of the Pitbullstore website in terms of compliance with the habits and expectations of users. It allows checking whether the product meets users' needs and find out what should be improved in order to increase their satisfaction.

Description of the methodology

The UX audit was conducted on the basis of heuristic evaluation – a method of analyzing a website in terms of heuristics, i.e. general usability principles.

Heuristic evaluation in UX design

The analysis is based on Nielsen's 10 heuristics:

1. Visibility of system status: Keep users informed on what's going on the website. To browse the store and make a purchase, it must be intuitive and somewhat predictable. Customers have their habits that are difficult to change.

2. Match between the system and the real world: Make the system more humane. Use simple, non-technical language and informative icons that users are familiar with.

3. User control and freedom: It happens that customers might click on the wrong button after filling a long form, especially while using a mobile. Let them go back to the last step easy without being forced to start all over again, because in most cases – they won’t.

4. Consistency and standards: There are patterns that website users are used to, and to avoid confusion, it’s better to not change it. The same with buttons – if they lead to the same place on the website, always use the same titles for them.

5. Prevention of errors: It’s better to prevent the problem than fix it. Make sure every information is clear and features are working how they suppose to. You will save the time and avoid customers being upset because of the message they didn’t understand.

6. Recognition instead of recall: Once again, make your website intuitive and design the customer’s path in a way that seems natural to them. Don’t make them remember what to do next or where to go for information they need. Let them recognize elements that lead to the right place.

7. Flexibility and efficiency of use: Remember that the website should be easy to navigate for both, inexperienced and experienced users.

8. Aesthetic and minimalistic design: Include only necessary information and elements that don’t distract the user from the most important actions, such like: sign up, add to the cart or order now. Also, make sure that the titles are readable and there is enough space between buttons.

9. Help users to identify, diagnose and remove errors: To not leave users frustrated or prevent them from leaving the website, design their error experience. Make sure they are aware of it, explain where and why it happened, as well as how they can solve it.

10. Support and documentation: In a perfect world, a well-designed website wouldn’t need any additional explanations. However, don’t forget to give users a space with documentation, tutorials or Q&A that are easy to find, simple and comprehensive.

Analyzed sections of the website

Each section on the website has a purpose and needs to be evaluated from a user and a business perspective. UX design helps to fix problems that customers meet and make their path to purchase easier.

Using heuristic evaluation, the following areas of the Pitbullstore.pl were thoroughly reviewed:

1. Home page
2. Navigation / Menu
3. List of results
4. Product page
5. Shopping cart and order process

Results of heuristic analysis

The result is a report of client’s Shopify website, including identified problems. Each problem consists of a brief description of the bug, its assessment, and detailed recommendations for fixing the issue. Each bug was assessed on 3 levels. It determines how much the problem may disturb the users.

Identified problems:

• Critical error – has such a significant impact on usability that it can completely prevent a user from performing a particular action and, as a result, consequently leave the application, while causing negative emotions. It’s first to implement.
• Serious error – can significantly reduce user’s satisfaction, and if repeated, can prevent the user from achieving their goal and abandoning the application. Second in order to improve.‍
• Minor error – can reduce user’s satisfaction. However, it should not lead to strong irritation and website abandonment. It's worth to pay attention to this mistake, because it can significantly contribute to a positive user experience with the store. It should be improved on the third place, after critical and serious errors are fixed.

Identified Shopify website problems typical for mobile devices + recommendations

The client wanted to create a new mobile-oriented design for the eCommerce store based on the Shopify Plus platform. Below are some problems appearing on the website that SoftwareSupp expert identified and gave recommendations to.

Home page

The first place on your Shopify website clients usually visit is the home page. Make sure their positive experience with the store starts here. Otherwise, they may abandon the shop and never return.

‍Critical error: When an incorrect email address, such as "kg@gmail" is entered, you don't receive an error message, and it's processed without the corresponding information. As a result, the users don't know whether they successfully subscribed to the Newsletter or not.

Recommendation: Introduce error validation into forms, so users are aware they entered incorrect data.

Serious error: The site's banners fill up the whole screen, discouraging the viewer from scrolling down. The user may have the impression that the page ends with a banner.

Recommendation: Shorten banners so that the screen may show a fragment of the next module, encouraging the user to scroll further.

Minor error: Product names, headings and other content are much more difficult to scan when they are written with majuscules (capital letters). It is a bad practice to use too many of them.

Recommendation: To make it easier for users to scan the content on the website, avoid using capital letters in headers, categories, and product names.

Navigation / Menu

Critical error: The most important feature – login – is missing on the navigation bar. Login/My Account should be easily accessible so that registered users may quickly enter their accounts and have easy access to historical data, e.g. the last order. Also, it is a good practice that the customer logs in right away after entering the website, to go through the purchase process easier.

Recommendation: Add in the Menu bar the Login/My Account function.

Serious error: The module "Subscribe to our VIP list" sounds quite mysterious – users don't know what is the VIP list, what are benefits by subscribing to it and is it different from "Join the PITBULLTEAM".

Recommendation: Change the “VIP list” headline to something more clear, explaining what it is and what benefits the user get. Additionally, the two leads, "Join PITBULLTEAM" and "Subscribe to our VIP list", should be separated.

List of results

Critical error: After entering the list of results from a search bar, the user lands on a page with navigation items that take up half of the screen.

Recommendation: Navigation elements in the results list should be structured in a way that takes up as little space on the screen as possible. After entering the list, the user should first view the products.

Serious error: Use a discount percentage next to the product. If this information is missing, it reduces the power of the sale.

Recommendation: If the product is discounted, it's a good idea to display the discount value as a percentage in a visible place. Instead of writing SALE, it’s better to put the sale value in a red block, e.g. "-23%".

Minor error: When the user clicks on the stars, a blue box that appears, seems like an error.

Recommendation: Remove the blue frame.

Product page

Critical error: In clothing eCommerce, there is a huge focus put on cross-selling and upselling. Also, from a user perspective, purchasing two or more items is often more beneficial due to shipping costs, as well as practical - shopping for clothes at one store is just easier. As a result, the "Buy Now" banner may be disadvantageous for both sides.

Recommendation: Put more visual emphasis on the "Add to Cart" button to increase the shopping cart value and user satisfaction.

Serious error: The pattern of "Add to wishlist" function with a filled heart suggests that the product has already been added to the wishlist. However, in this case it's not, which may confuse the user.

Recommendation: Change the design of the add to wishlist function according to good UX/UI design practices.

Minor error: On the product page, the entire screen is taken up by a gallery of pictures with thumbnails. On the mobile version of the website, it's unnecessary, because users browse the gallery by swiping photos to the right.

Recommendation: Remove thumbnails and instead add the product name with number of ratings or/and the price.

Shopping cart and order process

Critical error: When there are more products (more than 3), users don't see the summary, which is the most important information for them in the shopping cart.

Recommendation: Add a summary of the cart value in a visible place.

Critical error: Including additional tools like chatbots in the booking process is an unnecessary distractor and bad practice. The order process should be intuitive and simple enough to avoid contacting the customer service.

Recommendation: Remove the chat widget from the shopping cart.

Critical error: Informational messages should not be highlighted in red. This color in the order process is normally used for error notifications, thus it may confuse the user.

Recommendation: Change the color of the VAT invoice information to neutral.

Summary of UX design best practices on Shopify website

Based on the UX audit and the data contained in the analytics tools, the SoftwareSupp expert recommended explicit steps to follow. By using these best UX practices on the Shopify website, the client can provide a great user experience and boost store's overall sales.

It includes three major guidelines:

• building the site using suggestions provided by an expert, with a primary focus on: fixing errors and optimizing processes on the website, improving UX in all areas, creating new information architecture and introducing personalization
• redesign of the customer area – while it has no direct influence on conversion, it has a huge impact on user experience in the post-purchase process
• connect with Google Analytics other significant website elements worth measuring and optimizing, for example: adding to favorites, login/registration, promotional banners and filters on the results list

Does your Shopify website struggle with abandoned carts, unfinished payments, or no actions performed by users? The first step to take is a professional UX audit provided by a qualified expert. SoftwareSupp allows you to hire a certified freelancer on-demand.