Crafting outstanding user experience requires a balance of intelligent code and design

Running a successful business requires knowing your customers. In the past, many business decisions were made based on assumptions about customer behavior, since these businesses had limited insight into what their customers wanted. Today, companies are increasingly using data-driven methodologies to make informed decisions about how to do business in the contemporary moment. As more and more of the world’s commerce moves online, user experience is becoming more important and increasing in popularity.

User experience (UX) is an interdisciplinary research and design field that focuses on how users interact with your product, and the quality of that interaction. Quality can be measured in many different ways, some of which are specific to the product you are building. Despite this variety of approaches to measurement, the term quality generally alludes to a product’s adaptability and ease of use across a variety of different scenarios. Whether you’re building a website, mobile app, or even a physical product, it’s critical to prioritize UX, which can help ensure that your customers’ needs are being met by your product.

In fact, meaningful investments in user experience can have game changing effects for your sales. According to a recent aggregate study from the Baymard Institute, a leading independent UX research firm, 69.82 percent of all online shopping carts across industries are abandoned before purchase. A qualitative survey showed that users often abandoned their carts because the website required each user to sign up for an account (24% of respondents) or had an unnecessarily complex and frustrating checkout process (17% of respondents). Changes to the design of a purchase flow, such as adding a guest checkout option, are improvements that can tangibly increase sales. It’s no surprise that websites built today prioritize design based around good UX practices.

However, design is only one dimension of user experience. Other factors like site performance, personalized notifications, and easy navigation can positively influence your user experience. In this article, we will explore some of the many ways that code can be used to improve, or even automate, great user experience on your website.

The Importance of Site Performance

In a 2020 study, the marketing research firm SaleCycle found that mobile devices were responsible for 64 percent of all traffic to online retailers. This shows a 14 percent increase from the previous year, when only 50 percent of purchases were made on phones or tablets. This gap reveals an immense opportunity to improve mobile sales through focus on user experience.

One factor that heavily influences mobile sales is the bounce rate of your site. Bounce rate refers to the percentage of users that navigate to your page before immediately leaving. Loading time has a huge impact on your site's bounce rate. According to research conducted by Google, increasing your load time from 1 to 3 seconds can cause the bounce rate to increase by 32 percent. Even more shockingly, an increase from 1 to 5 seconds increases the bounce rate by 90 percent.

With numbers like these, it's clear that having your website load fast is a necessity. Poor performance can have a negative impact on your site's user experience in multiple ways. Not only will your users be more likely to navigate to your site before quickly leaving, thus contributing to a higher bounce rate, but the chances that they find your page on search engines will be lower. Popular search engines like Google use metrics including the bounce rate and load time of each web page to determine how to “rank” these pages, which contributes to how close to the top of the page it appears in search results and ultimately how much traffic each web page receives.

Luckily, there are many ways we can improve your site performance with code and improve your site’s user experience. As a general rule of thumb, it’s best to only load what you need onto each page. Superfluous data from unnecessary calls to your database or an external API can slow your site down, causing users to leave the site quickly and contribute to your bounce rate.

Let’s say you were building an online art gallery with Velo, Wix’s platform for full-stack web development. In order to showcase your pieces, you would likely use a Repeater element, which allows you to automatically generate unique page entries or even complete web pages for each item in your database. Hypothetically speaking, let’s assume you have 839 art pieces on display. Loading all 839 pieces would take a significant amount of time!

Instead, we can use delayed loading so that your site only loads enough images to populate what’s visible on the initial page load. It will also tell the page to load the additional content in the background, so that it shows up quickly when the content is made visible on the page.

In the diagram above, you can see that by using this technique, the images above the “fold” are populated in the initial $w.onReady() Event Handler, which is designed to be used when Wix Page Elements are loaded and ready to be populated. From there, we can load the rest of the items in the Repeater asynchronously, thus improving the load time performance for our page. There are many other best practices that can be used to improve your site performance with Velo, which can also, in effect, improve your site's user experience.

Great Navigation increases Product Discoverability

Making your website easy to navigate is an essential part of creating a good user experience. This can be done as part of the design process by offering clearly defined pages that allow users to easily determine the purpose of a site. For example, it’s important to categorize products in an ecommerce store in ways that help your customers experience the full scope of the products you sell.

One underutilized aspect of great site navigation is Site Search. According to the Baymard Institute, search is the preferred method for finding products on mobile sites, yet 72 percent of mobile sites didn’t have category suggestions within their autocomplete functionality. This issue is as significant as auto suggested product category filters can be a great way to improve search result accuracy.

Luckily, the Wix Site Search API allows you to create a custom search solution that auto suggests items by facet (also known as category). Additionally, this API also allows you to search through any Blogs, Bookings, Products, or even Forum Posts generated by Wix Apps on your site. By making your site search more accurate, you will drastically improve your user experience. This translates to higher product discoverability and greater customer satisfaction.

Automate Personalized Customer Interactions

Customers notice little details that show you care about them. In fact a 2020 study conducted by Google found that 40 percent of shoppers indicated that they were likely to spend more than they intended when the experience was highly personalized.

This points to the importance of using data to drive user experience. Today, most ecommerce stores give personalized recommendations throughout the shopping experience. Stores are able to use data gathered from previous purchases, or similar user personas to make algorithmic recommendations that their customers are likely to enjoy.

This is a mutually beneficial arrangement, as it saves shoppers time while increasing Average Order Value (AOV) for your ecommerce business. If you're interested in implementing your own recommendation system in Velo, check out this tutorial we wrote about it!

There are many other opportunities to use data to increase personalization and the likelihood of a sale in your online store. To counter the 69.82 percent of customers who abandon their shopping carts without purchasing anything, you could use Velo’s Triggered Email tools to send them an automatic reminder one hour after they left their cart. Sending an engaging message or a coupon via email can also help increase your chances of completing the sale.

The flexibility of code and the ability to leverage data allow you to build websites with excellent user experience, which helps maximize your ability to meet your customers’ needs. Through exploring the ways data and design work together to create great user experience, we hope to inspire you to think of new ways to do so within your Velo site!