E-commerce: Improving the user experience (UX)

In physical retail, brand experience and engagement are key drivers of loyalty. For an online store, it's not much different. Design, navigation, speed and functionality are all pillars of a good user experience...

User experience (UX): What is it?

THE UX

The "user experience" is very often referred to as "UX" for short.

User experience refers to the overall experience of a user when interacting with a brand, using a product or receiving a service. In the digital domain, we are very interested in the quality of the visitor's experience on a website.

THE UX DESIGN

UX design is about designing the best possible experience for customers or consumers when they use a product or website. 

Why focus on the user experience?

Whether you offer products or services, if you have created a website, it is probably to be more visible and/or increase your sales. It is therefore logical to do everything you can to make sure that people who visit your website want to buy what you offer, buy more than expected (to increase the average basket value) and come back for a future purchase.

So you should have just one objective in mind: ask yourself how to transform a prospect (someone who doesn't know your products yet) into a customer who orders; that's what we call conversion.

The user experience: Two key aspects

THE USABILITY LEVEL OF THE WEB INTERFACE

You must build your web pages with the awareness that you want to effectively show the user what you offer and what you expect from them.

Questions to ask yourself:

• how easy is it to navigate around your website?
• is the menu clearly structured?
• are the steps that lead the user to the sale clear?
• are the clickable words or buttons placed in the right places and accessible?
• ...

THE EMOTIONAL IMPACT FELT BY THE USER

The look & feel, that is to say the aesthetic aspect of your website, will clearly influence your users and your target. You have to create desire.

Questions to ask yourself:

• are the pages on your website visually pleasing?
• is the interface user-friendly?
• is the text too long?
• what is the feeling you want to create in your website visitors? are you getting the right messages across?
• ...

Who can improve the UX of your website?

The answer to this question may vary depending on whether you are working on an Open Source platform or with a SaaS solution (web page rental such as Wix, Shopify, Squarespace), and whether you work alone or with others.

• On Open Source platforms (such as Wix and WordPress), the user experience is in principle already taken into account in the proposed templates. So you can decide to be content with that.

If you want to take it further, you can contact a developer and/or a UX designer.
A developer usually takes care of (re)building a website, coding, and can give tips on building and layout. It is rare for them to specialise in UX and improve the website specifically for the purpose of improving sales, but you can still give them specific tasks to improve the user experience, tell them what you want and how to code.
If you hire a UX designer, they will audit your website and tell the developer how they can change the structure of the website. Or you can change what you want yourself based on the feedback, if you know your way around.

• With the SaaS solution: you rent a web space and can freely modify a lot of things yourself (especially with easy-to-use drag & drop), but it is a formula where the functionalities are limited since everything has already been coded by the platform (Shopify, Squarespace, etc.). You will be a bit limited. If a freelancer or agency built your website, they often have experience in UX design and will be able to ensure that the basic principles are consistent. But you can also hire a UX design specialist.

Where do you start when improving the UX?

When you want to improve the user experience, it is both:

• 1) to remove anything that may prevent a user from purchasing your product or service;
• 2) to enhance and create a desire that will make your user want to buy, or buy more.

THINK ABOUT WHAT MIGHT PREVENT A USER FROM PLACING AN ORDER

It is part of the user experience analysis to identify what to avoid, that is to say, what stops a visitor from buying, what makes them angry, annoyed, suspicious or hesitant.

Here are some examples where you will probably lose an opportunity to make a sale:

• the website is too slow and takes a long time to load the pages;
• the website does not look professional or reliable enough;
• there are too many steps required to buy, too many clicks are needed, the attention is lost between the user's desire and the 'buy' button;
• the user does not understand your offer sufficiently; it lacks clarity;
• the user gets lost on your website, they do not know where they are;
• there is an interest in the product but the user needs more information and cannot find it;
• the payment process is not simple and takes too much time; too much data is requested;

TIPS AND TRICKS FOR IMPROVING THE USER EXPERIENCE

Here are some tips to guide your website visitors through the conversion funnel, and help you find a balance between different information/images you can place.

But first, keep these two basic principles in mind:

• it is justifiable to take inspiration from other websites you like. Pay particular attention to those where you feel the urge to buy.
• an outside view is worth its weight in gold. Put yourself in the shoes of your customers, especially new ones. You know your business inside out, but new customers do not.
  Imagine how your (grand)parents or someone who is not used to using the internet would find their way around your website. At every step on your website, ask yourself if the person understands how to take the next step to complete the purchase. So ask people around you for practical external opinions on the experience of using your website and listen to these valuable outside opinions; this will help you make your choices, see your website from another angle and organise it as well as possible so that it is clear and simple.

TIPS

• 👉 Even if you already have an e-commerce site, map out the whole process of using the website, from the moment the person arrives on the website until the moment they receive their order. Map out all the possible scenarios with arrows and identify if any steps are missing and if the process is smooth.
  Go from the homepage to the product, to the basket, to the payment, to the confirmation and acknowledgement email. The idea is to translate your needs into drawings that will help with the coding.
• 👉 KISS = Keep it simple & stupid. How do you make your messages as clear as possible?
  You probably want to talk about your story, your values, your concept, your products, and that can achieve a lot. Find a balance between the information you want to give and the importance of leading people to the option of buying the products. 

For example: consider breaking up text with bullets (classic or original) or dashes, using frames/subheadings/pictograms to separate paragraphs, or using visuals.
This will make your proposals more attractive and allow the user to get all the information they need.

Use beautiful, relevant images. Using beautiful photos and videos improves the conversion rate. You need to find ones that describe the product or service you are selling and support the message you are trying to get across. Avoid photos that are too general. Also be careful not to use too many photos or videos as this can slow down the website. 

• 👉Use calls to action (or CTA for short). It is commendable to spend time and energy writing copy and researching or creating images and videos, but if it's not easy to follow up on this content/information, and there are no links to a buying process or to the next step, you're going to lose potential sales.
  So add buttons, links and clickable text. 

To optimise your website, you must first determine the number one action you want the user to take: do you want them to see all your products directly or a specific segment? Do you want them to read about your brand first? Or to know how to contact you? 

Your customers are used to following visual cues to determine what content is important to them. CTAs that have an action word will make it easier for users of your website to browse and get exactly what they want where they expect to find it.
So stay consistent in your colour codes and distinguish descriptive text from calls to action. Also use relevant words and verbs, such as "Read more" rather than "more information". Make people want to act by using the first person, infinitive or imperative. For example: 'I open my account', 'become a member' or 'discover our services'.

• 👉 Keep white spaces (no text). Don't think you have to fill the space to the max. White space makes your content more readable while allowing the user to focus on the elements surrounding the text. White space around text and headings increases user attention by 20%. It also gives an impression of openness, freshness and modernity. And if your brand image is consistent with these elements, it can help you communicate that impression to the user.

The downside of white space is that it takes up space. The key is to find a balance between what is most important to communicate at the top, and surround that with space to highlight the image and/or text. Also remember that the homepage is the most important, and that only 60-70% of users scroll to the bottom of web pages. On the homepage, you should give as much information as possible about your business with a minimum of text. Add a video or a visual that (re)presents your concept as well as a short text that explains what you do.

• 👉 Separate the elements and avoid homogeneous blocks.
  Break your website down into easy-to-read pieces so users don't see it as one big chunk of information that overwhelms them and that they don't read. Provide headings and subheadings, different fonts, bold text, etc.
• 👉 Optimise the loading speed of your website.
  One of the most frustrating experiences for web users is waiting for a page to load. The customer does not have the patience to wait 2 or 3 seconds for the page to load. According to statistics, five extra seconds of page loading time can increase your website's "bounce rate" by more than 20%. Bounce rate is the term used when analysing web traffic and represents the percentage of visitors who enter the website and then leave it instead of going on to visit other pages.

In terms of referencing, Google even penalises websites that are not fast enough.
Several tools can help:

• • Google PageSpeed Insights provides information about the speed of a website on a computer, smartphone or tablet. 
  •  Think with Google gives advice of all kinds and allows you to test the speed of your website (Test my site). 
  • Often, it is the images (ideally sized between 0 and 8,000 kilobytes/image) and videos that slow down the loading: the Compressor.io tool allows you to compress images before you upload them to your website.
• 👉 Your entire website must be usable on a smartphone. This is called being "Mobile responsive". More and more people are buying on their smartphones. Your website may look great on a computer, but have you tested all the pages on a mobile phone? Arrange the buttons, texts and images accordingly. The positioning of the buttons and the main menu is often different on a mobile device (it is often presented on the side as a "hamburger"). So you really need to check all the versions of your website and, if necessary, adapt the layout so that everything remains user friendly.
• 👉Test your website on all possible browsers and on a lot of different smartphones.
  There are numerous tools that allow you to improve the user experience of websites and applications, and even have videos about the movement of the mouse on your pages. Examples are Inspectlet or Hotjar. Lastly, some organisations offer test days, where users are observed and questioned live during their experience of consulting a website.
  Don't panic if this doesn't appeal to you. The practical feedback received from people around you is very valuable and will help you.

If you are unsure about the layout of your website but you know what action you want the user to take (buy/contact/get to know you), you can also offer a version A and a version B, where prospects are redirected to either page, allowing you to choose the appropriate version.

• 👉 Tracking what's hot and what's not.
  Try to understand and analyse what users like and don't like about your website. These sites can help you:
  • Google Analytics: allows you to collect all types of useful data (on the type of people who arrive on the website, the impact of advertising campaigns, etc.)
  • - UX Tracking tools: Crazy Egg, Hotjar, Mouseflow - free tools (paid versions also exist) that allow you to know where users place their mouse ("heat" zones), and where they click.
    This can be useful for choosing what to put in the tabs based on what customers are interested in as a result of the numbers and not just your intuition or preferences.
• 👉 Prioritise. Complete UX improvement can't happen overnight, as you need hard data to make sound decisions. Therefore, it is essential to prioritise when you are starting to improve the user experience. Start by updating the most important page of your website. This can be the homepage, landing pages, sales pages, information page or contact page. For an e-commerce site, starting with the sales pages can be a good idea.
• 👉 Pay attention to data protection.
  Be careful not to ask for too much personal data when customers are ordering (date of birth, etc.), and even less at the same time. This may scare the customer, especially if it is difficult to work out why it is needed in relation to the product purchased. You also need the visitor's consent. And make sure you state clearly what you intend to do with the data. This can be stated in a single sentence next to the form, for example, with a link to the Privacy Policy document (mandatory document!) for details (including the type of data stored, how it is stored, why it is stored, how long it is stored and who has access to it, etc.).
  Read more on this topic

Conclusion

Some useful links:

• Web and digitalisation grants for Brussels entrepreneurs.
• Platforms with the names of freelance UX designers from around the world: UpWork, Fiverr.
• Examples of agencies in Brussels: on request from jvanveer@hub.brussels
• Agence digitale solidaire - Article: Optimise your e-commerce