Migracja YoungWear do headless eCommerce w Saleor i Next.js

Migracja sklepu internetowego z WooCommerce do rozwiązania w architekturze headless w Saleor i Next.js. Nowe rozwiązanie umożliwiło marce zapewnienie lepszych wrażeń użytkownika i wyjście na nowy rynek UA.

Klient

YoungWear to polska marka odzieżowa założona w Warszawie w 2014 roku, która produkuje ubrania w stylu streetwear z dobrze rozpoznawalnym logo byka. Marka znana jest ze swoich kolaboracji z popularnymi artystami sceny hip-hop oraz bycia promowaną jest przez wielu influencerów.

Problem

Klient musiał stawić czoła kilku wyzwaniom związanym z poprzednim sklepem, który był przestarzały i trudny do rozbudowy. Projekt graficzny nie był wystarczająco nowoczesny ani funkcjonalny, co prowadziło do złych doświadczeń użytkownika. Celem nowego sklepu było wejście na rynek UA, co wymagało dodania funkcjonalności, takich jak waluta USD, język ukraiński i sposób wysyłki Meest. Ze względu na konflikty między wtyczkami w poprzednim rozwiązaniu (WooCommerce), klient napotkał wiele problemów, które wymagałyby znacznych poprawek, zanim jakikolwiek rozwój będzie możliwy. Każda próba dodania nowych funkcjonalności, kończyła się kilkoma awariami, dodatkowo komplikując sklep. Czas ładowania sklepu był zdecydowanie za wolny, co wpływało na zaangażowanie użytkowników i sprzedaż. W rezultacie klient poszukiwał rozwiązania, które rozwiązałoby te problemy i uczyniło sklep bardziej funkcjonalnym, przyjaznym dla użytkownika i wydajnym, a dalszy jego rozwój byłby bezproblemowy.

cross

Przestarzały i mało funkcjonalny wygląd sklepu

Szata graficzna wymagała odświeżenia, a architektura informacji poukładania na nowo. Ze względu na brak odpowiednich kategorii produktów oraz filtrowania, znalezienie odpowiedniego produktu stanowiło problem. W sklepie nie było możliwości dodawania treści promocyjnych lub wyszczególnienia nowych kolekcji produktów.

cross

Problematic development

Due to conflicts in plugins and the inability to update the system, the development of the platform was practically impossible. Attempts to introduce new functionalities usually resulted in causing problems in other parts.

cross

Wysoka awaryjność

Wiele zmian wprowadzanych przez klienta i jego poprzednich wdrożeniowców odbywało się na wersji produkcyjnej aplikacji. Zmiany były wprowadzane w panelu admina i w ustawieniach wtyczek. W związku z tym, wdrożenie nowych zmian wymagało migracji całego środowiska z bazą danych. Przeniesienie zmian z wersji roboczej (stagingu) wiązało się z tymczasowym wyłączeniem strony, eksportem treści ze strony produkcyjnej (treści, klientów, zamówień, produktów), importem treści na wersję roboczą, podmiana wersji produkcyjnej przez wersję roboczą i ostatecznie ponownym włączeniem sklepu. Proces ten był zdecydowanie zbyt czasochłonny i kosztowny. W rezultacie wiele zmian było wprowadzanych w wersji produkcyjnej, co kończyło się masą błędów i w kilku przypadkach całkowitym zablokowaniem sprzedaży.

cross

Wolny czas ładowania

Sklep z powodu swojej budowy działał bardzo powoli. Korzystał z szablonu z visual buildera, który generował masę niepotrzebnego kodu oraz z wielu gotowych wtyczek, które negatywnie wpływały na czas ładowania.

Wyzwanie

W projekcie musieliśmy sprostać dzisiejszym wymaganiom i jednocześnie stworzyć rozwiązanie, które będzie łatwe do rozbudowy w przyszłości. Jednym z najważniejszych elementów było poprawić doświadczenia użytkownika poprzez nowy wygląd sklepu i przyspieszyć jego czas ładowania. Nowe rozwiązanie miało być niezawodne i pozwalać na wprowadzanie zmian w prosty i szybki sposób bez powodowania problemów. Ponadto firma przygotowywała się do ekspansji na nowe rynki, co wiązało się z tym, że musieliśmy wybrać i połączyć się z bramką płatności, która mogłaby obsługiwać różne waluty, podłączyć odpowiednie metody dostawy i umożliwić łatwe tłumaczenie informacji produktowej i treści.

ellipse

Poprawa doświadczeń użytkownika

ellipse

Stworzenie łatwo rozwijalnej platformy

Nowe rozwiązanie miało brać pod uwagę jego dalszy rozwój o nowe funkcjonalności i integracje. Dodatkowo platforma miała być łatwo skalowalna w celu obsłużenia większej ilości użytkowników. Wprowadzania nowych zmian miało być proste i nie powodować błędów.

ellipse

Przygotowanie sklepu pod wejście na nowe rynki

Rozwiązanie

Razem z klientem zidentyfikowaliśmy jego bieżące potrzeby biznesowe oraz potencjalne przyszłe wymagania. Stworzyliśmy plan rozwoju oprogramowania, który mógłby sprostać obecnym wyzwaniom, ale był również wystarczająco elastyczny, aby umożliwić przyszłe zmiany i rozwój. Uznaliśmy, że najlepszym rozwiązaniem będzie lekka i szybka platforma w architekturze headless, w której część wizualna i logika biznesowa będą oddzielone i będą komunikowały się ze sobą poprzez API. Jako silnik eCommerce (backend) zaproponowaliśmy technologię Saleor, która dostarcza wszystkich niezbędnych elementów do sprzedaży, w tym prosty system CMS oraz możliwość tłumaczenia treści w gotowym panelu zarządzania. Platforma pozwala na podpięcie gotowych integracji i proste stworzenie dedykowanych rozwiązań. Dzięki temu, że technologia zaprojektowana jest w podejściu API-first, w miarę wzrostu biznesu i pojawiania się nowych wymagań, platforma może być łatwo zintegrowana z nowymi kanałami sprzedaży lub systemami typu ERP, PIM, CMS. Aby poprawić doświadczenie użytkownika, zaprojektowaliśmy nową architekturę informacji i design. Rozbudowane menu pozwala wybierać między różnymi typami produktów z kolekcji męskiej, damskiej lub kolaboracji. Część wizualna (frontend) została stworzona w technologii Next.js, co przyspieszyło działanie platformy i zoptymalizowało ją pod kątem SEO. Projekt był realizowany w metodologii Agile, co pozwoliło na zachowanie elastyczności i systematyczne wprowadzanie najważniejszych pomysłów na funkcjonalności. Zwinne podejście do rozwoju pozwoliło na szybkie zmiany bez powodowania problemów, a firma była dobrze przygotowana do ekspansji na nowe rynki z niezbędnymi funkcjami i infrastrukturą. Kod był poddany kontroli wersji i wdrażany na środowisko testowe, a następnie na środowisko staging do podglądu klienta, a ostatecznie na wersję produkcyjną dostępną dla klientów. Taki proces zagwarantował uniknięcie błędów przy wprowadzaniu nowych zmian.

Next.js

Next.js to open source framework, który umożliwia tworzenie szybkich, elastycznych i przyjaznych dla SEO aplikacji internetowych.

Saleor.js

Saleor to silnik headless eCommerce typu open source, który umożliwia tworzenie wysoce skalowalnych platform.

Rezultat

Stworzyliśmy lekkie i proste rozwiązanie headless eCommerce, które spełniło wszystkie wymagania klienta i jest gotowe do dalszego rozbudowywania platformy, zwiększania ruchu i wprowadzania działań marketingowych. Nowa platforma znacznie przyczyniła się do wzrostu biznesu klienta.

tick

Nowy design i lepsze doświadczenia użytkownika

tick

Wzrost odwiedzających z 5k do 20k miesięcznie

tick

Wzrost sprzedaży

tick

Rozliczanie płatności w USD

tick

Metoda wysyłki inPost, DPD i Meest

tick

Szybkie ładowanie strony

tick

Skrócenie czasu i kosztów wdrażanie nowych zmian

Jak przebiegała współpraca

Cytat

W życiu mam szczęście do ludzi. Poznanie zespołu Rigby to potwierdza. Praca z nimi to ciągły rozwój i świetna przygoda. Nasze pomysły i strategia z ich pomysłami, wiedzą i doświadczeniem w efekcie dały świetny sklep internetowy. Nowa platforma już doprowadziła do większej sprzedaży. A to dopiero początek. Będziemy dalej wspólnie rozwijali sklep. Nie mogę się doczekać kolejnych pomysłów i dalszej współpracy.

Cytat
Dominik Chrzanowski

CEO YoungWear

Chciałbyś dowiedzieć się, czy i jak możemy pomóc w Twoim projekcie?

Porozmawiajmy o Twoim projekcie
Logo Rigby

Rigby Sp. z o.o

Pinezka lokalizacji

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

Pinezka lokalizacji

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

Prawa autorskie @ 2023 Rigby - Wszelkie prawa zastrzeżone

Stworzone z ❤️ przez Rigby

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

DigitalOcean Referral Badge