How to drastically improve the customer's payment and search experience

 

The most significant milestones of this project have been the reconstruction of the payment process towards a more dynamic and simple solution, and the optimization of the search feature. With these changes, the customer is now able to complete the purchase in less than 45 seconds. In addition, they are now able to perform a definitive search for items sold in the store (by brands, colors, categories, etc.)

 

This project was undertaken for a leading multi-brand eyewear retailer. As we will see, they had faced several issues relating to web performance and user experience.

 

In order to achieve the milestones for the customer, we applied a variety of technologies both at the front-end and back-end aspects of its e-commerce.

 

Problems affecting the conversion rate

 

The initial investigation of the website revealed several deficiencies which severely compromised its conversion rates. The most important and urgent areas to resolve were the following:

 

1. Poor page-loading performance, with slow and insecure browsing.
2. An error-prone and counter-intuitive checkout experience.
3. Very low scores on Lighthouse audits, the market standard for evaluating web performance metrics.
4. Absence of tools to generate marketing content and to modify the catalog in a simple way.
5. Problematic Search and Product Filter functionalities.

 

All the above points had a direct negative effect on the website’s conversion ratios, and also on its mobile usability, which was a critical finding that needed to be addressed.

 

What technologies we used:

The success of our e-commerce project is attributed to several factors, one of which is the set of new technologies used to combat the problems found. These technologies differed from the ones used in the previous web state, which was monolithic and inflexible in nature. All this also took into consideration of the goal of preventing an increase in running costs compared to the old technologies used.

 

This approach allowed us to work in a decoupled manner for the various parts of the web, applying the best available solution to solve each of the problems identified and defined within scope.

 

Among the technologies we used in this project are as follows:

 

For better performance

 

• We used a Static Site Generator (SSG) to speed up browsing and to make it a seamless experience for the end user. This technology allowed us to generate a website with apparent static content, which is inherently fast but whose data source is dynamic and flexible.
  The specific SSG solution chosen is Gatsby, based on React.

 

To simplify access to the catalog and marketing content

 

• An independent Content Management System (CMS) and Software-as-a-Service (SaaS) was used to manage all the dynamic aspects of the site. Through an accessible and easy-to-use web interface, the CMS allowed the management of both catalog and marketing content, which could be done directly or through bulk upload of data.
  We opted for DatoCMS, a highly flexible and configurable SaaS solution.

 

To improve the payment system

 

• We selected a SaaS-based Checkout tool, to deliver an agile and modern checkout experience, but with the necessary flexibility in shipping methods, payment types, address management, etc.
  SnipCart is a robust and powerful solution that enables an integrated management of the entire order flow.

 

To improve the search and filter system

 

• Taking advantage of the SSG approach, a client-side search utility was implemented, making the catalog search an immediate and efficient process. Through this approach, the initialization of a webpage triggers a build of indexes that can be used at any time during navigation. The same consideration was made for the improved filter function, using indexes flexibly to generate filtered results to display immediately on the product list.
  Js Search is a modern and well-established search library that provides all the above functionalities in a convenient and simplified way with JavaScript and JSON.

 

How does the new checkout work

The choice of SnipCart allows us to easily incorporate a payment gateway to an existing website, in a personalized way and without additional complications.

 

This technology also includes the integrations which are fundamental to any e-commerce, such as mobile payment, connection to multiple payment gateways, application of discounts, shipping options, etc ...

 

However, the biggest change comes from the user's point of view, making it possible for them to make a purchase without registration in less than 45 seconds.

 

The new checkout is fully responsive and allows for essential customizations in this regard, such as the size adaptation for the purchase buttons in the mobile version (which generally must be larger), or the font size and colors.

 

It also allows us to make a purchase as a guest user, thus removing the barrier of filling a form with information fields that are not necessary for that purchase.

How have we improved the search function and filters

The new search and filter features are now more responsive and very fast loading, giving the feeling of "static navigation" as with the rest of the website.

 

It is sufficient enough to configure a data source, the catalog from the CMS, a series of indexes, and catalog properties of the customer's choice, so that the search and filters are configurable and accessible at any time during navigation.

 

With its self-configuration of the indexes, the list of possible filter values ​​is constructed dynamically using the existing data from the catalog.

 

In addition, different search strategies (exact results, partial, with prefixes, ...) can be used easily and conveniently, even with the ability to implement our own custom strategies (for example, case insensitive but with keyword restrictions).

 

What do you think about our latest project? Did you have the same experience using similar technologies?