Strona internetowa dla jednego z liderów rynku ubezpieczeń komunikacyjnych
Rodzaj projektu
Nowa strona internetowa
Branża
Ubezpieczenia
Technologie
Drupal
Elasticsearch
Vue.jsZakres prac
Analiza przedwdrożeniowa, UX/UI, web development, support 24/7, prace rozwojowe
Najważniejsze elementy projektu
- Zaawansowany system wyszukiwania z UX-friendly listingiem wyników wyszukiwania
- Formy kontaktu umożliwiające szybką interakcję – formularze, kalkulatory, czat, Callback
- Aplikacja obsługująca zgłoszenia Callback
- Migracja treści z Drupala 7 do 9
- Elastyczny panel CMS ułatwiający zarządzanie treściami
O kliencie
LINK4 działa w branży ubezpieczeń komunikacyjnych od 2003 roku. Jest częścią Grupy PZU, znanej szczególnie w Europie Środkowo-Wschodniej. Celem LINK4 jest maksymalne uproszczenie procesu ubezpieczenia, dlatego konsekwentnie szuka nowych, innowacyjnych rozwiązań w tym zakresie. Właśnie z tą myślą projektowaliśmy nową stronę - kluczowa była prostota, intuicyjność i skupienie na docelowym użytkowniku.
Bogumił Perzyna
Dyrektor Pionu Sprzedaży Direct
Z firmą Smartbees Sp. z o.o. z siedzibą w Opolu współpracowaliśmy w ramach projektu zaprojektowania i wdrożenia nowej strony internetowej www.link4.pl. Nasza współpraca przez cały okres projektu przebiegała wzorowo. Zespół był proaktywny, wychodził z inicjatywą proponowanych rozwiązań, szybko reagował na nasze potrzeby, a zadania były realizowane terminowo. Równolegle do wprowadzonych prac projektowych, Smartbees dbał o utrzymanie naszego obecnego serwisu.
Naszą dotychczasową współpracę i efekt projektu oceniamy bardzo pozytywnie.
Wyzwanie
Nasza współpraca z firmą LINK4 trwa od 2021 roku. Dotychczas realizowaliśmy prace supportowe dla starszej wersji strony, opartej na Drupal 7. Firmie zależało jednak na nowej koncepcji wizualnej; stronie z łatwo modyfikowalną treścią, dużymi możliwościami edytorskimi i prawidłową retencją danych z formularzy. Wdrożenie całego serwisu powierzono w ręce naszych specjalistów.
Cel projektu
Naszym celem było stworzenie nowej strony z uwzględnieniem kilku obszarów: SEO, sprzedaży i obsługi Klienta czy analityki. Firmie zależało na serwisie, który pozwoli bez przeszkód realizować strategię pozycjonowania. Kluczowe było więc m.in. wprowadzenie elastycznego CMS-a - szybkiego i prostego do wprowadzania zmian, który da większe możliwości publikacji treści i optymalizacji serwisu. Pod kątem sprzedaży LINK4 chciało usprawnić proces pozyskiwania zapytań od Klientów - stworzyć proste kalkulatory, łatwe do wypełnienia formularze i czat.
Rozwiązanie
Specyfika projektu, branża i fakt, że Klient zna ten CMS (poprzednia strona była oparta o Drupal 7), zadecydowała o tym, że nową stronę też stworzymy na Drupalu, ale w dużo nowszej wersji - 9. Aktualnie strona jest zaktualizowana i podniesiona do D10. Co wyróżnia Drupala nad innymi CMS-ami?
- Otwarty kod, który sprawia, że CMS jest elastyczny nie tylko pod kątem zmian w wyglądzie, ale również modyfikacji funkcji;
- bezpieczeństwo uzyskane dzięki regularnie wydawanym łatkom;
- wysoka wydajność, dzięki połączeniu tradycyjnego CMS-a i frameworka;
- tysiące pluginów do pobrania z oficjalnej strony Drupala, pomagające w personalizowaniu serwisu.
Szczegóły rozwiązania
Zaawansowane opcje wyszukiwania
Aby ułatwić użytkownikom poruszanie się po serwisie i szybkie wyszukiwanie informacji, stworzyliśmy zaawansowane pole wyszukiwarki wewnętrznej opartej o silnik Elasticsearch i Vue.js. Wyszukiwarka pojawia się od razu na górze strony. Po wpisaniu słowa lub ciągu słów, użytkownikowi wyświetlają się wyniki ujęte w formie listingu wraz z przypisanymi filtrami tematycznymi, jak podróże, samochód czy mieszkanie.
Migracja treści z Drupal 7 do 9
Przenieśliśmy m.in. artykuły z aktualności, ale oprócz samej migracji, stworzyliśmy nowe struktury dla Landing Page’ów i wpisów blogowych.
LP składa się z prostych i przejrzystych bloków przedstawienia treści. Redaktor strony ma możliwość dodania wielu opcji:
- minimalistycznego przedstawienia cen ubezpieczeń;
- kolumn z wyróżnikami danego rozwiązania;
- CTA w treści w formach białych i szarych bloków wyróżniających się na tle całej strony;
- listy wypunktowanej z dodatkową zawartością;
- małych boxów z ikonami;
- klikalnej sekcji Q&A z możliwością oznaczania pytań jako H3;
- i wiele, wiele więcej.
Blog wyposażyliśmy m.in. w:
- licznik czasu pokazujący stopień zagłębienia użytkownika w treść,
- blok CTA w treści,
- aside banner po prawej stronie artykułu.
Tworzenie i modyfikacja formularzy
Klientowi zależało na intuicyjnych formularzach, za pośrednictwem których użytkownicy będą mogli zgłaszać szkody. Postawiliśmy na prostotę, spójną kolorystykę i co najważniejsze pod kątem technicznym - na moduł Webform. To elastyczny kreator formularzy, który zbiera zgłoszenia, wysyła powiadomienia i daje możliwość tworzenia kolejnych dokumentów w szablonie. Dodatkowo pozwala na generowanie CSV zgłaszanych formularzy, a więc znacznie ułatwia pracę.
Interaktywne mapy
Stworzenie przestrzeni, dzięki której każdy zainteresowany będzie mógł sprawdzić warsztaty dostępne w całej Polsce, było prawdziwym wyzwaniem. Zdecydowaliśmy się na framework Vue.js - szybki i wyjątkowo „lekki” oraz wykorzystanie Google API.
Mapa przedstawia miejsca warsztatów z podziałem na województwa i oznaczeniami liczbowymi. Po kliknięciu wybranego miejsca, pojawia się lista wraz z przybliżonymi na mapie miejscami warsztatowymi. Listing uwzględnia dokładny adres ośrodków, szczegóły kontaktu oraz daje możliwość wyznaczenia trasy.
Integracje
LiveChat
Klasyczna integracja z LiveChat wymaga zazwyczaj wyłącznie umieszczenia odpowiednich skryptów w kodzie strony, dostarczonych przez usługodawcę. Wówczas na stronie pojawia się ikona usługi LiveChat, która umożliwia rozmowy z wirtualnym asystentem.
LiveChat w swojej domyślnej wersji ma jednak sporo ograniczeń, które nie satysfakcjonowały Klienta. Z poziomu panelu zarządzania usługą nie ma np. możliwości wskazania własnego elementu na stronie, który będzie służył do uruchomienia czatu. Tę funkcję musieliśmy doprojektować. Wprowadzone zmiany pozwalają na uruchomienie czatu poprzez kliknięcie jednego z elementów menu kontaktowego. Dodatkowo stworzyliśmy formularz konfiguracyjny, który pozwala wskazać adresy URL stron, dla których funkcja czatu ma zostać wyłączona.
OneTrust
OneTrust to usługa, która umożliwia zachowywanie prywatności w witrynie. Integracja z platformą polega na umieszczeniu odpowiednich skryptów w kodzie strony klienta, dostarczonych przez OneTrust. W przypadku LINK4 usługa jest wykorzystywana do zarządzania plikami cookie, umożliwiając skuteczne zarządzanie zgodnością z przepisami dotyczącymi prywatności oraz preferencjami dotyczącymi plików cookie.
Co więcej, w formularzu w Drupalu dodaliśmy pola pozwalające na zmianę nazwy domeny oraz klucza, które wykorzystywane są do integracji z usługą OneTrust. Dzięki temu klient może samodzielnie zarządzać integracją z usługą z poziomu panelu administracyjnego.
Google Tag Manager (GTM)
W witrynie umieściliśmy skrypt integrujący ją z usługą GTM. Podobnie jak w przypadku konfiguracji z OneTrust, tutaj także uzupełniliśmy formularz Podstawowe ustawienia witryny o możliwość samodzielnego wprowadzania zmian przez Klienta.
Przy pomocy dataLayer (narzędzia do przekazywania danych z witryny do kontenera GTM), stworzyliśmy opcję odkładania informacji z formularza kalkulatora polisy OC/AC oraz z formularza zamawiania kontaktu. Umożliwia to zbieranie danych o działaniach użytkowników na stronie i ich interakcjach z formularzami. Dzięki temu można lepiej zrozumieć zachowania userów, personalizować ich doświadczenia oraz lepiej monitorować i analizować konwersje.
Mechanizm importowania i eksportowania
Klient szukał sposobu na proste i szybkie dodawanie kolejnych warsztatów i agentów do mapy na stronie. Dodaliśmy więc opcję importu plików CSV do Drupala przez administratora witryny, a także stworzyliśmy strukturę, która zachowuje dane i umożliwia ich późniejszy eksport. Efekt? Zaoszczędzenie czasu, usprawnienie procesu oraz zminimalizowanie ryzyka pomyłki przy wprowadzaniu kilkunastu, a czasami nawet kilkudziesięciu nowych punktów.
Efekty pracy
Nowa strona to: prostota, przejrzystości i użyteczność
Plany zakładały kilka miesięcy intensywnych prac. Tak faktycznie było! Nasz zaangażowany zespół działał nad migracją danych, tworzeniem paragrafów i dodatkowych funkcji.
Zobacz w pigułce, co udało nam się osiągnąć:
Integracje z LiveChat i OneTrust.
W pełni edytowalne, zaawansowane formularze zarządzane z poziomu panelu administracyjnego.
Możliwość przechowywania danych z formularzy tylko na czas przeprocesowania ich przez system wewnętrzny.
Nowa szata graficzna skupiona na mobile-first.
Mechanizm umożliwiający import i eksport warsztatów oraz import i eksport agentów w specjalnie stworzonej strefie agenta.
Rozbudowane i w pełni modyfikowalne menu główne strony wraz z menu bocznymi.
Nowa aplikacja obsługująca zgłoszenia z formularzy Callback, zmodernizowana w oparciu o najnowsze technologie.
Bezpieczna witryna, która przeszła mnóstwo testów bezpieczeństwa i wydajności oraz audytów: przedwdrożeniowych SEO, performance.
Statystyki realizacji
2600
4
40
7
4
98
48
6
Projekt Twoich marzeń
Stwórzmy go wspólnie