YoungWear migration to headless eCommerce in Saleor and Next.js

Migration of an online store from WooCommerce to a headless architecture solution in Saleor and Next.js. The new solution allowed the brand to provide better user experiences and enter the new UA market.

Client

YoungWear is a Polish fashion brand founded in Warsaw in 2014 that produces streetwear-style clothing with a well-recognized bull logo. The brand is known for its collaborations with popular hip-hop artists and being promoted by many influencers.

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.

cross

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.

cross

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.

cross

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.

cross

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.

ellipse

Improving user experience

ellipse

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.

ellipse

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.js

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

Next.js

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.

tick

New design and better user experiences

tick

Increase in visitors from 5k to 20k per month

tick

Increase in sales

tick

Payment settlement in USD

tick

Shipping methods with inPost, DPD, and Meest

tick

Fast page loading

tick

Shortening the time and cost of implementing new changes

How the cooperation went

Quote

I am fortunate to have good people in my life, and working with the Rigby team confirms that. Working with them is a constant source of growth and a great adventure. Our ideas and strategy combined with their ideas, knowledge, and experience resulted in an excellent online store. The new platform has already led to increased sales, and this is just the beginning. We will continue to develop the store together. I can't wait for more ideas and further collaboration.

Quote
Dominik Chrzanowski

CEO YoungWear

Would you like to find out if and how we can help with your project?

Let's talk about your project
Rigby logo

Rigby Sp. z o.o

Location pin

Al. Rejtana 20A, 35-310 Rzeszów

Location pin

Ul. Robotnicza 42A, 53-608 Wrocław

Copyright @ 2023 Rigby - All rights reserved

Made with ❤️ by Rigby

Built using Next.js & Strapi. Hosted on Vercel & DigitalOcean. 🚀

DigitalOcean Referral Badge