Today we bring you business case where we have had the opportunity to work on an existing e-commerce and radically improve the shopping experience, without intervening in the appearance of the web.
One of the great milestones of this project has been the change in the process of checkout towards a more dynamic and simple solution and an optimization of the search function. With this change, and from the selection of the item, the customer can complete the purchase in less than 45 seconds. And, of course, carry out a defined search of the items in the store (by brands, colors, categories, etc...) or a dynamic and immediate filtering in the list of products itself.
This is a project carried out on a multi-brand eyewear store, leader in its segment, and which, as we will see, faced different performance and user experience problems.
To achieve this goal we apply different technologies at different levels of the web (front and back).
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:
- Poor page-loading performance, with slow and insecure browsing.
- A checkout buggy and unintuitive.
- Very low scores on Lighthouse audits, the market standard for evaluating web performance metrics.
- Absence of tools to generate marketing content and to modify the catalog in a simple way.
- 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 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
- A Content Management System independent and SaaS 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 SaaS tool Checkout tipo SaaS, 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 client-site search, 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 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?
We are passionate about writing content on e-commerce and technology, in order to help our clients improve their business and increase sales. Subscribe to our monthly newsletter and don't miss out on the valuable insights and resources we have to share.
