Przejdź do treści

Securand

Jak zebrać od odwiedzającego komplet danych do wyceny bez rozmowy z handlowcem?

Nowa strona dla firmy ochroniarskiej Securand, na której odwiedzający sam składa zapytanie ofertowe albo pyta o zasięg patroli pod konkretnym adresem.

Klient
Securand
Usługi
Strony internetowe, Systemy dla firm
Branża
Ochrona

stan na wrzesień 2026

Sytuacja przed projektem

Securand prowadzi ochronę fizyczną i techniczną, od systemów zabezpieczeń i monitoringu po patrole interwencyjne, usługi detektywistyczne i psy służbowe. Ma własną centralę monitorowania i patrole w gotowości przez całą dobę. Dotychczasowy serwis działał na WordPressie z gotowym szablonem, który ograniczał układ sekcji i dokładanie kolejnych usług.

Zapytania z formularzy nie miały wspólnego miejsca odbioru, a firma przygotowywała premierę aplikacji alarmowej AlertMe z własną stroną pod osobnym adresem. Strona główna miała odtąd sprzedawać, z abonamentem AlertMe na czele. W zakres prac weszła przebudowa serwisu od podstaw, konfiguratory ofertowe i obsługa zgłoszeń z obu witryn.

Pytania, na które projekt odpowiadał

  • Skąd obsługa ma od razu wiedzieć, czego dotyczy każde zgłoszenie?
  • Jak przyjmować pytania o zasięg patroli tak, żeby obsługa dostała dokładny adres?

Zakres prac

  • Nowy serwis od podstaw
  • Przeniesienie treści starego serwisu
  • Projekt graficzny i typografia
  • Animacje przy przewijaniu
  • Trzy konfiguratory ofert
  • Zapytanie o zasięg z podpowiedzią adresu
  • Skrzynka zgłoszeń z obu witryn na komputerze centrali

Połączone usługi

  • Next.js
  • Vercel
  • Supabase

Jak to zrobiliśmy

  1. Projekt dopasowany do oferty

    Nowy projekt powstał na treści piętnastu podstron starego serwisu, przeniesionej razem ze zdjęciami pod dotychczasowe adresy. Strona główna prowadzi od abonamentu AlertMe i pakietów, przez sprawdzenie zasięgu i konfigurator, do kafli usług, z których każdy otwiera podstronę z pełnym opisem. Dalej są sekcja o patrolach, formularz kontaktowy i odnośnik do działu Aktualności.

    Na podstronie systemów zabezpieczeń odwiedzający wybiera rodzaj obiektu, dom, mieszkanie, firmę albo osiedle, i widzi jego wizualizację z zalecanym zakresem zabezpieczeń. Każda sekcja ma układ dopasowany do swojej treści, więc cennik abonamentów i konfiguratory nie są wciśnięte w ramy gotowego szablonu. Całość spina ciemna paleta wokół firmowej żółci, nowa typografia i ruch przy przewijaniu, który wygasza się u osób proszących w ustawieniach urządzenia o mniej animacji. Serwis zbudowaliśmy w Next.js.

  2. Konfiguratory i zasięg

    Trzy konfiguratory prowadzą odwiedzającego od pierwszego pytania do gotowego zapytania ofertowego. Na stronie głównej odwiedzający zaczyna od wyboru jednej z czterech dróg, od systemu alarmowego po ochroniarza z samochodem. Przy systemie alarmowym konfigurator pyta o pomieszczenia na każdym poziomie domu, zwierzęta i kominek, które wpływają na dobór czujników, oraz o sposób sterowania. Przy monitoringu zbiera liczbę kamer i odległość do rejestratora, a przy ochronie bezpośredniej liczbę osób, ochroniarzy i pojazdów.

    Każdy krok sprawdza odpowiedzi, zanim pozwoli przejść dalej, a pola liczbowe nie przyjmują wartości ujemnych. Po wysłaniu odwiedzający widzi podsumowanie swoich odpowiedzi. Pytanie o zasięg przyjmuje adres z podpowiedzi opartych na danych OpenStreetMap, więc obsługa dostaje konkretny punkt na mapie do sprawdzenia w strefach patroli. Konfiguratory z ceną i bez niej zestawiliśmy na stronie konfigurator produktu i oferty.

  3. Jedna skrzynka zgłoszeń

    Formularze kontaktowe z podstron usług, konfiguratory i zapytania o zasięg z serwisu Securand oraz wiadomości ze strony AlertMe trafiają do jednego programu na komputerze w centrali. Każde zgłoszenie przychodzi podpisane witryną, podstroną i rodzajem sprawy, więc obsługa od razu odróżnia zapytanie o monitoring od podania o pracę z załączonym CV. Na stronie głównej okno z ofertą AlertMe zbiera kontakty do tej samej skrzynki.

    Nadejście zgłoszenia sygnalizuje powiadomienie na ekranie, a w bocznej kolumnie programu widać liczbę nowych zgłoszeń i filtry po statusie i rodzaju sprawy. Obsługa nadaje status, dopisuje wewnętrzną notatkę z ustaleniami, szuka po nazwisku, adresie e-mail i treści oraz widzi historię zmian. Program działa w systemie Windows, a zgłoszenia zapisuje baza danych w Supabase. Kolejny formularz dokładamy jedną zmianą po naszej stronie.

Wybrane ekrany

  • Podstrona ochrony bezpośredniej: żółty pasek z ikonami mediów społecznościowych i menu usług, pod nimi nagłówek Ochrona bezpośrednia z zapowiedzią ochrony osobistej, opancerzonych pojazdów i zabezpieczenia VIP, na ciemnym zdjęciu ochroniarzy przy samochodzie. Niżej zaczyna się sekcja Usługa ochrony bezpośredniej z kartą Ochrona VIP.
  • Ta sama podstrona na telefonie: pasek kontaktu, logo z przyciskiem menu i nagłówek Ochrona bezpośrednia na tym samym ciemnym zdjęciu.
  • Strona Securand w ciemnej palecie: sekcja o ochronie bez formalności z trzema krokami aktywacji
  • Abonamenty ochrony: pakiety AlertMe, SecurPlus i SecurMax z liczbą interwencji w miesiącu i zakresem
  • Sekcja zasięgu ochrony: mapa Polski z zaznaczonym punktem, pole adresu wybieranego z podpowiedzi, pole na e-mail albo telefon i przycisk Sprawdź
  • Konfigurator systemu alarmowego: nagłówek z zapowiedzią zestawu budowanego krok po kroku i pierwszy z pięciu kroków formularza, obiekt i czujniki