Case study - 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.

  • Client

    YoungWear

  • Year

    2023

  • Technology

    Saleor

Case study image

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.

Problemy

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.

  • warning icon

    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.

  • warning icon

    Problematyczny rozwój

    Ze względu na konflikty między wtyczkami oraz niemożność aktualizacji systemu, rozwój platformy był praktycznie niemożliwy. Próby wprowadzenia nowych funkcjonalności zazwyczaj prowadziły do problemów w innych obszarach.

  • warning icon

    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.

  • warning icon

    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.

Case study image

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.

  • trending-up icon

    Poprawa doświadczeń użytkownika

  • trending-up icon

    Stworzenie łatwo rozwijalnej platformy

  • trending-up icon

    Przygotowanie sklepu pod wejście na nowe rynki

Case study image

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.

    Case study image

    Wyniki

    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.

    • check icon

      Nowy design i lepsze doświadczenia użytkownika

    • check icon

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

    • check icon

      Wzrost sprzedaży

    • check icon

      Rozliczanie płatności w USD

    • check icon

      Metoda wysyłki inPost, DPD i Meest

    • check icon

      Szybkie ładowanie strony

    Case study image

    Porozmawiajmy o Twoim projekcie

    Myślisz o nowym projekcie? Zrealizujmy go! W Rigby zamieniamy wyzwania w sukcesy. Skontaktuj się z nami, a razem wzniesiemy Twój biznes na nowy poziom.

    placeholder

    Grzegorz Tomaka

    Co-CEO & Co-founder

    LinkedIn icon
    placeholder

    Jakub Zbaski

    Co-CEO & Co-founder

    LinkedIn icon