Przykłady wdrożeń PWA

28.01.2020 Angelika Siczek
kobieta robiąca zakupy przez komputer i telefon - PWA

Nastała era mobilna i to użytkownicy smartfonów dyktują warunku. W takiej rzeczywistości wysokiej jakość UX (User Experience) nie jest już ukłonem w kierunku klienta ani cechą, którą warto mieć. Firmy zajmujące się e-commerce chętnie adaptują wszelkie technologie, które pomogą im dotrzeć do klienta mobilnego, a w tej kwestii nie ma rozwiązania lepszego niż Progressive Web Apps. Odważni, którzy dokonali implementacji PWA we wczesnej fazie rozwoju dzisiaj świętują ogromne postępy.

Pionierzy adaptujący PWA

Pośród pionierskich firm, które wdrożyły PWA znalazło się wiele dużych marek, które dziś odnoszą znaczące sukcesy. Należą do nich m.in. Lancôme i Housing.com.

Lancôme

Wśród pierwszych sięgających po tę świeżą jeszcze technologię było Lancôme. Decyzję podjął Dział Marketingu, który zdawał sobie sprawę z rosnącej potrzeby rozwoju kanału mobilnego. Motywacją dla nich był moment, kiedy urządzenia mobilne wyprzedziły w ruchu sieciowym komputery stacjonarne. Pierwszym krokiem, jaki postawili, była aplikacja natywna, ale Malik Abu-Ghazaleh, dyrektor generalny działu cyfrowego, był sceptyczny. Widział, że mimo dużych zalet, które dają aplikacje, posiadają one również poważne wady. Były zbyt drogie, a klienci musieli być naprawdę lojalni, żeby je pobrać i z nich korzystać.

Progressive Web Apps wydawało się być dobrym rozwiązaniem, bo łączyło w sobie plusy aplikacji bez wielu jej minusów. Jednak było to na tyle świeżym rozwiązaniem, że budziło wątpliwości. W połowie roku 2016 zaryzykowali i szybko zauważyli, że decyzja była dobra. Ich strona stała się bardziej efektywna i tańsza w utrzymaniu niż aplikacja. Działa o połowę szybciej niż poprzednia, bo czas ładowania z 9 sekund spadł do 3,5, a ich sprzedaż w kanale mobilnym wzrosła o 16%.

Housing.com

Housing.com to indyjski start-up koordynujący wynajem nieruchomości. Szybkie działanie strony jest dla nich ważne, ale przede wszystkim na urządzeniach mobilnych. W Indiach mieszkańcy częściej mają dostęp do telefonu komórkowego niż do łącza lądowego. Dla Housing.com posiadanie natywnej aplikacji nie było idealnym rozwiązaniem. Ze względu na wysokie koszty transferu danych hindusi nie lubią pobierać aplikacji na telefon, a raczej wolą korzystać z przeglądarek. Mimo to wymagają szybkiego i angażującego UX. Według danych znalezionych przez Housing nawet sekunda wyjęta z czasu ładowania strony może zaważyć na wskaźniku konwersji. Dzięki PWA ich średni czas spędzony na stronie wzrósł o 10% we wszystkich przeglądarkach. Housing stał się również dostępny dla użytkowników posiadających słabsze urządzenia. Technologia Progressive Web Apps była dla nich zbawienna.

Media społecznościowe i ich implementacje PWA

Media społecznościowe mocno polegają na angażowaniu użytkownika. Z ich specyfiki wynika szybkie ładowanie funkcji, ale przy mniejszej ilości danych. PWA jest idealnym kandydatem na technologię pierwszego wyboru dla mediów społecznościowych. Twitter, Pinterest i Instagram to tylko kilka przykładów gigantów, którzy zaufali PWA.

Twitter z technologią PWA - smartfon i laptop

Twitter

W 2017 roku Twitter globalnie uruchomił swój serwis w technologii Progressive Web Apps. Dzięki temu przy zmniejszonej konsumpcji danych stworzył szybszy i lepszy UX. Po tym, jak poprosili, aby użytkownicy zainstalowali sobie ikonę Twitter Lite na ekranie głównym, zanotowali 250 000 unikalnych odsłon dziennie.

Nicolas Gallagher, główny inżynier Twittera Lite, powiedział, że jest on najszybszą i najbardziej niezawodną alternatywą dla korzystania z serwisu. Dzięki PWA ilość przesyłanych danych jest pomniejszony dzięki zawartości pamięci podręcznej i zoptymalizowanym obrazom. To oznacza 70% mniej danych skonsumowanych przez użytkowników w trakcie przewijania tablic. Oprócz Tego Twitter w PWA waży 600KB w porównaniu do 23,5MB aplikacji natywnej.

Pinterest

Powód decyzji Pinteresta na przejście na PWA był podobny do powodu Twittera. Posiadali niskie zaangażowanie użytkowników, a do tego problem z szybkością strony, więc osoby ze słabym łączem nie były chętne do zostawania na dłużej i zakładania konta, ani tym bardziej pobierania aplikacji.

Adaptacja PWA początkowo miała mocno cofnąć ich w rozwoju, ale była to też ogromna szansa na ulepszenie całego serwisu. Implementacja trwała 3 miesiące, ale technologicznie sytuacja zdecydowanie się poprawiła. Wzrósł czas spędzony na stronie o 40% w porównaniu do poprzedniej strony, a zysk wygenerowany przez ruch użytkowników wzrósł o 44%.

Zack Argyle, Kierownik Inżynier twierdzi, że tygodniowa liczba aktywnych użytkowników wzrosła o 103% globalnie, o 156% w Brazylii i aż o 312% w Indiach. Zaangażowanie użytkowników również znacząco się poprawiło. O 296% wzrosła długość sesji na witrynie, a ilość „pinów” dokonanych przez użytkowników jest większa o 401%. Najbardziej jednak wzrosła liczba loginów – 370% oraz nowych użytkowników – 843%. Ikonkę na pulpicie swojego urządzenia mobilnego ma 800 tysięcy użytkowników.

Tinder

Pogressive Web Apps okazało się sukcesem również dla Tindera. To aplikacja randkowa, która bazuje na przeglądaniu profilów opierając się na lokalizacji. Koncepcja polega na użytkownikach mobilnych, więc w modelu biznesowym najważniejsza jest dobra witryna mobilna. Zasada działania jest prosta. W aplikacji wyświetlają się profile osób znajdujących się w okolicy. Zadaniem użytkownika jest przeciągać profil w prawo lub w lewo w celu akceptacji lub odrzucenia prezentowanej osoby.

Tinder online, czyli wersja serwisu w technologii PWA, otwarta została w 2017 roku i znalazła zastosowanie na nowych rynkach.  Już we wczesnych testach wyniki wykazały dobry współczynnik przeciągnięć (swipes), dużą ilość wymiany wiadomości i długość odbytej sesji w porównaniu do aplikacji natywnej. Dzięki PWA użytkownicy chętniej wykonują przeciągnięcia (akceptacja lub odrzucenie profilu prezentowanej osoby) niż w aplikacjach natywnych, wymieniają więcej wiadomości i częściej edytują swój profil. Tinder w tej wersji dostępny jest zarówno na komputer stacjonarny, jak i urządzenie mobilne. Wykorzystuje on JavaScript dla optymalizacji osiągów oraz powiadomień push w celu zwiększenia zaangażowania w komunikację między użytkownikami.

zakupy mobilne dzięki PWA

E-commerce zmniejsza lukę mobilną dzięki PWA

Zwiększanie osiągów strony i jej UX jest bardzo istotne, ale to nie jest cel najwyższy dla rynku e-commerce. Dla sprzedaży najbardziej liczy się zysk, a nie ma zysku bez User Experience. Ze względu na słabo zaprojektowane strony i przeładowane ekrany przeglądarek użytkownicy urządzeń mobilnych nie chcą finalizować transakcji w telefonach i tabletach. Strona zaprojektowana pod komputer będzie źle wyświetlać się na ekranie smartfonu, a to spowoduje frustrację u klienta. W najlepszym scenariuszu przerzuca się on na inny kanał sprzedaży, ale w większości przypadków nie wraca więcej na stronę sklepu.

DW Shop

DW Shop to marka należąca do DW Creative Group. Należy ona do polskiego stylisty fryzur Dariusza Wójcika. Większość jego klientów pochodził z Instagrama, który jest najlepszym kanałem promocji produktów zdrowia i urody. Urządzenia mobilne są odpowiedzialne za 80% ruchu sieciowego w mediach społecznościowych. Dla DW Shop 90% ruchu pochodzi z kanału mobilnego.

Celem Dariusza Wójcika było więc przekonwertowanie użytkowników przeglądających konto Instagrama na potencjalnych kupujących. Właśnie w tym pomogło mu PWA. Sklep uzyskał 75% ruchu z Instagrama korzystając z Magento 2. Aby dodatkowo wzbogacić UX użyto Vue Storefront. Jest to framework, który współpracuje z każdym backendowym silnikiem e-commerce na rynku.

Staples

Staples to największy sklep e-commerce na świecie, zaraz po Amazonie. Rozrastają się nie tylko przez rozwój wewnętrzny, ale również przez wykupowanie innych, mniejszych biznesów e-commerce, poprzez które kontynuują usługi. Musieli w końcu połączyć wszystkie kanały i wszystkie touchpointy, aby ujednolicić wizerunek marki i jej zwartość.

Nie było to proste, ponieważ ich usługi rozrzucone były w różne systemy napisane różnymi językami programowania, m.in. .NET i Java. Modyfikacja każdego z osobna byłaby droga i czasochłonna, stąd decyzja o przejściu na zunifikowany User Interface dostępny na obu backendach. Firma początkowo rozważała implementację aplikacji natywnej, nowego frontendu i kilku systemów headless. W końcu jednak zdecydowano się na Progressive Web Apps.

Implementowano nowy frontend PWA i integrowano go przez API z backendami Genesis i Netshope. W obecnym systemie można skanować kody kreskowe i zamawiać produkty offline. Staples udało się zapewnić bardziej spójny UX i spójną komunikację wizerunkową, nie zapominając o wysokich osiągach strony i integracji wszystkich swoich kanałów.

Alibaba

Budowanie lepszego UX było najwyższym priorytetem grupy Alibaba. Ten chiński serwis e-commerce to największa na świecie platforma sprzedażowa B2B. Z kolei ich AliExpress.com oferuje produkty klientom indywidualnym na całym świecie. Po przejściu na PWA firmy te zauważyły ogromny wzrost w zaangażowaniu użytkownika i to na przestrzeni wszystkich przeglądarek. Spadły przy tym znacznie koszty uruchomienia i prowadzenia witryny w porównaniu do aplikacji natywnej.

Wszystkie przykłady obrazują różne podejście do tego samego problemu. Każda firma ma swój model biznesowy uwarunkowany segmentem rynku, do którego należą, rodzajem klientów oraz zaplanowaną ścieżką rozwoju. PWA w każdym z tych przypadków staje na wysokości zadania dzięki swojej elastyczności i pionierskiemu podejściu do User Experience. Łączenie w sobie cech aplikacji natywnej i klasycznej witryny webowej to zalety, których nie zaoferuje najlepsza nawet aplikacja czy rozwiązanie strony responsywnej. PWA posiada dostępne gotowe implementacje w Magento i Magento 2, a liczba firm specjalizujących się w takich integracjach stale rośnie.

Cyfrowe newsy / Bądź na bieżąco

Od początku 2022 roku wchodzimy w skład Unity Group. Teraz zapisując się do naszego newslettera, będziesz na bieżąco z informacjami całej naszej organizacji.

    Wypełniając formularz wyrażasz zgodę na wysyłkę newslettera przez Unity S.A. z siedzibą we Wrocławiu. Zgodę możesz wycofać w każdej chwili. Więcej informacji na ten temat znajdziesz w naszej polityce prywatności.

    *Wymagane

    Andrzej-kurs-programowania

    Andrzej Szylar

    Chief Executive Officer

    E-mail:

    a.szylar@global4net.com
    Magda2

    Magdalena Paczyńska-Kamienik

    HR Manager

    Aleksandra

    Aleksandra Bielawska-Clegg

    HR Business Partner

    E-mail:

    Michal

    Michał Duława

    New Business Developer

    E-mail:

    Katarzyna

    Katarzyna Zajchowska

    Marketing Partner

    E-mail: