WaterRower

UI/UX & Conversion Rate

4 Reasons Why Your Conversion Rate Is So Low & 4 Ways UI/UX Design Can Fix It

The success of your eCommerce store hinges on your conversion rate. The higher it is, the more value you are squeezing out of your site’s traffic. The lower it is, the more revenue and repeat business you are allowing to slip through your fingers.

Although it fluctuates according to industry, the average eCommerce conversion rate typically sits at somewhere between 2-3%. In turn, you should be aiming for a 4%-plus conversion rate if you want to start outperforming your competitors.

In order to improve your conversion rate, however, you first need to identify the factors that are stifling it. That’s why this blog will delve into 4 common causes of a low conversion rate:

  1. You don’t understand the needs of your audience.
  2. You’re making a bad first impression.
  3. Your CTAs are not engaging enough.
  4. Your site does not cater for mobile users.

For each of these issues, we will provide a UI/UX solution. But before we explain how UI/UX best practices can resolve your on-site performance problems, we will explain some of the terminology used in this blog.

CRO, UX and UI

Conversion rate optimisation (CRO) is the practice of increasing the % of website visitors that convert. Clearly, therefore, a CRO strategy is essential to improving your conversion rate. Although many eCommerce businesses are aware of this, far less are aware of why and how UI/UX design should heavily inform the process.

CRO & UI/UX overlap

User experience (UX) and user interface (UI) are distinct but closely related concepts. UX refers to the feelings and emotions that a user experiences when interacting with a website, whilst UI refers to the actual visual elements that they interact with.

When designing a checkout process, for example, UX designers would focus on how to organise it so that the flow is logical and easy to navigate. Meanwhile, UI designers would focus on the aesthetic details and visual cues that punctuate the process (e.g. the page layout and CTA buttons). Both, however, would be aiming to create a site that is enjoyable and easy to use.

At this point, you may struggle to see how CRO and UI/UX work together. The former wants conversions, and the latter wants to satisfy customers – where’s the overlap? 

Put simply, a site that delights will also convert. Whilst the aim of UI/UX design is not to raise conversions, creating a smooth user experience naturally will do so.

A study by Forrester found that better UX design could lead to a 400% increase in conversion rate and better UI design could lead to a 200% uplift. This causal connection makes UI/UX central to CRO, and thus central to solving your low conversion rate. 

Explanations and Solutions for Your Low Conversion Rate

#1 You Don’t Understand the Needs of Your Audience

Is your site adapted to convert your customers? Are you creating a personalised experience that is encouraging them to make purchases? This is not simply a matter of defining and identifying the sorts of customers you want your site to attract, as very often your imagined customers do not always match up to the real thing.

To improve your conversion rate, your site must be designed to satisfy the real-life users that visit your site, not simply the ideal customer you want to tailor your marketing efforts towards. That is why to truly understand the needs and expectations of your audience – and adapt your site accordingly – you need to study your actual customers.

Solution: UX Research

UX (or user) research is the systematic investigation of your users in order to gain valuable insight into their attitudes and behaviour. The techniques used – such as A/B testing, heatmapping, and usability testing – allow you to study your actual customers.

Before you can create a site that caters for your real-life audience, you first need to understand their wants and expectations. UX research will allow you to do so and, therefore, must be the starting point for any design process. We will use usability testing as an example of how this works in practice.

Usability Testing

Usability testing involves observing real users as they attempt to complete a task on your site.

There are several ways you can do this, but we choose to plug screen-recording software into our clients’ sites to monitor their customers’ online behaviour. Our UX specialists can then extract insights from session recordings that reveal exactly where your customers are having problems. For example:

  • Observation: Users are abandoning your checkout form halfway through completion.
  • Hypothesis: Your users are frustrated by the length of the checkout flow, so you may need to simplify this process. It is also well-known that complicated checkouts directly damage conversion rates.
Usability Testing

Whether you choose to use A/B testing or simply implement the changes and observe new session recordings, the hypothesis that you formulate must be tested again. If you observe that far fewer people are abandoning your checkout form after you have simplified it, then you can reasonably conclude that it was an issue affecting your conversion rate.

The first step to solving your site’s low conversion rate is to ask yourself: are my design decisions backed by data? UX research is how can you ensure that they are.

#2 You’re Making a Bad First Impression

People are hardwired to make subconscious snap judgements. Whether you know it or not, this means that a first impression has a profound impact on who or what you choose to interact with. Even when it comes to websites!

Research suggests that it takes 100 milliseconds (one-tenth of a second) to start making a judgement about a person. For websites, it is even less. A study found that a website’s visual appeal can be assessed within 50 milliseconds (one-twentieth of a second), meaning that you have that same amount of time to make your first impression.

Given that 94% of first impressions are design-related, a cluttered interface with a poor visual hierarchy will heavily contribute to a bad one. Therefore, it will directly contribute to a high bounce rate and a low conversion rate.

These design flaws typically arise when UI/UX is neglected i.e. when a business has not created a site with its users in mind.

Solution: an Unfussy Design

Especially when it comes to eCommerce sites, there are particular design features that customers will expect to appear. For instance, Invesp analysed the top 200 eCommerce sites and found…

  • 80% provide privacy assurances on the cart page.
  • 64% provide a guest checkout.

These kinds of commonalities are not something to be ignored. To ensure a smooth user experience, you must align reality with user expectations and create an interface that your customers can operate intuitively. In support of this point, Google found that websites with “low visual complexity” and “high prototypicality” were perceived as the most appealing to users. In other words, websites with simple and familiar designs!

Users do not want anything out of the ordinary. An interface that feels immediately familiar and intuitive will help to create a good first impression and keep customers on your site.

The Power of Nothing

Ralph Lauren Homepage

Given that it is central to how people consume information, white (or negative) space will help your site make a good first impression. Namely, white space will allow elements to “breathe” and engage your audience straight away, rather than scare them off by overloading them with information. A great example of this can be found on the Summer Sale banner on Ralph Lauren’s homepage. 

Visual focus can only be created when there is enough space around any given on-page element (text, images, CTAs). In fact, UXPin found that adding in white space can increase conversion rates by 20%!

N.B. white space does not have to be white. It simply refers to space that is left blank, not occupied by any UI elements or content.

#3 Your CTAs Are Not Engaging Enough

A CTA (call-to-action) is an interactive UI element that instructs users to take a specific action. Throughout your product pages, shopping cart, and checkout flow, CTAs should work in harmony to push your customers through the conversion funnel.

Poor CTAs are those which do not encourage your user to interact with your store and, ultimately, make purchases. In turn, they may contribute to a low conversion rate. Factors that influence the effectiveness of your CTAs include:

  • Colour: do they stand out?
  • Size: are they big enough?
  • Microcopy: are they persuasive?

Each of these variables could have a direct impact on your conversions. For example, SAP found that changing to orange CTAs boosted their conversion rate by 32%. That is not to say that orange CTAs will work for you; instead, such findings simply illustrate that the colour of your CTAs matter. As with all these factors, it is all about what is suited to your website (e.g. choose a CTA colour that would complement your background colour).

Solution: User-friendly CTAs

UI/UX design is all about guiding users through your site; CTAs should act as signposts that help them do so. Effective CTAs will contribute to smoother site navigation, and thus contribute to a more enjoyable shopping experience.

By helping you understand size, colour, and microcopy through the lens of user experience, we will explain how UI/UX should inform the way you design your CTA buttons:

Colour

Colour choice depends on many factors. UI/UX designers may even conduct research into the colour that would resonate most with their specific target audience, according to their interests or demographic. But most importantly, the primary purpose of your colour choice is to make your CTA stand out. It must be contrasting enough from your background and the other on-page elements to draw users’ attention. The right colour will naturally help to encourage clicks and conversions.

Size

A CTA button needs to command attention. To do so, it must be big enough to catch the user’s eye, but not so big that it disturbs the page’s visual hierarchy. Size is particularly important when it comes to mobile CTAs as they must be able to pass the “thumb test” i.e. buttons must be easy enough to click without accidentally clicking the wrong thing. A button that is too small can easily frustrate a user and cause them to leave your site.

Microcopy

Many people fail to realise that the copy (or microcopy) you use for your CTA will directly influence user action i.e. whether the button/link is clicked. This explains, however, why there are so many uninspired and vague “Learn More” or “Get Started” buttons out there. Your CTA button should both create urgency and be descriptive; the user should know exactly what will happen after they click it. For example, the simple “Shop [insert category]” format that Calvin Klein’s homepage uses immediately helps their customers find what they are after!

Calvin Klein Homepage

#4 Your Website Does Not Cater for Mobile Users

November 2016 was the first time that mobile traffic surpassed desktop traffic worldwide. Since then, the amount of mobile users has only increased.

Importantly for eCommerce sites, people are not just browsing the web more on their mobile devices, but they are actually making more purchases. Mobile commerce accounted for 60% of total UK retail online sales in 2021! With m-commerce occupying such a huge market share, your site must provide a good mobile experience to be competitive.

According to a study conducted by Sterling Research and SmithGeiger for Google, 67% of mobile visitors are more likely to make a purchase from a “mobile-friendly” site. In turn, a site which is not mobile-friendly (easy to use on a mobile device) will alienate a lot of users, damage your conversion rate, and mean that you miss out on a lot of revenue.

If you are unsure whether your site is mobile-friendly or not, take Google’s Mobile-Friendly Test.

Solution: Ensure Your Site Is Mobile-Friendly!

Each of the UI/UX design concerns we have discussed – user research, visual design, CTAs – have specific mobile concerns. Although there are many other moving parts when it comes to mobile-friendliness, we will use these three examples to explain how you can improve the mobile experience your site provides.

Google Mobile Friendliness Test

Mobile UX Research

As we have already discussed, the design process must be informed by user research data. So, in order for your site to cater for mobile, there’s no point in extracting insight from screen recordings of desktop users. You must see how your audience interacts with the mobile version of your site.

As Bill Loller, Vice President of IBM Smarter Commerce, puts it:

“To truly cater to their mobile customers and provide a flawless user experience, businesses must understand the context in which their customers are using mobile and use this to better the services they already offer. For example, are they using their mobile devices to buy products, or research products for later purchase online or in store? If they do use mobile predominantly to research products and buy in store, are they doing their research while in-store, or from elsewhere?”

Mobile UX research is what will allow you to answer such questions. Mobile users have different needs and expectations than their desktop counterparts. For instance, they tend to prefer simpler interactions, something that your mobile design will have to cater for through e.g. unintrusive navigation menus and minimal distractions.

Mobile Visual Design

It is much harder to find visual balance on a smaller screen, especially because horizontal whitespace (margins) is often not an option on mobile. To create an effective, minimalist design, you have to rely on other important design decisions.

We recommend prioritising getting rid of any UI elements that are not necessary. A simple rule of thumb that many UI/UX designers stick to is to ensure that there is only one primary action per screen. It’s good to keep this in mind when deciding what makes the cut (important CTA buttons) and what does not (animations whose purpose is solely aesthetic).

Remember, your copy must also be readable without zooming in, so make sure you have chosen a font that translates well across many different sizes (i.e. many different devices).

Mobile CTAs

A particularly important part of your mobile design is your CTAs. As previously touched upon with the “thumb test”, the fact that buttons become “tappable” rather than “clickable” on mobile adds another dimension to CTAs.

Tap target problems occur when mobile CTAs are too small or too close to another UI interactive element.

  • Too close: you may end up clicking on the wrong thing.
  • Too small: the button may not respond to the user.

Apple, for instance, recommends a target size of at least 44×44 pixels in their iPhone Human Interface Guidelines to ensure that there are no issues when it comes to tapping buttons/links on its devices.

Solving Your Conversion Rate Problems with UI/UX Design

The best-kept secret in the eCommerce industry is that improving your site’s user experience will improve your conversion rate. Many businesses, however, simply do not give enough weight to their website’s on-page experience, instead solely relying on SEO services and PPC services to grow their brand.

PPC and SEO certainly have a part to play in CRO, given that you need to be getting the right people to your site in the first place. However, ready-to-buy customers with high purchase intent mean nothing if you are unable to convert them, and that’s where UI/UX comes in.

A quality UI/UX design agency will help you create a website that actively encourages your customers to make purchases. First by identifying what’s stopping your site from doing so, and then by creating tailored design solutions that remedy it.

Trafiki is an eCommerce marketing agency that offers UI/UX design services to take ambitious online businesses to the next level. We do this through data-driven simplicity. Why not book a free minute 30-minute discovery call and see what we can do for you?

Magento 2 Optimisation
BigCommerce
Shopify ecommerce optimisation
Woocommerce ecommerce optimisation
Google Logo
Amazon Shopping Optimiasation