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 możliwości Headless Front 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.
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.
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.
- 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.
- 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ń.
- Tworzenie dedykowanego zespołu developerskiego. Powołaliśmy specjalny zespół developerów odpowiedzialny za wdrożenie nowego frontendu PWA, opartego na architekturze headless.
- 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.
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.
