Back
Replatforming i rebranding sklepu e-commerce B2C z segmentu fashion
Cel projektu
Przenieść MyBasic z platformy, która ograniczała biznes, na szybszy stos headless zbudowany na lata, a następnie pozostać jako długoterminowy partner rozwijający sklep.
Zakres prac
Projektowanie UX/UI
Development headless e-commerce
Integracja systemów
Ciągły rozwój produktu
Wdrożenie redesignu UX/UI
Czas trwania
Współpraca od 2021
Technologie
Shopware 6
Next.js
React.js
TypeScript
PHP 8
Klient
MyBasic
Faza 1 z 2
MyBasic przyszedł do nas ze sklepem, który przestał nadążać
Marka używała PrestaShop, stawiając na jego dużą bibliotekę gotowych modułów. Wyszło odwrotnie. Tak wiele w sklepie było dopasowane pod klienta, że każdy moduł trzeba było sprawdzać i przerabiać, zanim zaczął działać poprawnie - często zajmowało to więcej czasu niż napisanie funkcji od zera. Rok później to, czego zespół naprawdę chciał, wciąż czekało w backlogu, a te same podstawowe błędy wracały.
Frontend działał powoli - problem szczególnie dotkliwy na mobile, źródle około 80% odwiedzin i 60% sprzedaży. Dokładanie pieniędzy do starej konfiguracji oznaczało tylko więcej długu technicznego w silniku, który i tak chcieli porzucić.
Rozwiązanie
Przenieśliśmy MyBasic na build headless - Shopware 6 z tyłu, Next.js z przodu
Oddzielenie storefrontu od silnika e-commerce rozwiązało oba problemy jednocześnie. Frontend Next.js mogliśmy zbudować mobile-first i mocno zoptymalizować pod kątem szybkości. Po drugiej stronie stanął Shopware 6, czyli rdzeń e-commerce gotowy na dalszy rozwój: integrację z ERP, nowe kanały sprzedaży i kolejne rynki. Od początku założyliśmy konkretne cele wydajnościowe: dobre Core Web Vitals i wynik 80+ w PageSpeed na urządzeniach mobilnych i desktopie.
Katalog 14 000 SKU potrzebował odpowiadającego modelu danych
MyBasic sprzedaje podstawowe ubrania dla całej rodziny: jednolite kolory, bez nadruków, szyte w Polsce z certyfikowanych materiałów i dostępne przez cały rok. Ta prostota ukrywa zaskakująco duży katalog - około 220 modeli rozgałęziających się na około 3300 wariantów kolorystycznych i około 14 000 pojedynczych SKU. Model danych zbudowaliśmy na wewnętrznej logice marki: model, potem kolor modelu, potem indeks. Strona kategorii pokazuje jedną pozycję na model, z próbkami kolorów pod spodem. Każdy wariant koloru dostaje własny, czysty adres URL pod SEO. Odcienie na tyle zbliżone, że łatwo je pomylić, można grupować w jednym filtrze. Klienci dostają katalog, który szybko się przegląda, a Zespół taki, którym bez problemu się zarządza.
Integracje i back office
Podłączyliśmy sklep do systemów codziennie prowadzących biznes i zbudowaliśmy back office dopasowany do tego, jak naprawdę pracuje zespół.
Fulfillment działa przez Omnipack. Faktury pochodzą z Fakturowni. Płatności przechodzą przez PayU i PayPal. GetResponse (Klaviyo w fazie 1) napędza marketing automation; EmailLabs wysyła maile transakcyjne. GA4, GTM i Meta Conversions API działają obok feedów dla Google Merchant Center i Facebooka. mybasic.pl i mybasic.eu działają z jednego CMS - waluty, podatki, tłumaczenia i zasady wysyłki per rynek, wszystko w jednym miejscu.
Za dużo działo się ręcznie w Excelu. Zmiany statusów można teraz robić hurtowo z listy zamówień. Pracownicy mogą tworzyć i edytować zamówienia z CMS, a także czytać pełną historię audytu. Zwroty są bezpapierowe przez InPost Szybkie Zwroty. Do tego wszystkiego zbudowany został program lojalnościowy, elastyczny silnik promocji, import stanów z CSV i edytor no-code do landing page'y, bloga i banerów.
Wdrożenie
MyBasic wystartował na nowym stosie na początku 2023 roku. Zachowaliśmy istniejącą strukturę adresów URL, zmigrowaliśmy konta klientów wraz z pełną historią zamówień i zwrotów oraz przenieśliśmy produkty, blog i strony statyczne.
Ciągłe doskonalenie
Faza 2 z 2
W 2026 roku MyBasic postanowił wymyślić swoją tożsamość wizualną od nowa
Wdrożenie produkcyjnie nie było końcem - od startu nieprzerwanie dopracowywaliśmy sklep, kierując się uwagami dużej i lojalnej bazy klientów. Architektura headless sprawiła, że nie było z tym problemu: zmiany na froncie nie ruszają rdzenia e-commerce i odwrotnie. Gdy wpłynął brief rebrandingowy, agencja FellowHeads zaprojektowała nową tożsamość marki i UX od podstaw. Naszą rolą było postawienie zupełnie nowego storefrontu z nowymi funkcjami w około trzy miesiące.
Dostarczyliśmy nowy storefront w około trzy miesiące
Modułowa architektura z pierwszej fazy się zwróciła. Ponieważ rdzeń handlowy mógł zostać, przebudowaliśmy całą warstwę widoczną dla klientów na nową stylistykę FellowHeads. Storefront wysuwa kolor na pierwszy plan - słusznie, bo cały sens tej marki to proste ubrania w odcieniach, które ludzie lubią. MyBasic Club również przeszedł przebudowę. Historia marki wysunęła się na pierwszy plan: odzież made in Poland z certyfikowanych materiałów, skrojona dla całej rodziny.
Lojalność, polecenia i funkcje utrzymujące klientów wracających
Rebranding nie był powierzchowny. MyBasic Club dostał pełny redesign - saldo punktów, realizacja i historia transakcji na komputerze i telefonie. Program poleceń również został przebudowany - z czytelniejszą ścieżką udostępniania linków i panelem pokazującym, ile zaproszeń zostało w danym roku.
Postawiliśmy storefront na Next.js 16 z włączonymi Cache Components i partial prerendering
Gdy zaczynaliśmy przebudowę, Next.js 16 wprowadzał nowy model renderowania. Cache Components pozwoliło dokładnie określić, które elementy są buforowane, a które nie. Szkielet strony i dane katalogowe są prerenderowane, a informacje zależne od konkretnego kupującego są doładowywane strumieniowo. Partial prerendering łączy oba podejścia w jedną stronę, dzięki czemu przeglądarka dostaje gotowy statyczny szkielet niemal natychmiast. Efekt jest szczególnie widoczny na mobile: skróciły się zarówno czas do pierwszego bajtu, jak i first contentful paint.
Przebudowaliśmy storefront wokół mobile i widać to w szybkości
Skoro większość przychodów pochodzi z telefonów, drobne interakcje musiały działać natychmiast. Filtrowanie kategorii jest szybkie. Najechanie na produkt podmienia zdjęcie na drugie. Gdy kupujący zmienia kolor, zachowujemy wybrany przez niego rozmiar - co ogranicza zwroty i zgłoszenia od rodziców kupujących ten sam artykuł w kilku kolorach. Obrazy są serwowane przez Cloudflare Images Transform, renderowane w rozmiarze odpowiednim dla urządzenia i doczytywane wraz ze scrollowaniem strony. Stan magazynowy, wymiary modela lub modelki, tabele rozmiarów i skład tkaniny są dokładnie tam, gdzie kupujący ich szukają.
Efekt
Ze starej platformy, która ich ograniczała, do szybkiego i w pełni odświeżonego sklepu - i ze współpracą, która wciąż trwa.
Zobacz na żywoPowiązane projekty:
Porozmawiajmy o Twoim projekcie!
Opowiedz nam o swoim projekcie. Pomożemy zaplanować architekturę, zakres i realizację.
