Preorder.pl w nowej odsłonie – jak PWA zmienia doświadczenie zakupowe klientów?

• 10% wzrostu transakcji na mobile bezpośrednio po wdrożeniu
• Zmniejszenie liczby porzuconych koszyków o 15%
• 85% osób, które dodały produkty do koszyka, finalizuje zakup

Z jakimi wyzwaniami mierzył się sklep Preorder?

Preorder.pl to polski sklep internetowy, który specjalizuje się w sprzedaży muzyki, odzieży i gadżetów związanych z kulturą hip-hopową. W jego ofercie znajdują się artykuły popularnych marek, takich jak Prosto, P56, Patriotic, a także Tommy Hilfiger i Pepe Jeans. Sklep oferuje również nowe wydania płyt oraz limitowane kolekcje, które często są dostępne w przedsprzedaży.

Klienci Preorder.pl to głównie młodzi entuzjaści muzyki i mody należący do pokolenia Z i Millenialsów. Spędzają dużo czasu ze smartfonem w ręku, korzystając z aplikacji takich jak Spotify, YouTube czy TikTok, które charakteryzują się błyskawicznym działaniem i wyjątkowym UX-em. Właśnie takie doświadczenia stają się dla nich standardem, przez co ich tolerancja na wolno działające strony jest niezwykle niska. Preorder.pl, rozumiejąc te potrzeby, podjął kroki, aby poprawić doświadczenie mobilne użytkowników sklepu.

Technologia PWA rozwiązaniem dla sklepu

W 2022 roku zarząd Preorder.pl podjął decyzję o wdrożeniu nowej wersji frontendu, wykorzystującej technologię PWA (Progressive Web App). Choć firma rozważała również stworzenie natywnej aplikacji mobilnej, ostatecznie zrezygnowano z tego pomysłu. Powodem były wysokie koszty związane z opracowaniem, utrzymaniem, aktualizacją oraz promocją aplikacji w sklepach mobilnych.

Marek Wróbel (CTO Preorder): Decydując się na inwestycję w aplikację mobilną o koszcie około miliona złotych, każdy z biznesowego punktu widzenia będzie chciał, żeby te pieniądze się kiedyś zwróciły. Natomiast problemem jest to, że bardzo duża część użytkowników po prostu ze sklepu ucieknie nam do naszej aplikacji. Czyli tak naprawdę nie pozyskamy nowych klientów, tylko przesuniemy tych istniejących, ale nadal będziemy musieli utrzymywać kilka ekosystemów.

Analiza wykazała, że inwestycja w tradycyjną aplikację mobilną nie przyniosłaby oczekiwanych zwrotów, dlatego postawiono na nowoczesne rozwiązanie PWA, które łączy zalety aplikacji mobilnych i stron internetowych, jednocześnie będąc bardziej opłacalne.

Dowiedz się, czym jest PWA i jakie korzyści przynosi.

Jakie były najważniejsze założenia przy wdrażaniu PWA w Preorder.pl?

1. Poprawa UX na każdym etapie ścieżki zakupowej:

• Uproszczenie procesu zakupowego, zwłaszcza dla zalogowanych użytkowników.
• Wygodne formularze i efektywne CTA poprawiające komfort zakupów na urządzeniach mobilnych.
• Pozytywny wpływ na wizerunek marki poprzez lepsze doświadczenie użytkownika.

2. Szybkość i płynność interakcji:

• Uwzględnienie szerokiego asortymentu obejmującego różnorodne marki i kategorie produktów.
• Zapewnienie wydajności i niezawodności sklepu podczas sprzedażowych szczytów, np. przy premierach płyt i akcjach promocyjnych.

3. Efektywność kosztowa:

• Projekt dostosowany do budżetu firmy typu MŚP, zarówno w fazie tworzenia, jak i utrzymania aplikacji.
• Opłacalność rozwiązania, biorąc pod uwagę stosunkowo wąską grupę docelową sklepu.

Łukasz Plutecki (CEO, AtomStore): Robiąc makiety i później UI, najpierw myśleliśmy o tym, jak dany element będzie się sprawdzał i zachowywał na mobile, a dopiero później jak rozwiązać daną kwestię UX-ową na desktopie. Staraliśmy się jak najwięcej decyzji podjąć w taki sposób, żeby użytkownik, który oczekuje doświadczenia jak na aplikacji, je dostał. A z drugiej strony zależało nam na tym, żeby te wszystkie interakcje były jak najszybsze. Nawigacja została przeniesiona na dół i jeśli sobie popatrzymy na to, jak rozwija się menu, to ono się rozwija wygodniej pod obsługę kciuka.

Menu kategorii rozwijane na 70% ekranu, od prawej strony (większośc osób jest praworęczna)

Pierwsze wdrożenie PWA na platformie AtomStore

Pierwsze wdrożenie PWA na platformie AtomStore poprzedziły gruntowne przygotowania i opracowanie kluczowych działań. Dzięki temu zapewniliśmy solidne fundamenty do wdrożenia nowoczesnego, responsywnego rozwiązania PWA dla Preorder.pl.

1. Analiza rynku i potrzeb klientów. Przeprowadziliśmy dogłębną analizę rynku oraz potrzeb zarówno klienta, jak i docelowych użytkowników Preorder.pl. Dzięki temu mogliśmy lepiej zrozumieć oczekiwania końcowych odbiorców i dopasować rozwiązania do ich preferencji.
2. Badanie najlepszych praktyk. Przeanalizowaliśmy najnowocześniejsze praktyki i rozwiązania stosowane globalnie w zakresie Progressive Web Apps (PWA) oraz aplikacji natywnych. To pozwoliło na wprowadzenie najnowczoeśniejszych i skutecznych rozwiązań.
3. Tworzenie dedykowanego zespołu developerskiego. Powołaliśmy specjalny zespół developerów odpowiedzialny za wdrożenie nowego frontendu PWA, opartego na architekturze headless.
4. Projektowanie UX i UI. Opracowaliśmy nowoczesne UX w koncepcji mobile-first, które skupia się na kluczowych elementach, takich jak nawigacja, wyszukiwarka, filtrowanie i ścieżka zakupowa. Zrealizowaliśmy wdrożenie interfejsu użytkownika, w tym testy, wprowadzenie poprawek oraz przeprowadzenie ukrytego uruchomienia (hidden launch) przed oficjalnym startem produkcyjnym.

Najważniejsze funkcje i elementy UX w sklepie Preorder.pl

Wprowadzenie technologii PWA w sklepie Preorder.pl przyniosło znaczące usprawnienia w zakresie funkcji i elementów UX, które teraz jeszcze lepiej odpowiadają na potrzeby użytkowników mobilnych. Sprawdź kluczowe zmiany w wyglądzie i funkcjonalności sklepu.

Belka menu przytwierdzona u dołu – łatwiej dostępna przy pomocy kciuka

Menu kategorii rozwijane na 70% ekranu od prawej strony ułatwia nawigację

na niewielkim ekranie

Wygodne menu filtrowania produktów z odpowiednim CTA w przejrzysty sposób prezentuje dostępne opcje i ułatwia użytkownikowi dokonanie wyboru

Personalizowane “otwarte” zestawy produktów – dopasowane do realnych potrzeb/zainteresowań klienta pozwalają stworzyć dokładnie takie (promocyjne) konfiguracje produktów, które spełnią ich oczekiwania (zamiast bazować na gotowych propozycjach)

Wybór rozmiaru odzieży na rozwijanym panelu (zamiast popularnej checklisty) ułatwia zakupy na urządzeniach mobilnych

Opcja usuwania i przywracania produktów w koszyku zapewniające użytkownikowi wygodę i elastyczność

Zapisane formy dostawy i formy płatności dla zalogowanego użytkownika przyspieszają żmudne i nielubiane etapy procesu zakupowego

Koszyk dostosowany do mobile, w tym:

➔ wygodny wybór punktów odbioru,

➔ zapamiętywanie ostatnio wybranego kuriera, miejsca odbioru, form płatności,

➔ duże, wygodne formularze i CTA zapewniające wygodniejsze zakupy na smartfonach i ogranicza popełniane błędy

Po wdrożeniu: pierwsze efekty

Wdrożenie nowego frontendu Preorder.pl w technologii PWA było przełomem. Dzięki temu rozwiązaniu, łączącym zalety responsywnego frontendu RWD z szybkością i wygodą aplikacji natywnej, klienci sklepu cieszą się płynnym i działaniem strony na urządzeniach mobilnych. A to przekłada się na wyższą konwersję i mniejszy współczynnik porzuceń koszyków.

Innowacyjne podejście pozwala kupującym odczuć korzyści płynące z używania dedykowanej aplikacji, bez konieczności jej instalacji. Ten krok nie tylko spełnił oczekiwania mobilnych użytkowników, ale także pokazał, że śmiałe podejście do technologii może przynieść znakomite wyniki sprzedażowe.

Marek Wróbel: Mieliśmy klientów, którzy przeglądali ofertę sklepu na telefonie, ale żeby wykonać zakup czy też go dokończyć, przechodzili do wersji desktopowej do komputera. Domykanie koszyków w wersji RWD w samej aplikacji było na poziomie 60%. Natomiast najświeższe dane teraz przy PWA wskazują na poziom 85%. Klienci chętniej konwertują już w samej aplikacji, co jest zdecydowanie dużym ułatwieniem.

Jakie korzyści dla sklepu przyniosło przejście na technologię PWA?

• Zwiększenie konwersji na urządzeniach mobilnych – nowoczesny, szybki i responsywny interfejs przyczynił się do wzrostu transakcji na mobile o 10%.
• Poprawa wskaźników sprzedażowych – zmniejszenie porzuconych koszyków o 15%, co przełożyło się na wskaźnik domknięć zakupów na poziomie 85%.
• Zwiększenie liczby sesji i obniżenie współczynnika odrzuceń – przyspieszenie ładowania strony dzięki zastosowaniu cache zmniejszyło liczbę użytkowników opuszczających sklep. Kolejne interakcje z witryną są znacznie szybsze i płynniejsze dzięki zapisanym w pamięci danych.
• Obniżenie kosztów pozyskania klienta – lepsza wydajność i inteligentne wyszukiwanie poprawiły efektywność kampanii marketingowych.
• Spójne doświadczenie zakupowe – zunifikowane wrażenia na każdym urządzeniu, zarówno mobilnym, jak i desktopowym.
• Brak konieczności instalacji aplikacji – kupujący nie muszą pobierać ani aktualizować aplikacji, a dodanie ikony sklepu do ekranu głównego wymaga tylko jednego kliknięcia.
• Pozytywne reakcje klientów – dzięki PWA klienci mogą szybciej dotrzeć do interesujących ich produktów.
• Wpływ na wizerunek marki – Preorder.pl umocnił swoją pozycję jako innowacyjnego lidera w e-commerce.
• Lepsze pozycjonowanie w wyszukiwarkach – SSR umożliwia skuteczne indeksowanie, co w połączeniu z lepszą wydajnością może poprawić wyniki SEO w dłuższym okresie.
• Ochrona przed długiem technologicznym – dzięki wykorzystaniu platformy SaaS, sklep zapewnił sobie ciągłą optymalizację, rozwój i szybkie działanie bez wpływu backendu na odbiór strony.

Podsumowanie

Wdrożenie nowego frontendu sklepu Preorder.pl w technologii PWA przy użyciu AtomStore Headless okazało się strategicznym krokiem w rozwoju firmy. Decyzja o wyborze technologii PWA była odpowiedzią na potrzeby mobilnych klientów oraz wynikała z kalkulacji kosztów i korzyści, przewyższając alternatywę w postaci aplikacji natywnej. Dzięki temu Preorder.pl nie tylko zyskał nowoczesny, szybki i responsywny interfejs, ale także zwiększył konwersję na urządzeniach mobilnych, co przekłada się na bezpośredni wzrost przychodów.