WDROŻENIE ECOMMERCE DLA DUKA
Historia firmy DUKA zaczęła się, gdy w 1920 r. Hjalmar Blomkvist otworzył swój pierwszy sklep ze szkłem, porcelaną i naczyniami kuchennymi w szwedzkim mieście Linköping. Dzięki jego zaangażowaniu i ciężkiej pracy przedsiębiorstwo rozwijało się, co zaowocowało kolejnymi filiami na terenie całej Szwecji. W ten sposób zostały położone podwaliny pod to, czym DUKA jest obecnie. W 1999 roku, DUKA rozpoczęła swoją działalność w Warszawie, która leży w sercu Europy i idealnie nadaje się na główną siedzibę dużej firmy. Obecnie posiadamy już ponad 60 sklepów, znajdujących się w najlepszych centrach handlowych Polski. Cały czas szukamy nowych możliwości rozwoju, wyznaczamy kierunki ekspansji i nie zwalniamy tempa, idąc z duchem czasu. Połączenie wieloletniej tradycji z nowoczesnym podejściem, pozwala nam elastycznie reagować na nowe wyzwania, które stawia przed nami XXI wiek.
Założenia i cele projektu
Pierwszym elementem procesu wdrożenia jest analiza biznesowa, która definiuje zarówno wymagania funkcjonalne jak i procesy. W przypadku wdrożenia dla DUKA zdefiniowaliiśmy ok. 150 wymagań wraz z obszerną specyfikacją integracji z wszystkimi systemami zewnętrznymi, m.in. Symfonia ERP, GiftPlus czy wewnętrzne API do pobierania zdjęć produktowych oraz obsługi zwrotów i reklamacji.
Współpraca obejmowała poniższe obszary:
- Analiza biznesowa
- Definicja procesów integracyjnych
- Projektowanie UX/UI z naciskiem na mobile
- Development backend
- Development frontend
- Procesy QA
- Deployment na środowiska testowe oraz środowisko produkcyjne
- Przygotowanie konfiguracji środowisk lokalnych w oparciu o Docker + Warden, a także podpięcie tzw. prehooków GIT weryfikujących jakość kodu na repozytorium
- Konfigurację tzw. pipeline’ów CI/CD z uwzględnieniem uruchamiania automatycznego testów integracyjnych oraz jednostkowych (unittestów)
- Procedura wdrożenia i przepięcia systemów
- Monitoring systemu i optymalizacja
W ramach koordynacji projektu kluczowym aspektem było bieżące eliminowanie ryzyk w oparciu o wspólne decyzje projektowe.
Projekt UX/UI ─ nowoczesność w połączeniu z wygodą użytkownika
Już podczas pierwszych warsztatów projektowych udało się nakreślić kierunek i główne założenia dotyczące projektu graficznego nowego sklepu. Po omówieniu wielu styli i przykładów doszliśmy do wspólnego wniosku, że design powinien być minimalistyczny, bardzo elegancki a przy tym przyjazny w odbiorze i intuicyjny. Na podstawie zebranych materiałów powstała koncepcja, która następnie została dopracowana podczas kolejnych etapów projektowych. Finalnie, w ramach prac projektowych, stworzony został zestaw kluczowych widoków sklepu wraz z design guide, który przekazany został do zespołu developerskiego. ─ mówi Marcin Wieczorek, Design Manager w Lizard Media
Optymalizacja frontend
Jednym z kluczowych obszarów projektu była wydajność frontendu. Ten element sprowadza się do dwóch aspektów: realnego odbioru przez użytkownika jako “szybko działający” eCommerce oraz punktacji technicznej badanej takimi narzędziami jak Lighthouse czy Google Page Speed Insights. Prace optymalizacyjne są procesem ciągłym, wdrażane są kolejne elementy podnoszące jakość w tym obszarze.
Aby osiągnąć te cele wdrożone zostały:
- Lazy loading obrazów
- Możliwość uploadu zdjęć produktowych oraz contentowych w formacie WebP
- Bundling JS
- Minifikacja HTML/CSS/JS
- Mergowanie plików CSS/JS
- Tzw. deferring ładowania fontów
- Przeniesienie JS do stopki
- Ciągła analiza i optymalizacja współczynnika CLS
Sama warstwa frontend nie może być wystarczająco wydajna, jeśli na poziomie backend nie są przeprowadzone odpowiednie prace optymalizacyjne. Dlatego w ramach optymalizacjii całości wykonano również:
- Testy wydajnościowe z użyciem narzędzi Locust, K6, LoadNinja
- Optymalizację wąskich gardeł na poziomie samej aplikacji (kodu PHP) jak i konfiguracji usług; wspólnie z naszym partnerem ─ firmą Centuria ─ dokonaliśmy tuningu usług aby w ramach testów wydajnościowych potwierdzić gotowość eCommerce na Magento do działania w warunkach wzmożonego ruchu
- Optymalizację zewnętrznych modułów, które często nie są odpowiednio wydajne i wymagają odpowiednich modyfikacji aby nie generowały problemów wydajnościowych
Zaawansowane integracje
Integracje z zewnętrznym systemami były krytycznym zakresem projektu, bez którego nie byłby możliwy start. Implementację integracji poprzedziła bardzo skrupulatna analiza interfejsów integracyjnych oraz niskopoziomowe zdefiniowanie procesów w formie diagramów BPMN ─ co umożliwiło przy okazji optymalizację procesów panujących w DUKA.
W ramach wdrożenia zostały wykonane integracje:
- Dwukierunkowa integracja z Symfonia ERP w oparciu o RESTAPI oraz RabbitMQ
- Integracja z systemami wewnętrznymi DUKA, w tym m.in. endpointów do pobierania szczegółów zwrotów i reklamacji (RMA)
- GiftPlus do obsługi kart podarunkowych
- Integracja z Google Measurement Protocol oraz GTM i GA4
Wszystkie integracje zostały napisane w sposób odporny na niedostępność dowolnego systemu (obsługa tzw. failover).
Automatyzacja procesu zwrotów i reklamacji (RMA)
W ramach wdrożenia Magento dla marki DUKA zaplanowano również pełną automatyzację procesu zwrotu i reklamacji zintegrowaną z siecią sklepów stacjonarnych. Pierwszym etapem było szczegółowe zdefiniowanie procesu zwrotu oraz ─ osobno ─ reklamacji oraz jego zaprojektowanie.
Bazując na jednym z dostępnych na rynku modułów Magento2 wykonaliśmy odpowiednie customizacje i projekty UI obsługi procesu RMA. Funkcjonalność wymagała obsługi wszystkich elementów logiki biznesowej wynikającej z organizacji przepływu magazynowego pomiędzy systemem księgowym a magazynowym (WMS).
Kluczowym elementem była automatyzacja procesu tak, aby zespół BOK DUKA nie wykonywał podstawowych powtarzalnych czynności, a akcje takie jak np. zwrot środków były uruchamiane bez konieczności manualnej obsługi przez pracownika.
Optymalizacja silnika pod stabilną obsługę wzmożonego ruchu
Wdrożenie profesjonalnej platformy w oparciu o Magento musi wiązać się z koniecznością skrupulatnej analizy działania silnika w sytuacji obciążenia ruchem ─ co zapewnia odporność na obciążenia oraz daje możliwość sprowadzania realnie większego ruchu różnymi dodatkowymi kanałami marketingowymi.
Proces ten organizujemy w Lizard Media z wykorzystaniem kompletu narzędzi:
- Analizy statycznej PHP
- XDebug oraz Spatie Ray
- NewRelic
- Graylog
oraz oceny wąskich gardeł na poziomie aplikacji a także konfiguracji samych usług serwerowych. Dla potwierdzenia poprawności wydajności organizowane są w kilku powtórzeniach sesje testów wydajnościowych symulujące możliwy wzrost liczby użytkowników w różnych trybach (spike, peak lub innych).
Duże wdrożenie Magento2 dla DUKA było dla nas kolejną okazją do uczestnictwa w projekcie nie tylko ciekawym, ale również pełnym wyzwań technicznych i organizacyjnych. Obecnie projekt jest intensywnie rozwijany o kolejne elementy, co na pewno będzie pozytywnie wpływało na perspektywy rozwoju tej gałęzi biznesu dla naszego Klienta. Jestesmy pewni, że dostarczyliśmy rozwiązanie z górnej półki, które będzie świetnym eCommerce przez wiele lat. ─ mówi Paweł Biliński, co-founder / CTO w Lizard Media.
