Case study Web design · Development · UX · SEO

IQ Fence

Strona, konfigurator i SEO lokalne dla firmy ogrodzeniowej.

Trzyjęzyczny serwis firmy montującej ogrodzenia w Szczecinie, z siedmioetapowym konfiguratorem, który zamienia luźne pytanie o cenę w kompletne, uporządkowane zapytanie ofertowe.

Zobacz stronę na żywo (otwiera się w nowej karcie)
Klient
IQ Fence
Branża
Ogrodzenia i bramy, montaż
Języki
PL · EN · DE
Zakres
Projekt, development, SEO
Skala
Ponad 60 adresów w mapie witryny
Strona główna IQ Fence na komputerze — nagłówek „Ogrodzenia z montażem — Szczecin i okolice”, zdjęcie zamontowanego ogrodzenia i dwa przyciski.
Pierwszy ekran — lokalizacja w nagłówku, dwie drogi do zapytania i pasek zaufania.
Strona główna IQ Fence na telefonie, w układzie jednokolumnowym.

W skrócie: Wyzwanie, Rozwiązanie, Rezultat

Wyzwanie
Cena ogrodzenia zależy od wielu zmiennych, więc ogólny formularz kontaktowy daje niepełne zapytania i wymusza dopytywanie.
Rozwiązanie
Konfigurator prowadzi przez siedem decyzji, waliduje dane na bieżąco i pokazuje orientacyjne wyliczenia, a całość trafia do firmy jako jedno zapytanie.
Rezultat
Kompletny serwis w trzech językach, z konfiguratorem, blogiem budowanym z plików źródłowych i strukturą pod SEO lokalne.

Moja rola

  • Architektura informacji i struktura serwisu
  • Projekt interfejsu i system komponentów
  • Frontend (HTML, CSS, JavaScript)
  • Konfigurator zapytań — logika, walidacja, szkic
  • Obsługa formularzy w PHP
  • Generator bloga w PHP
  • SEO techniczne i treściowe

Technologie

  • HTML
  • CSS
  • Bootstrap 5.3
  • Vanilla JavaScript
  • PHP
  • Apache
  • Schema.org
  • Google Consent Mode

Kontekst

Firma ogrodzeniowa, która potrzebowała czegoś więcej niż wizytówki

IQ Fence projektuje, dostarcza i montuje ogrodzenia panelowe, palisadowe i aluminiowe oraz bramy w Szczecinie i okolicach. Jest submarką IQ Solar.

Strona ma prowadzić klienta od pierwszego wrażenia do konkretnego zapytania. Na każdej podstronie czekają dwie drogi — wycena w konfiguratorze albo bezpłatny pomiar. Serwis działa po polsku, angielsku i niemiecku, bo część klientów pochodzi z pogranicza polsko-niemieckiego.

Wyzwanie

Pytanie „ile to kosztuje?” nie ma prostej odpowiedzi

Cena ogrodzenia zależy od typu, modelu, koloru, długości, wysokości, fundamentu, bram i akcesoriów. Zwykły formularz kontaktowy kończy się więc wymianą kilku wiadomości, zanim firma w ogóle może przygotować ofertę.

Celem było odwrócenie tej kolejności — zebrać komplet informacji, zanim zapytanie trafi do firmy, i nie przytłoczyć przy tym klienta, który często po raz pierwszy kupuje ogrodzenie.

  • Zapytanie ma zawierać wszystko, czego potrzeba do przygotowania oferty.
  • Klient nie musi znać branżowych pojęć, żeby przejść proces.
  • Konfigurator porządkuje zapytanie — nie jest kalkulatorem gwarantowanej ceny.

Architektura konfiguratora

Siedem kroków, jedna decyzja na raz

Konfigurator dzieli zakup na siedem kroków — rodzaj zamówienia, typ ogrodzenia, model i kolor, wymiary, fundament, bramy i akcesoria, podsumowanie z danymi kontaktowymi. Pasek postępu pokazuje, gdzie jest klient i ile zostało.

Duże karty wyboru i podpowiedzi „Najpopularniejsze” czy „Nie jestem pewien” zdejmują presję trafnego wyboru. Opcje pojawiają się dopiero wtedy, gdy są potrzebne — bramy, furtki i akcesoria otwierają się po włączeniu przełącznika.

Pierwszy krok konfiguratora — wybór między kompleksową instalacją a samym produktem, z paskiem postępu siedmiu kroków.
Krok 1 — rodzaj zamówienia. Pasek postępu od początku pokazuje całą drogę. Powiększ

Logika wyborów

Opcje dopasowane do tego, co klient już wybrał

Po wyborze typu ogrodzenia konfigurator ładuje tylko pasujące modele, a paletę kolorów RAL filtruje pod konkretny produkt. Dzięki temu nie da się złożyć zestawienia, którego firma nie oferuje.

Kolor spoza palety też jest możliwy. Konfigurator od razu informuje wtedy o dopłacie około 10% i o dłuższym czasie realizacji — mniej więcej o 7 dni roboczych — zanim klient przejdzie dalej.

Nagranie Kroki 1–4 na komputerze. Nagranie skrócone i przyspieszone.

Walidacja i wyliczenia

Błędy wyłapane od razu, liczby widoczne od razu

Wymiary są sprawdzane w trakcie wpisywania. Zbyt krótki odcinek — poniżej 5 metrów — od razu dostaje czytelny komunikat, zamiast błędu po wysłaniu formularza.

Na podstawie długości, wysokości i bramy konfigurator na bieżąco szacuje liczbę przęseł, słupków i powierzchnię ogrodzenia. To dane orientacyjne — pomagają klientowi zrozumieć skalę, a ostateczną wycenę i tak potwierdza pomiar.

Krok wymiarów z wypełnionymi polami (42 m, 150 cm, brama 4 m, 2 narożniki) i panelem szacunkowych danych — 16 przęseł, 19 słupków, 57 m².
Szacunkowe dane liczone na bieżąco — orientacyjnie, nie jako cena. Powiększ
Pole długości ogrodzenia z wartością 3 m oznaczone na czerwono i komunikatem o minimalnej długości 5 m.
Walidacja w trakcie wpisywania — minimum 5 m. Powiększ

Zapytanie

Wszystko w jednym, uporządkowanym zapytaniu

Ostatni krok zbiera całą konfigurację w czytelne podsumowanie i dodaje dane kontaktowe. Firma dostaje jedno zapytanie e-mailem, które od razu zawiera wszystko, czego potrzebuje do przygotowania oferty.

Szkic konfiguracji zapisuje się w przeglądarce, więc klient, który przerwie w połowie, nie zaczyna od zera. Formularz obsługuje prosty backend w PHP — bez bazy danych.

Krok 7 konfiguratora — podsumowanie „Twoja konfiguracja” z rodzajem zamówienia, typem ogrodzenia, modelem i kolorem.
Krok 7 — podsumowanie przed wysłaniem. Powiększ

Mobile

Pełna funkcjonalność na telefonie

Na telefonie układ przechodzi w jedną kolumnę, a przyciski zajmują pełną szerokość. Konfigurator nie traci żadnego kroku ani opcji — karty wyboru, paleta RAL i pola wymiarów są dopasowane do kciuka.

Nagranie Konfigurator na telefonie. Nagranie skrócone i przyspieszone.
Podsumowanie konfiguracji na telefonie.

Treści i SEO

Struktura pod lokalne wyszukiwania i blog jako system

Każda podstrona celuje w konkretną intencję lokalną przez tytuł, opis i jeden nagłówek H1. Strony produktowe mają FAQ, serwis ma jawny cennik, a sekcja o obszarze działania wymienia obsługiwane miejscowości.

Napisałem generator bloga w PHP, który z plików źródłowych buduje wpisy w trzech językach, listę wpisów, mapę witryny, sekcję realizacji na stronie głównej i warianty zdjęć WebP. Wpisy opisują prawdziwe realizacje.

Pod spodem — dane strukturalne, hreflang dla trzech języków, mapa witryny z ponad 60 adresami, przyjazne polskie adresy i przekierowania 301 ze starych URL-i.

  • Dane strukturalne: HomeAndConstructionBusiness, Service, FAQPage, BreadcrumbList, BlogPosting
  • hreflang PL / EN / DE i jedna kanoniczna domena z HTTPS
  • Baner zgód z Google Consent Mode
Strona produktowa ogrodzeń palisadowych — pełnoekranowe zdjęcie z nagłówkiem i opisem systemu.
Strona produktu — jedna intencja, jeden H1.
Sekcja „Firma od ogrodzeń w Szczecinie i okolicach” z listą obsługiwanych miejscowości.
Wpis na blogu opisujący realizację ogrodzenia dla inwestycji mieszkaniowej, ze zdjęciem budynku.

Technologia i jakość

Lekki stack, który działa na zwykłym hostingu

Serwis to statyczne strony HTML z Bootstrap 5.3, czysty JavaScript i PHP. Działa na zwykłym hostingu Apache, bez frameworka i bez bazy danych — łatwo go utrzymać i trudno zepsuć.

W teście laboratoryjnym Lighthouse z 27.10.2026 strona główna w wersji desktop uzyskała 100 punktów za wydajność, a konfigurator 99. Wynik SEO wyniósł 100 we wszystkich pomiarach.

Pomiary

Pomiar z dnia · Lighthouse, test laboratoryjny

Wydajność — strona główna (desktop)
100
Wydajność — konfigurator (desktop)
99
SEO — wszystkie pomiary
100

Pojedyncze pomiary laboratoryjne, nie dane z rzeczywistego ruchu.

Kontakt

Masz pomysł na stronę? Porozmawiajmy.

Napisz kilka zdań o projekcie — czym zajmuje się firma, co ma robić strona i na kiedy jej potrzebujesz. Odpowiadam osobiście.

Napisz do mnie

Otworzy się Twój program pocztowy.

Otwórz plik