Sklep internetowy WooCommerce - Case Study
Wdrożenie sklepu WooCommerce headless i wielojęzykowego multistore.
Niska wydajność sklepu WooCommerce.
Dotychczasowy sklep został postawiony jako pierwsza próba i walidacja pomysłu biznesowego. Technologia wykonania to WooCommerce. Po pomyślnej walidacji i adaptacji modelu biznesowego do rynku dotychczasowe rozwiązanie przestało odpowiadać zapotrzebowaniom firmy.
Jednym z problemów była niska wydajność sklepów WooCommerce, długo wczytująca się strona główna, strony produktów oraz czas reakcji na zdarzenie kliknięcia. Do tego dochodził długi czas przetwarzania zamówienia. Powodowało to dużą liczbę porzuconych koszyków, a błędy w przetwarzaniu zamówień prowadziły do porzucanych procesów płatności. To wszystko kumulowało się w niskie ROI oraz wysoki współczynnik odrzuceń mierzony przez Google Analytics.
Problem wydajności powodował też, że działania pozycjonowania SEO osiągnęły już swój sufit. Coraz częściej pojawiały się problemy z negatywną oceną robotów indeksujących wyszukiwarki google pomimo zoptymalizowanych pod kątem SEO treści. Było to spowodowane słabymi wynikami testów wydajnościowych, do których roboty te przywiązują dużą uwagę.
[PROBLEM]: Brak RWD
Dotychczasowy sklep nie był dostosowany pod urządzenia mobilne, co wpływało na małą ilość zamówień z tego kanału sprzedażowego.
[PROBLEM]: Zwiększenie asortymentu
Dotychczas firma w swoim sklepie oferowała wyłącznie produkty cyfrowe. Planowała skalować się poprzez dodanie większej ilości produktów oraz dodanie nowego rodzaju produktu, tym razem fizycznego. Model rozwojowy zakładał specjalne ceny w zależności od zawartości koszyka oraz zamówienia na innego odbiorcę niż te, podane do wygenerowania faktury w procesie zamówienia.
Nieintuicyjny wygląd sklepu, proces zakupowy i wyszukiwarka
Właściel podczas fazy discovery zgłosił problem, że znaczna część klientów po złożeniu zamówienia pisze indywidualne wiadomości z pytaniami organizacyjnymi. Było to spowodowane przez małą ekspozycję kluczowych informacji na karcie produktu oraz w samym procesie zamówienia. Również w mailach wysyłanych po złożeniu zamówienia informacje te były zawarte, ale mało widoczne.
Dodatkowo należało zmodyfikować wtyczkę WooCommerce, ponieważ wyszukiwarka działała nieprawidłowo. Po wpisaniu interesującej frazy produkty pojawiające się w wynikach były zupełnie niezwiązane z tą frazą, nie miały jej w nazwie, kategorii, opisie, czy tagu.
Źle działały również powiązane produkty cross-sellingowe. Nie pokazywały prawdziwych relacji tylko losowe produkty, niezwiązane z aktualnie oglądanym lub dodanym do koszyka.
[WYZWANIE]: Ekspansja zagraniczna
Firma planowała otworzenie sprzedaży międzynarodowej, potrzebowała więc precyzyjnego przełącznika językowego. Musiała też przygotować się na większy ruch. Marketing na kilka krajów miał przynieść większe obciążenie istniejącego e commerce poprzez zwiększoną liczbę użytkowników i zamówień.
W trakcie warsztatów discovery odkryliśmy dodatkową potrzebę polegającą na tym, że każdy język miał mieć dedykowany asortyment produktowy, sposoby wysyłki i płatności. W praktyce oznaczało to konieczność implementacji dynamicznego contentu w sklepie, w zależności od wybranej wersji językowej.
Wstępna konsultacja to tylko 15 minut!
Zobacz, jak taki projekt mógłby wyglądać w Twojej firmie
Umów się na konsultacjęCele
01. Nowy UX design ze szczególną koncentracją na uproszczeniu procesu zakupowego i ekspozycji kluczowych informacji dot. zamówienia i procesu zakupowego.
02. Zaprojektowanie UX design dla urządzeń mobilnych.
03. Poprawa wydajności sklepu.
04. Implementacja rozwiązania pozwalającego na osiągnięcie większej skali w liczbie produktów przy jednoczesnej poprawie szybkości przetwarzania zamówienia.
05. Integracja z zewnętrznym systemem przetwarzającym zamówienia do wysłania.
06. Wdrożenie rozwiązania pozwalającego na konfigurowanie zawartości sklepu (produkty, kategorie, sposoby płatności i wysyłki) per język.
07. Zachowanie dotychczasowego ruchu organicznego podczas wdrożenia i po nim.
Headless CMS
Naszą pracę rozpoczęliśmy od serii warsztatów z klientem, na których zidentyfikowaliśmy problemy i wyzwania oraz opracowaliśmy plan wdrożeniowy podczas warsztatu Process Level Event Storming.
Rozważaliśmy całkowitą zmianę silnika e commerce, natomiast klientowi zależało na obniżeniu kosztów i dalszej pracy z wtyczką WooCommerce. Dlatego zaproponowaliśmy nowy silnik TYLKO do warstwy wizualnej, wdrożony na równoległym serwerze i integrujący się z istniejącym silnikiem sklepu.
Opracowaliśmy również dwa modele Buyer Persony: jednej dla B2C oraz drugiej B2B. UX designer stał przed wyzwaniem połączenia ich problemów i przyzwyczajeń zakupowych na jednym layoucie.
Nowy projekt UX
Projektowanie sklepów WooCommerce w Virtas rozpoczynamy od serii warsztatów UX (z ang. User Experience). W tym przypadku stworzyliśmy mapę Customer Journey, na której odkryliśmy dodatkowego użytkownika korzystającego ze sklepu: firmę, do której trafiają zamówienia fizyczne przed ich wysłaniem celem obróbki.
Na podstawie analizy GoogleAnalytics dostępnych ze starej wersji sklepu WooCommerce określiliśmy, które elementy powinny zostać nienaruszone, w celu zachowania dotychczasowych przyzwyczajeń użytkowników.
Następnie zaprojektowaliśmy nową szatę graficzną sklepu z zachowaniem identyfikacji wizualnej marki. Projekt usprawnił proces zakupowy poprzez ograniczenie liczby kliknięć potrzebnych do wykonania zakupu oraz uwypuklenie kluczowych informacjji, które były nieczytelne i słabo dostępne w starym layoucie.
Odciążenie backendu - headless commerce
Nie chcieliśmy wdrażać nowego silnika w związku z estymacją kosztów wdrożenia i utrzymania. Zdecydowaliśmy się więc na integrację z wykorzystaniem wtyczki WooCommerce poprzez REST API i podpięcie nowego layoutu pod tę integrację.
Dzięki temu otrzymaliśmy niezależny system, wdrożony na innym serwerze, który komunikuje się z WooCommerce celem pobrania listy produktów, złożenia zamówienia, czy utworzenia konta użytkownika. Ponowna instalacja WooCommerce nie była konieczna. Obniżyliśmy tym samym koszty wdrożeniowe spełniając jednocześnie wymagania dotyczące wzrostu skali i ruchu w sklepie internetowym.
Dodatkowym atutem odłączenia warstwy wizualnej od silnika sklepu jest to, że zastosowane rozwiązanie nie zamknęło furtki na wdrożenie nowego silnika w przyszłości (np. Magento lub PrestaShop). Jeżeli zajdzie taka potrzeba nowy UI (z ang. User Interface) sklepu zintegrujemy z nowym silnikiem, a sam layout pozostanie nienaruszony.
Całość oparliśmy o technologię Server Site Rendering SSR, co pozwoliło na zachowanie dotychczasowych pozycji w google.
[Rozwiązanie]: Implementacja wyróżników konkurencyjnych
Nie zabrakło również pracy po stronie samego Woocommerce. Napisaliśmy kilkaset linii kodu, dzięki któremu wdrożyliśmy wyróżniki konkurencyjne, niezbędne integracje oraz dedykowane funkcjonalności bez instalacji dodatkowych wtyczek.
Napisaliśmy również cały moduł komunikacyjny, dzięki któremu umożliwiliśmy integrację silnika sklepu z powstającą równolegle warstwą wizualną.
Poprawa wydajności - błyskawiczna reakcja na kliknięcie
Implementacja projektu w modelu Single Page Application SPA umożliwiła nam optymalizację czasu trwania klik-reakcja sklepu. Przykładowo, podczas wyświetlania listy produktów kliknięcie w wybrany produkt natychmiast przekierowuje do karty z jego opisem. Nie ma tutaj ani 1 milisekundy opóźnienia, a dane wczytywane są w tle.
Takie rozwiązanie znacząco poprawia doświadczenia użytkownika z marką oraz sprawia wrażenie płynności i nowoczesności w działaniu e-sklepu, zwiększając tym samym zaufanie do marki i chęć do szybkiego zakupu.
Utrzymanie ruchu organicznego SEO podczas wdrożenia
Mając gotową implementację przeprowadziliśmy testowe wdrożenie, aby uniknąć niespodzianek podczas wdrożenia na serwerze klienta. Taką wersję udostępniliśmy klientowi w celach testowych i walidacyjnych.
Tutaj do pracy przystąpił jeden z naszych konsultantów SEO. Na tej fazie projektu kluczowym było zachowanie dotychczasowego ruchu organicznego sklepu internetowego. Sporządził on dokładną mapę obecnych adresów URL wraz z ich meta opisami, tytułami, nagłówkami oraz adresami kanonicznymi. Następnie nasi deweloperzy przenieśli te dane do nowo powstałego sklepu, tworząc mechanizm odczytujący ustawienia SEO z WooCommerce za pomocą RestAPI.
Wdrożenie multistore
Pół roku po wdrożeniu produkcyjnym klient zdecydował się pójść dalej i zrealizować ekspansję zagraniczną. Wymaganiem biznesowym był dynamiczny content e commerce. Po zmianie języka, aktualizacji powinna ulegać cała treść wyświetlana w nim, włącznie z listą dostępnych produktów oraz wyróżnionymi kategoriami na stronie głównej. Wszystko po to, aby z poziomu panelu administracyjnego WooCommerce móc adaptować się do nowych rynków w prosty sposób, tym samym ułatwiając testy A/B i ekspansję zagraniczną.
Wtyczka WooCommerce w swojej podstawowej konfiguracji zawiera moduł multistore, polegający na instalacji kilku wersji językowych sklepu. Dzięki wcześniej zastosowaniu headless commerce mogliśmy z łatwością zintegrować front sklepu z różnymi wersjami multistore. Dla store polskiego została wdrożona wersja polska panelu administracyjnego, dla obcojęzycznych ich odpowiedniki. Wszystko łączy jeden wspólny i dynamiczny frontend.
Takie podejście umożliwia tanie tworzenie sklepów WooCommerce, a administrator ma wygodny dostęp do zarządzania całością z jednego miejsca, dzięki czemu nie musi przelogowywać się pomiędzy różnymi panelami, w celu dokonania zmian na poszczególnych wersjach językowych sklepu.
Wyniki wydajności
Nowy sklep ładuje się w pełni poniżej 2 sekund i jest gotów do obsługi zachowań użytkowników w przeglądarce. Otrzymaliśmy również zerowe opóźnienie po interakcji użytkownika. Wybranie produktu skutkuje natychmiastowym wyświetleniem jego szczegółów. Dodatkowo podwyższyliśmy ocenę podstawowych wskaźników internetowych, tj. Largest Contentful Paint (LCP), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS), First Contentful Paint (FCP), Time to First Byte (TTFB).
Dzięki temu Google wyżej ocenił sklep internetowy przez roboty indeksujące, co wpłynęło na znaczący wzrost ruchu organicznego po wdrożeniu bez dodatkowych działań optymalizacyjnych SEO.
[Efekty]: Wyniki sprzedażowe
Nowy layout oraz większa wygoda użytkowników poskutkowały średnim wzrostem sprzedaży o 12% w okresie pół roku od wdrożenia w porównaniu do półrocznego okresu przed wdrożeniem. Dodatkowo odnotowaliśmy również wzrost sprzedaży r/r o 23% dla losowo wybranego miesiąca. Czekamy na wyniki finansowe po uruchomieniu sprzedaży w kilku krajach, które jeszcze bardziej spotęgują te liczby.
Wdrożenie wysokowydajnego i skoncentrowanego na wygodzie użytkownika sklepu internetowego okazało się kluczem do wzrostu sprzedaży r/r dla lovemontessori.com. Duży wpływ na końcowe powodzenie projektu miało też nasze podejście do współpracy oparte na dialogu i dostosowywaniu proponowanych rozwiązań do wymagań i możliwości klienta. Dzięki temu spełniliśmy cele i umożliwiliśmy dalszy rozwój sklepu internetowego. Aktywna współpraca i warsztaty z klientem pozwoliły nam znaleźć rozwiązania przynoszące korzyści dla tego biznesu.
Czas wdrożenia nowego sklepu: 5 miesięcy
Czas wdrożenia wersji językowych i multistore: 1.5 miesiaca