Krótki opis zlecenia
Klient postanowił przenieść stronę zbudowaną w oparciu o CMS WordPress ze względu na niskie parametry w Google Page Speed Insights. Zlecenie zawierało także stworzenie nowoczesnych layoutów, poprawę responsywności i nawigacji na urządzeniach mobilnych. Główne przeznaczenie strony to generowanie leadów sprzedażowych, które za pomocą formularzy kontaktowych są przekazywane do aplikacji Sales Manago (CRM + Marketing Automation). Z witryny korzystają w większości osoby w wieku 55+ ze Stanów Zjednoczonych, zainteresowane kupnem wycieczki do Polski.
Problemy do rozwiązania
długi czas ładowania strony, słabe parametry Google PageSpeed Insights
niski współczynnik konwersji z urządzeń mobilnych
przestarzały design, błędy utrudniające korzystanie z witryny
szybkie przeniesienie treści blogowych (ponad 100 wpisów) i poprawa warstwy wizualnej
brak dynamicznych formularzy kontaktowych, uniemożliwiający komponowanie customowych usług i przejrzyste podsumowanie zamówienia
brak intuicyjnego CMSa – zmiana widoków możliwa jedynie przy modyfikacji kodu CSS
Materiały przekazane przez klienta
wysokiej jakości, rozbudowane treści gotowe do umieszczenia na layoutach
wytyczne do wdrożenia Marketing Automation przy użyciu Sales Manago
wstępne wymagania dotyczące nowych funkcjonalności – dynamicznych formularzy i kreatorów wycieczek, przelicznika walut, obsługi z poziomu CMS
skonfigurowana usługa GSuite – repozytoria załączników i obsługa serwerów wysyłkowych SMTP
Nasze rekomendacje
Zmiana technologii wykonania strony WordPress na front-end oparty o JS i customizowany system zarządzania treścią
Zaproponowaliśmy wykonanie frontu witryny za pomocą frameworku ReactJS, co zapewni znacznie krótszy czas ładowania strony i przełoży się na płynniejsze działanie aplikacji. Zarządzanie treściami na stronie postanowiliśmy wykonać przy użyciu technologii Headless CMS, dzięki czemu mogliśmy przygotować szyte na miarę rozwiązanie, które jednocześnie będzie bardzo intuicyjne w obsłudze. Plusem były również zerowe koszty utrzymania całości.
Zmiana domeny .eu na adres z rozszerzeniem .com, który znacznie ułatwi pozycjonowanie witryny na rynku amerykańskim
Wcześniejsza domena klienta posiadała rozszerzenie .eu, a docelowym rynkiem sprzedaży usług są kraje takie jak USA, Australia, Kanada i Wielka Brytania. Zasugerowaliśmy zmianę na domenę globalną z rozszerzeniem .com. Adres realpolandtours.com był w już posiadaniu klienta i posiadał około rok historii w wyszukiwarce Google. Stare adresy postanowiliśmy przekierować za pomocą przekierowań 301, aby zachować potencjał SEO domeny .eu.
Przeniesienie modułu blogowego na subdomenę i pozostawienie technologii WordPress
Blog zawierał ponad 100 zaindeksowanych w wyszukiwarce wpisów, jednak obecny szablon nie pozwalał na tworzenie atrakcyjnych wizualnie postów zawierających slidery, ikonografię, animacje itp. Postanowiliśmy wydzielić moduł blogowy i zbudować go na subdomenie, pozostawiając CMS WordPress. Umożliwiło to sprawne przeniesienie całości treści, a także metadanych kluczowych dla SEO. Jednocześnie nowy szablon, dzięki zastosowaniu edytorów wizualnych „drag and drop” pozwolił osobom bez wiedzy programistycznej na przygotowywanie rozbudowanych i atrakcyjnych wizualnie wpisów.
Skrócenie strony głównej i podstron. Zastosowanie zakładek na podstronach głównych produktów.
Większość layoutów na stronie była bardzo długa ze względu na dużą ilość treści i zdjęć, co znacznie utrudniało korzystanie z aplikacji przez konieczność ciągłego scrollowania. Zaproponowaliśmy zastosowanie krótszych widoków i wprowadzenie zakładek z kluczowymi informacjami w przypadku głównych produktów. Umożliwiło to dostępność pełnej nawigacji wewnątrz jednego ekranu i ułatwiło dostęp do całości oferty.
Zmiana ścieżki konwersji i wprowadzenie dynamicznych formularzy kontaktowych
Zasugerowaliśmy przeniesienie formularzy kontaktowych na osobne podstrony i zastosowanie dynamicznych elementów, które będą stanowiły podsumowanie oferty wybranej przez klienta. W ten sposób użytkownik przed wysłaniem zgłoszenia widział wyraźnie koszt wybranej usługi i szczegóły zamówienia. Dodatkowo wprowadziliśmy walidację po stronie front-end i back-end, a także zabezpieczenie przed spamem za pomocą Captcha.
Rozbudowa integracji Sales Manago o nowe funkcjonalności przy użyciu interfejsu API. Automatyzacja części działań.
Integracja strony klienta z Sales Manago odbywała się za pomocą wtyczki WordPress SM CF7. To rozwiązanie zapewniało jednie podstawą konfigurację, która nie spełniała wszystkich wymagań dopasowanych do charakteru działalności Tour Operatora. Postanowiliśmy wykonać integrację pomiędzy aplikacjami za pomocą interfejsu API, co przełożyło się na częściową automatyzację procesu obsługi i dopasowanie przesyłania danych z formularzy. Jednocześnie przenieśliśmy część automatycznej komunikacji mailowej do Sales Manago.
Wdrożone komponenty
Nasze sugestie i harmonogram działań zostały zaakceptowane przez klienta. Przystąpiliśmy do wdrożenia. Pracowaliśmy z klientem w tygodniowych iteracjach. Raz w tygodniu następowało przekazanie gotowych komponentów i ich akceptacja. Wykonanie projektu zajęło nam 9 tygodni, łącznie z poprawkami i zrobieniem makiet.
Web Design & UX
Layouty zakodowane przy użyciu bibliotek React, Material Design, wcześniej przygotowanych plików .psd. Nawigacja i design dopasowane do grupy wiekowej odbiorców 55+.
Lead Generation
Leady w postaci zgłoszeń osób zainteresowanych wycieczkami generowane przez dynamiczne formularze wewnątrz aplikacji i pop-upów z Sales Manago
CMS
Zarządzanie treścią stworzone za pomocą elastycznych interfejsów API technologii Sanity Headless. Łatwy w obsłudze dashboard admina.
Moduł Blogowy
Oddzielna aplikacja zbudowana w oparciu o CMS WordPress. Design zbliżony do głównej aplikacji, poprawienie ścieżki konwersji i funkcji sprzedażowej bloga.
Marketing Automation
Połączenie z aplikacją Saas (Sals Manago) za pomocą interfejsu API. Stworzenie workflow marketing automation, bazy wysyłkowej newslettera i zaawansowanego śledzenia użytkowników.
Analityka i Raportowanie
Konfiguracja skryptów śledzących przy użyciu aplikacji Google Tag Manager. Konfiguracja Google Analytics, Adwords, Pixel Facebook, Pixel Twitter, Sales Manago.
Serwer / back-end
ReactJS (NextJS), NodeJS (ExpressJS), ZEIT (AWS Lambda), HeadlessCMS (Sanity.io), Marketing Automation (API Sales Manago)
Repozytorium Dokumentów
Integracja witryny z usługą Google Drive, umożliwiająca zapisywanie i archiwizację dokumentów wysyłanych z pomocą aplikacji.
Serwery wysyłkowe
Przeniesienie masowej wysyłki korespondencji i części komunikacji automatycznej do Sales Manago. Konfiguracja treści wysyłanych przez aplikację.
Home Page - Desktop
Stara strona | Nowa strona
Google PageSpeed Insights
Home Page | Desktop
Stara strona | Nowa strona
Google PageSpeed Insights
Nagłówek: łatwiejsze wybieranie danych kontaktowych, dodatkowa nawigacja, przeniesienie całej oferty do głównego menu.
Główne wycieczki: dodanie dwóch dodatkowych kolumn i poprawienie wyglądu całej sekcji, w szczególności przycisków CTA.
Wycieczki w miastach: zmiana slidera na duże ikony z budynkami w danym mieście, wybór za pomocą rozwijanego menu.
About Us: usunięcie sekcji i przeniesienie wszystkich informacji do stopki oraz nagłówka.
Główny baner: zmiana na animowany slider z przyciskami Call To Action z przekierowaniem do kluczowych podstron. Optymalizacja ładowania panoramicznych zdjęć.
Cstomowe wycieczki: wyraźny button kierujący do formularza umożliwiającego zamówienie usługi „szytej na miarę”.
Stopka: przeniesie całej nawigacji i danych kontaktowych. Wyraźne logo certyfikatu TripAdvisor i sekcja operatora/twórcy strony.
Home Page - Mobile
Stara strona | Nowa strona
Google PageSpeed Insights
Home Page Mobile
Stara strona | Nowa strona
Google PageSpeed Insights
Nagłówek, mobile menu: czytelny nagłówek przyklejony do górnej krawędzi. „Hamburger menu” po rozwinięciu posiadające podział na cześć główną i dodatkowe linki na dole ekranu. Dodatkowo na dole strony menu z ikonografią służące do łatwego kontaktu i wyboru głównych elementów oferty.
Główne wycieczki: poprawienie wyglądu wizualnego kafelków i przycisków CTA. Wyraźne pokazanie cen i dołączenie krótkiego opisu wycieczek. Wymiana grafik i optymalizacja zdjęć. Dodatkowo dwie nowe wycieczki w ofercie.
Customowe wycieczki: usunięcie kafelków wydłużających stronę. Na layoucie strony głównej pozostawienie przekierowania do kreatora własnej wycieczki. Przeniesienie przekierowania do wycieczek prywatnych do głównego menu.
Wycieczki w miastach: zmiana slidera na duże ikony z budynkami w danem mieście i wybór za pomocą rozwijanego menu.
About Us: usunięcie sekcji i przeniesienie wszystkich informacji do stopki i nagłówka.
Stopka mobie: uporządkowanie informacji kontaktowych, dodanie logotypu z certyfikatem TripAdvisor i usunięcie niektórych przycisków social media.
Główny baner mobile: poprawienie responsywności i widoczności głównego zdjęcia. Zmiana statycznego baneru na slider zdjęć z przyciskami Call To Action. Optymalizacja zdjęć i zmniejszenie czcionek, mieszczących się w elemencie nawet przy dłużysz treściach.
Design Your Own Tour: wyraźny element zastępujący sekcję private tours na głównej stronie. Button pod prostą grafiką i tekstem zachęcającym do stworzenia wycieczki „szytej na miarę” wymagań użytkownika. Dzięki zastosowaniu tego rozwiązania, nie wydłużał się czas scrollowania strony, przy jednoczesnym zachowaniu funckjonalności.
Dolna belka nawigacji: dodanie dolnego menu nawigacji ułatwiającej kontakt i przekierowanie użytkowników do najistotniejszych elementów oferty.
Wdrożony stack technologiczny
Technologie starliśmy się dopasować do wszystkich wymagań projektu, jednocześnie pamiętając o dynamicznym rozwoju spółki klienta, co wymagało wdrożenia w pełni skalowalnych rozwiązań.
ReactJS (NextJS)
Framework front-endowy posiadający za sobą wsparcie społeczność dziesiątek tysięcy programistów, a także pomoc Facebooka. Jest sprawdzony, bezpieczny i szybki.
NodeJS (ExpressJS)
Backend NodeJS działa również w strukturze serverless. Służy do obsługi formularzy, przesyłania plików na Google Drive, połączenia z API SalesManago. Jest to szybkie rozwiązanie, a w połączeniu z serverless wręcz błyskawiczne.
ZEIT (AWS Lambda)
ZEIT, a więc AWS Lambda bazuje na rozwiązaniach Amazona dając w pełni bezpiecznie i skalowalne rozwiązanie, które wraz z rozwojem portalu będą w stanie obsłużyć dziesiątki tysięcy użytkowników dziennie.
Headless CMS (Sanity.io)
Rozwiązania headless CMS stają się standardem w nowoczesnych aplikacjach. Dodatkowo udostępniają wygodny edytor treści nie odbiegający standardem rozwiązań typu WordPress. Klient wypełnia treść w jednym miejscu, a w przyszłości aplikacja mobilna Android, IOS będzie mogła skorzystać z tych samych danych.
Sales Manago
Zintegrowaliśmy wszystkie formularze na stronie z API SalesManago, a także wykorzystaliśmy skrypty do lead generation. Dodatkowo, każde wypełnienie formularzy jest archiwizowane do logów po stronie back-endu.
Google Drive
Repozytorium aplikacji oparte o rozwiązania GSuite idealnie wkomponowało się w całość projektu i ułatwiło codzienną pracę klienta, który wykorzystuje w wewnętrznej komunikacji rozwiązania Google.
Podsumowanie
Całość projektu wraz z poprawkami zamknęliśmy w 9 tygodni. Biorąc pod uwagę zakres prac do wykonania i ich skomplikowanie to wynik, z którego jesteśmy w pełni zadowoleni. Wpłynęła na to przede wszystkim wzorowa komunikacja oparta o znane obu stronom funkcjonalności Trello i komunikatora Slack. Nie bez znaczenia było również duże zaangażowanie po stronie klienta, który bardzo szybko dostarczał informacje zwrotne dotyczące poprawek oraz swoje sugestie. Najistotniejszą kwestią dla nas po stronie wykonawcy była wysoka jakość stworzonego kodu, a także całościowe spojrzenie na projekt umożliwiające zaawansowany marketing w wielu kanałach, który przełożył się na znaczne poprawienie współczynników konwersji. Wszystkie cele projektu zostały zrealizowane, obecnie pracujemy nad kolejnymi zleceniami dla klienta.
