Shopify website design – UX best practices that boost sales

READ MORE AND GET A FREE E-
COMMERCE GUIDE →
Shopify website design –
UX best practices that
boost sales
Shopify websites often suffer from poor design and
user experience. UX audit discovers usability issues
that need to be improved. See our recommendations
and implement them right away.

User Experience audit aims to discover usability issues and areas that need to
be improved in order to increase user satisfaction.
UX Audit
This case study was delivered by a

Certified Freelancer for
Pitbullstore.pl, one of the most
popular e-commerces in Poland.
SoftwareSupp

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

Keep users informed on what's going on. To browse
the store and make a purchase, it must be intuitive and
somewhat predictable. Customers have habits that are
difficult to change.
1. Visibility of system status
Make it more humane. Use simple, non-technical
language and informative, familiar icons.
2. Match between the system
and the real world
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

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 easily without being forced to
start all over again, because in most cases – they won’t.
3. User control and freedom
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.
4. Consistency and standards
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 time and avoid
customers being upset because they misunderstood.
5. Prevention of errors
Make your website intuitive and let customers
recognize elements that lead to the right place.
6. Recognition instead of
recall

Remember that the website should be easy to navigate
for both, inexperienced and experienced users.
7. Flexibility and efficiency of
use
Include only necessary elements. Make sure the titles
are readable & there is enough space between buttons.
8. Aesthetic & minimalistic
design
To prevent users from leaving the website, design their
error experience. Make sure they know how to solve it.
9. Help users to identify,
diagnose and remove errors 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.
10. Support & documentation

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 for mobiles were thoroughly
reviewed
Analyzed sections HOME PAGE
NAVIGATION / MENU
LIST OF RESULTS
PRODUCT PAGE
SHOPPING CART AND ORDER PROCESS

It can completely prevent a user from
performing a particular action and, as a result,
leave the application. It’s the first to implement.
Critical error
Identified
problems
The result is a report of the 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.
It can significantly reduce user satisfaction, and
if repeated, can prevent the user from achieving
their goal and abandoning the application.
Serious error
Can reduce user satisfaction. It should not lead
to strong irritation and website abandonment,
but it's worth paying attention to.
Improvements lead to a positive experience.
Minor error

HOME PAGE
✓Recommendation: Introduce error validation into
forms, so users are aware they entered incorrect
data.
Critical error: When an incorrect email address,
such as 'kg@gmail' is entered, there's no error
message. Users don't know whether they
successfully subscribed to the Newsletter or not.
✓Recommendation: Shorten banners so that the
screen may show a fragment of the next module.
Serious error: The site's banners fill up the whole
screen, discouraging the user from scrolling down.
✓Recommendation: Avoid using capital letters in
headers, categories, and product names.
Minor error: Content is more difficult to scan
when it's written with majuscules (capital letters).
It is a bad practice to use too many of them.

NAVIGATION / MENU
✓Recommendation: Add in the Menu bar the
Login/My Account function.
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. 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: 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.
Serious error: The module 'Subscribe to our VIP
list' sounds quite mysterious – users don't know
what is the VIP list, what are benefits of
subscribing to it, and is it different from 'Join the
PITBULLTEAM'.

LIST OF RESULTS
✓Recommendation: Navigation elements in the
results list should take as little space on the screen
as possible. After entering the list, the user should
first view the products.
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: 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%".
Serious error: Use a discount percentage next to
the product. If this information is missing, it
reduces the power of the sale.
✓Recommendation: Remove the blue frame.
Minor error: When the user clicks on the stars, a
blue box that appears, seems like an error.

PRODUCT PAGE
✓Recommendation: Put more visual emphasis on
the "Add to Cart" button to increase the shopping
cart value and user satisfaction.
Critical error: Cross-selling and upselling are very
important from a business perspective. The 'Buy
Now' banner may be disadvantageous.
✓Recommendation: Change the design of the add
to wishlist function.
Serious error: The pattern of the 'Add to wishlist'
function with a filled heart suggests that the
product has already been added there. In this case,
it's not, which may confuse the user.
✓Recommendation: Remove thumbnails and
instead add the product name with a number of
ratings or/and the price.
Minor error: On the product page, the entire
screen is taken up by a gallery of pictures with
thumbnails. It's unnecessary because mobile users
browse the gallery by swiping photos to the right.

SHOPPING CART AND ORDER PROCESS
✓Recommendation: Add a summary of the cart
value in a visible place.
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: Remove the chat widget from
the shopping cart.
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: Change the color of the VAT
invoice information to neutral.
Critical error: Informational messages should not
be highlighted in red. This color in the order
process is normally used for error notifications.

SUMMARY OF UX AUDIT & GUIDELINES
Build 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.

USE EXPERT'S
SUGGESTIONS
While it has no direct influence
on conversion, it has a huge
impact on user experience in the
post-purchase process.

REDESIGN THE CUSTOMER
AREA
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.

BECOME FRIENDS WITH
GOOGLE ANALYTICS

Does your e-commerce struggle
24h to start work
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. If you
decide, SoftwareSupp allows you to hire a certified freelancer on-demand, use a 14-day
trial to start work are reduce hiring costs by 10x with safe pay-as-you-go billing.
10x
reduce
hiring costs 14-day trial
DOWNLOAD A FREE E-COMMERCE GUIDE

CONFIGURATION & DEVELOPMENT
PAGE SPEED OPTIMIZATION
SEO RULES & TRICKS
FACEBOOK & INSTAGRAM
INTEGRATION
GOOGLE & FACEBOOK ADS
In this e-book, you will learn how to build
a new e-commerce business or grow an
existing one with proper technology.
TO DOWNLOAD, COPY THE LINK
FROM THE DESCRIPTION

Shopify website design – UX best practices that boost sales

More Related Content

Similar to Shopify website design – UX best practices that boost sales (20)

Recently uploaded (20)

Shopify website design – UX best practices that boost sales