YoungWear migration to headless eCommerce in Saleor and Next.js

Problem

The client had to face several challenges with their previous outdated and difficult-to-expand online store. The graphic design was not modern or functional enough, leading to poor user experiences. The goal of the new store was to enter the Ukrainian market, which required adding functionality such as USD currency, Ukrainian language, and Meest shipping method. Due to conflicts between plugins in the previous solution (WooCommerce), the client encountered many problems that would require significant fixes before any development could be possible. Every attempt to add new features resulted in several crashes, further complicating the store. The loading time of the store was definitely too slow, affecting user engagement and sales. As a result, the client was looking for a solution that would address these issues and make the store more functional, user-friendly, and efficient, with further development being trouble-free.

High failure rate

Many changes made by the client and their previous implementers were made on the production version of the application. Changes were made in the admin panel and plugin settings. As a result, implementing new changes required migrating the entire environment with the database. Transferring changes from the staging version involved temporarily disabling the site, exporting content from the production site (content, customers, orders, products), importing content into the staging version, replacing the production version with the staging version, and finally, re-enabling the store. This process was far too time-consuming and costly. As a result, many changes were made on the production version, leading to numerous errors and, in several cases, a complete blockage of sales.

Slow loading time

The store was very slow due to its structure. It used a template from a visual builder that generated a lot of unnecessary code, and many ready-made plugins negatively affected loading time.

High failure rate

Slow loading time

The store was very slow due to its structure. It used a template from a visual builder that generated a lot of unnecessary code, and many ready-made plugins negatively affected loading time.

Challenge

In the project, we had to meet today's requirements and at the same time create a solution that would be easy to expand in the future. One of the most important elements was to improve the user experience through a new store design and speed up its loading time. The new solution had to be reliable and allow for changes to be made easily and quickly without causing problems. Additionally, the company was preparing for expansion into new markets, which meant that we had to choose and integrate with a payment gateway that could handle different currencies, connect appropriate delivery methods, and enable easy translation of product information and content.

Improving user experience

Creating a easily scalable platform

The new solution had to take into account its future development for new functionalities and integrations. Additionally, the platform had to be easily scalable in order to accommodate a larger number of users. Implementing new changes had to be easy and not result in errors.

Preparing the store for entering new markets

Solution

Together with the client, we identified their current business needs and potential future requirements. We created a software development plan that could meet current challenges but was also flexible enough to allow for future changes and development. We determined that the best solution would be a lightweight and fast headless platform, where the visual part and the business logic would be separated and communicate with each other through APIs. As an eCommerce backend engine, we proposed Saleor technology, which provides all the necessary elements for sales, including a simple CMS system and the ability to translate content in a ready-made management panel. The platform allows for the connection of ready-made integrations and easy creation of dedicated solutions. Thanks to its API-first approach, as the business grows and new requirements arise, the platform can be easily integrated with new sales channels or systems such as ERP, PIM, and CMS. To improve the user experience, we designed a new information architecture and design. The expanded menu allows for choosing between different types of products from the men's, women's, or collaboration collection. The visual part (frontend) was created using Next.js technology, which sped up the platform's performance and optimized it for SEO. The project was implemented using the Agile methodology, which allowed us to maintain flexibility and systematically introduce the most important ideas for functionalities. The agile approach to development allowed for quick changes without causing problems, and the company was well prepared to expand into new markets with the necessary features and infrastructure. The code was version-controlled and deployed to the test environment, then to the staging environment for client preview, and finally to the production version available to customers. This process ensured that errors were avoided when introducing new changes.

Saleor is an open source headless eCommerce engine that enables highly scalable platforms.

Next.js is an open source framework that allows you to create fast, flexible and SEO-friendly web applications.

Result

We have created a lightweight and simple headless eCommerce solution that met all the client's requirements and is ready for further platform development, increasing traffic, and implementing marketing actions. The new platform has significantly contributed to the client's business growth.