Nowa strona mobilna i aplikacja mobilna z lepszym UX dla Konitgo

Jakie było nasze zadanie?

Kontigo, nasz Partner, potrzebował usprawnienia działania swojego e-sklepu na urządzeniach mobilnych – dotychczasowa aplikacja, dostarczona przez inny software house, okazała się zbyt ksztowna i problematyczna do zarządzania przy tak dużej ilości zmian wprowadzanych do sklepu internetowego. Dlatego zapadła decyzja o całkowitym wygaszeniu mobilnego sklepu.

Challenge polegał więc na tym, aby odpowiedzieć na nagłą potrzebę Kontigo i stworzyć aplikację mobilną… bez tworzenia aplikacji mobilnej, ponieważ ta usługa nie znajduje się w naszym portfolio.

Początkowe cele

  1. Pokonać technologię. Finalnie sklep Kontigo miał się znaleźć w Google Play i AppStore, musieliśmy więc działać w tym kierunku i jednocześnie obejść kwestię tworzenia aplikacji mobilnej, bo to usługa, której nie wykonujemy.
  2. Poprawić konwersję. Chcieliśmy poprawić user experience mobilnej wersji strony i tym samym wpłynąć na zwiększenie sprzedaży.

Jak udało nam się to zrealizować?

Zamiast zlecić pisanie aplikacji na nowo, nasz Partner wziął pod uwagę rekomendację i zdecydował się zaufać zespołowi Fast White Cat w kwestii nowego, innowacyjnego podejścia do aplikacji, czyli Progressive Web Application – PWA. PWA jest aplikacją webową, która wykorzystuje nowoczesne technologie i wzorce projektowe. Aplikacje PWA są szybkie, bezpieczne, responsywne i zgodne ze wszystkimi przeglądarkami, a do tego umożliwiają wysyłanie wiadomości PUSH oraz aktualizują się automatycznie. Co więcej aplikacja PWA podlega indeksowaniu przez wyszukiwarki i pochłania znacznie mniej pamięci urządzenia mobilnego.

PWA jest najnowszą technologią tworzenia stron www, która w ofercie Fast White Cat sprawnie już funkcjonuje. Znaleźliśmy więc sposób na osiągnięcie celu, czyli możliwość pojawienia się Kontigo w AppStore i Google Play, bez tworzenia aplikacji mobilnej. Jaki? Zrobienie nowego frontendu dla e-sklepu naszego Partnera.

W przypadku PWA cały backend Magento, czyli Magento Headless, cała logika biznesowa i wszystkie dane są odcięte od frontendu, dlatego tu czekało nas najwięcej pracy. Ze względu na budżet, chcieliśmy wykorzystać wszystko, co było już gotowe, by nie zaczynać od zera – mieliśmy już nasz projekt sklepu Kontigo na Magento 2, zrobiony na tyle dobrze, że wykorzystaliśmy jego backend. Do części customizowanych musieliśmy zaimplementować endpointy GraphQL, aby frontend poprawnie wyświetlał dane. Pracowaliśmy także na szablonie Venia, który został dostosowany do indywidualnego wyglądu marki Kontigo

Patrycja Jaworska

eCommerce Manager, Kontigo

Celem biznesowym było podniesienie konwersji poprzez ułatwienie zakupów naszym Klientom i zwiększenie ich lojalizacji.

Tempo, które nakłada na nas rozwój rynku spowodowało decyzję o przyspieszeniu wdrożenia nowej aplikacji. Celem biznesowym było podniesienie konwersji poprzez ułatwienie zakupów naszym Klientom i zwiększenie ich lojalizacji.

Na rozwiązanie PWA zdecydowaliśmy się dlatego, że widzimy w tym niesamowity potencjał dla rozwoju sprzedaży i komunikacji z Klientami, jednocześnie uwzględniając czas realizacji projektu, funkcjonalności i optymalizację kosztów wdrożenia i dalszego utrzymania. Myślę, że PWA jest idealnym rozwiązaniem dla biznesów, które nie są gigantami na rynku ale aspirują wysoko.

Kontigo jest naszym wieloletnim Partnerem i to dzięki wzajemnemu zaufaniu mogliśmy podjąć się wdrożenia czegoś, czego jeszcze nikt nie zrobił z wykorzystaniem PWA Studio od Adobe.

Zwieńczeniem projektu dla Zarządu Kontigo była możliwość zainstalowania aplikacji mobilnych z AppStore i Google Play. Podeszliśmy do tego zadania dwuetapowo – najpierw wdrożyliśmy produkcyjnie e-sklep w technologii PWA, a następnie rozpoczęliśmy prace nad wystawieniem aplikacji mobilnych. Działający produkcyjnie e-sklep na PWA był warunkiem koniecznym do rozpoczęcia pracy nad wydaniem aplikacji mobilnych.

Wspólnie z Kontigo podjęliśmy to ryzyko dotyczące stosunkowo nowej technologii od Magento – sfinalizowaliśmy wyzwanie mając w projekcie dwóch tech leadów zajmujących się backendem i warstwą frontendową PWA. Zespół składał się z developerów backendowych Magento oraz developerów React. Projekt wykonaliśmy w cztery miesiące, od rozpoczęcia prac do produkcyjnego wdrożenia e-sklepu. Napotkaliśmy sporo wyzwań technologicznych w trakcie pracy, jednak dobry zespół i wsparcie Kontigo pozwoliły nam teraz cieszyć się sukcesem.

Elżbieta Pawełek Lubera

Head of PM at Fast White Cat

Efekt, czyli jak to działa…

Aplikacja typu PWA, którą przygotowaliśmy dla Kontigo, zapewnia lepszy user experience – szybciej działa, zamiast całej strony wczytuje tylko potrzebne elementy, a do tego pozwala na wcześniejsze wyrenderowanie strony dla robotów, aby nie miały problemu z odczytaniem każdej strony. Aktualizacje nie wymagają zawsze modyfikacji backendu, więc niezależnie można modyfikować sam frontend.

Nasz projekt to czysta wersja sklepu, napisana w formie aplikacji w technologii React, dzięki której „aplikacja” jest elastyczna i bardziej przypomina klasyczną aplikację mobilną, a do tego wdrożenie do niej każdej kolejnej funkcjonalności nie będzie problemem. Wyzwaniem było także podpięcie modułów rozszerzeń do Magento, które nie są dostosowane do PWA – sami musieliśmy więc dostosować m.in. operatora płatności, ale pracowaliśmy także nad dodatkowymi usprawnieniami, na których zależało naszemu Partnerowi, dlatego przygotowaliśmy spersonalizowany, autorski moduł, który pozwala w analityce rozdzielić zamówienia, by obsługa sklepu Kontigo widziała, czy zamówienie pochodzi aplikacji zainstalowanej z AppStore, Google Play czy bezpośrednio ze sklepu. Dołożyliśmy także moduł, dzięki któremu możemy dodawać treści, które będą widoczne tylko w aplikacji mobilnej. Dodatkowo, po zrobieniu PageSpeed Insights, okazało się, że musimy popracować nad wynikiem prędkości ładowania się strony, by lepiej pozycjonowała się w Google – zrobiliśmy więc przeglądarkę typu headless, wykorzystując moduł Open Source – Seo Snap. Dzięki tym działaniom, znacząco zwiększyliśmy rating strony – aż do 85 punktów w ciągu dnia.

Rozwój?

Oczywiście! Planujemy dalszą rozbudowę tego projektu, ciągle tworzymy nowe funkcjonalności.

Porozmawiajmy o Twoim projekcie