Niedawno opublikowaliśmy artykuł szczegółowo opisujący autorskie rozwiązanie e-com.house, stanowiące dobry i elastyczny core do tworzenia sklepów PWA z backendem Magento 2 (i nie tylko). Dziś przyszedł czas na case study pierwszego wdrożenia - wykonaliśmy je dla marki, której nikomu nie trzeba przedstawiać :) Zobaczcie realizację sklepu PWA dla KUBOTA!

Z zespołem, który przywrócił światu legendarne klapki, pracujemy od samego początku ich przygody z reaktywacją marki oraz budową e-commerce. W poprzednim case study opisywaliśmy, jak wyglądała nasza wspólna droga od 0 do 3000+ zamówień miesięcznie.

Dziś KUBOTA jest marką, która dalej dynamicznie rozwija swoją e-sprzedaż (zaliczyła też zakończoną przed czasem ofertę publiczną akcji i w tym roku planuje debiut na NewConnect), więc technologia musi dotrzymywać jej kroku oraz zapewniać skalowalność i elastyczność. Po popularnej platformie Saas oraz połączeniu PWA i Magento z Vue Storefront przyszedł, czas na bardziej dedykowane i zaawansowane architektonicznie wdrożenie, łączące nasze PWA, mikroserwisy i Magento 2.

Sklep PWA - dedykowane funkcjonalności dla KUBOTA

O samej technologii PWA (skrót od angielskiego zwrotu Progressive Web App) i jakie ma zastosowanie w e-commerce, pisaliśmy już wcześniej na naszym blogu. Dlatego jeśli temat aplikacji progresywnych nie jest Ci dobrze znany - polecamy lekturę artykułu. W skrócie - sklep PWA łączy zalety serwisu webowego i aplikacji mobilnych - działa w oparciu o przeglądarkę i jest widoczny w wyszukiwarkach, ale zapewnia dużo szybsze i bardziej płynne doświadczenie zakupowe.

Podobnie jak w przypadku e-sklepów opartych o inne technologie, stawiając PWA możemy skorzystać zarówno z rozwiązań gotowych, w tym open-source, jak i dedykowanych. Bazując na ich analizie oraz doświadczeniu z wdrożeń, stworzyliśmy własne rozwiązanie, dające duże możliwości dostosowania platformy do potrzeb danego biznesu. Przykłady takich customizacji pokażemy właśnie na przykładzie wdrożenia dla kubotastore.pl.

Menu i nawigacja

Już na etapie tworzenia strategii i projektu UX dla sklepu było jasne, że KUBOTA potrzebuje całkowicie customowego headera, w tym menu i nawigacji. Kluczowe było nie tylko jak najbardziej intuicyjne i płynne doświadczenie użytkownika, ale również wyeksponowanie kategorii produktowych czy elementów komunikacji marki. Dlatego też:

• na samej górze znalazła się stała belka z komunikatem,

• menu zawiera kafelki z miniaturkami zdjęć kategorii, co nie tylko atrakcyjnie wygląda, ale również ułatwia odnalezienie konkretnych produktów,

• pod dedykowaną ikoną „dodatkowe opcje” znalazły się wszystkie elementy, którymi nie chcieliśmy przeładować głównego menu, ale z drugiej strony warto, żeby były pod ręką - zaliczają się do nich FAQ, kontakt, lista sklepów stacjonarnych czy ulubione produkty:

Całość dobrze komponuje się z głównym sliderem, nie tracąc przy tym na czytelności, a przy scrollu belka pojawia się w zminimalizowanej formie (komunikat znika), na białym tle.

Tak z kolei prezentuje się wyszukiwarka:

Strona główna

Strona główna pozwala na elastyczne prezentowanie komunikatów czy produktów, dzięki różnego rodzaju blokom, które można ustawiać w dowolnej konfiguracji i edytować dzięki dedykowanemu CMS. Homepage może więc być łatwo dostosowywany do bieżących potrzeb marki.

Przykładowo KUBOTA ma do wyboru w pełni zarządzalne, poniższe układy bannerów:

Strona kategorii

Na górze każdej kategorii umieszczone są miniaturki prezentujące podkategorie:

A zarówno na mobile, jak i desktop, pod ręką są wygodne i elastyczne opcje filtrowania i sortowania produktów: 

Strona produktu

Strona produktowa musiała pomieścić nie tylko bogaty content w postaci tekstów, ikon czy zdjęć, ale również mnóstwo wariantów kolorystycznych produktów:

Podobnie jak w przypadku strony głównej, content strony produktu również podpięty jest pod CMS, dodatkowo stworzyliśmy też moduł do zarządzania tabelą rozmiarów.

A sam content jest zbudowany m.in. z poniższych bloków:

Koszyk

W koszyku, oprócz niezbędnych elementów, podpięliśmy moduł FAQ oraz dedykowaną integrację z narzędziem do marketing automation - User.com, aby zapewnić użytkownikom jak najlepsze wsparcie na tym etapie ścieżki zakupowej.

Formularz zamówienia

W formularzu zamówienia, oprócz jak najprostszego i intuicyjnego flow, stworzyliśmy customową integrację z Tpay, umożliwiającą m.in. wygodną płatność BLIKiem czy kartą.

Moje konto

Ten widok to świetny przykład tego jak bardzo sklep PWA może odwzorowywać doświadczenie korzystania z aplikacji mobilnej. Moje konto, podobnie jak reszta sklepu, powstała w pierwszej kolejności z myślą o małych ekranach.

Sklep PWA - projekt UI dla KUBOTA

Oczywiście nie mniej ważne niż warstwa funkcjonalna, były koncepcja wizualna i projekt UI sklepu. KUBOTA potrzebowała wyrazistego, ale przy tym czystego layoutu, oddającego charakter marki. 

Na wcześniejszych etapach sklep borykał się z - postępującym wraz z rozwojem - brakiem spójności m.in. w klasach fontów czy buttonów, dlatego w tym przypadku postawiliśmy na stworzenie przemyślanego, bardziej rozbudowanego styleguide’a, którego konsekwentnie trzymaliśmy się, projektując wszystkie widoki. 

Jednym z naszych zadań było również zaplanowanie elementów w tzw. „sezonowym” kolorze, który będzie mógł być łatwo dostosowywany do bieżącej kolekcji i komunikacji.

Mocnym punktem (oprócz dopracowanych packshotów i sesji) stały się również dedykowane ikony umieszczone w różnych miejscach sklepu.

Sklep PWA - backend skrojony pod KUBOTA

Dostępne na rynku rozwiązania PWA z reguły potrzebują osobnego backendowego silnika dla e-commerce, by stać się funkcjonalnym i pełnowartościowym sklepem internetowym. Nasze rozwiązanie zostało pomyślane tak, by wspierać zarówno platformę Magento 2, jak i stanowić jeden z klocków bardziej rozbudowanej, dedykowanej infrastruktury.

W przypadku Kubota architektura składa się z m.in.:

• opisanej warstwy PWA,

• platformy Magento 2,

• mikroserwisów, np. CMS, checkout, PIM, API,

• integracji, np. z Baselinker czy User.com.

Z ciekawostek warto wspomnieć, że API wykorzystywane przez nasze PWA, miało również zastosowanie w stworzeniu bota, umożliwiającego zakup produktów KUBOTA w Messengerze, z płatnością BLIKiem. O tym projekcie, do którego dołożyliśmy swoją cegiełkę, było niedawno całkiem głośno :) 

Celem architektury, jak i samego backendu, był wzrost stabilności, wydajności oraz lepsza komunikacja między systemami. Udało się zaadresować te potrzeby, czego najlepszym dowodem był pozytywnie zdany test w postaci tegorocznego, rekordowego dla marki, Black Weeku, w trakcie którego nie odnotowano żadnego spadku performance’u sklepu.

Tymczasem Black Week 2021 w stosunku do roku 2020 zanotował wzrost liczby użytkowników o 67% oraz wzrost liczby zamówień o 73%. A porównując Black Friday do dnia poprzedniego nastąpił wzrost liczby transakcji o 681% oraz wzrost liczby użytkowników o 267%.

Efekty wdrożenia

Niedawno efektami wdrożenia pochwaliła się sama marka KUBOTA, dlatego przytoczymy je, jako najbardziej wiarygodne źródło informacji :) Z danych wynika, że sklep jest bardziej funkcjonalny i intuicyjny w obsłudze dla użytkowników, a współczynnik konwersji po uruchomieniu nowego sklepu wzrósł aż o 250%!

W wielu aspektach testerskich nowych mikroserwisów oraz logiki architektury wsparł nas mocno zespół e-commerce’owy marki. Cieszymy się, że wspólne wdrożenie PWA tak dalece przełożyło się na wyniki, zespołowi KUBOTA gratulujemy sukcesów i trzymamy kciuki za kolejne!

Jeśli dla swojej marki szukasz partnera, który potrafi dobrać rozwiązanie adekwatne do potrzeb, wykorzystać możliwości PWA, zna się na Magento (ale nie ogranicza się do tej technologii!), rozumie procesy e-commerce oraz zapewnia DevOps na wysokim poziomie - zapraszamy do kontaktu. Chętnie zaprezentujemy rozwiązania, odpowiemy na wszelkie pytania oraz przygotujemy ofertę.