Kompleksowe wdrożenie strony od analizy po copywriting dla lidera rozwiązań infrastrukturalnych i przemysłowych
Rodzaj projektu
Strona internetowa
Branża
Handel materiałami dla infrastruktury i przemysłu
Technologie
Zakres prac
Projektowanie graficzne, analiza przedwdrożeniowa, web development, support powdrożeniowy i copywriting
Najważniejsze elementy projektu
- Analiza przedwdrożeniowa, w tym audyt makiet pod kątem UX i SEO
- Wdrożenie rozbudowanego, wielostopniowego drzewka asortymentu
- Modułowa budowa strony przyspieszająca zarządzanie contentem
- Customowa integracja z systemem Suite CRM
- Ujednolicenie technologiczne z innymi stronami spółek w Grupie HBH
O kliencie
HTI to jeden z wiodących dostawców kompleksowych rozwiązań dla infrastruktury i przemysłu na polskim rynku. Firma jest częścią grupy HBH i obsługuje m.in. inwestycje wodno-kanalizacyjne, drogowe oraz kolejowe, dostarczając systemy podziemnej infrastruktury technicznej, instalacje sanitarne czy przemysłowe. Grupę HTI w Polsce tworzy sześć spółek, które ściśle współpracują, budując zintegrowany system dystrybucji. Poza sprzedażą materiałów firma oferuje również fachowe wsparcie na każdym etapie realizacji projektu.
Marek Bajon
Dyrektor Zarządzający (Prokurent) / Grupa HBH
Doceniamy profesjonalizm, terminowość oraz elastyczne podejście (...). W trakcie współpracy zespół reagował szybko na nasze potrzeby, (...) samodzielnie inicjował działania i proponował rozwiązania usprawniające procesy.
Serwisy zostały przygotowane w technologii Drupal CMS, która zapewnia nam (...) bezpieczeństwo, a także wygodę w codziennym zarządzaniu treścią. Smartbees udowodniło, że doskonale zna tę technologię i potrafi wykorzystać jej potencjał w praktyce.
Wyzwania
Poprzednia strona HTI mocno odbiegała od obecnych standardów zarówno pod względem projektowania graficznego, jak i kwestii technicznych. Nie była również spójna stylistycznie i technologicznie z innymi serwisami HBH, dlatego przy tworzeniu nowej witryny zależało nam, aby ujednolicić podejście względem standardów obowiązujących w całej Grupie.
Kolejnym wyzwaniem była prezentacja rozbudowanej oferty HTI w logiczny i intuicyjny sposób, aby użytkownicy mogli łatwo znaleźć interesujący ich asortyment, bez konieczności wielu kliknięć.
Cel projektu
Kluczowym elementem projektu było wdrożenie drzewka asortymentu jako rozbudowanej części menu głównego, które jasno określałoby powiązania między poszczególnymi kategoriami oraz ułatwiłoby nawigację dla użytkowników. Klient oczekiwał również, że nowa strona będzie wydajniejsza. Zależało mu też na dostarczeniu jakościowych treści na podstrony asortymentu, które jasno opisywałyby dany produkt lub kategorię, a jednocześnie były zgodne ze standardami SEO oraz atrakcyjnie prezentowały się na stronach docelowych.


Rozwiązanie
Ponieważ strony Hydrosolar i BimsPlus – należące do Grupy HBH – również oparliśmy na Drupalu, wybór tej technologii był naturalnym krokiem. Zdecydowaliśmy się na wersję 11 systemu, co pozwoliło łatwo przenieść i dostosować wybrane funkcje wykorzystywane już na innych stronach klienta. Jakie jeszcze korzyści przyniósł wybór Drupala?
- Spójność technologiczną całego ekosystemu – utrzymanie wszystkich stron Grupy na jednym CMS-ie upraszcza zarządzanie, aktualizacje, dalszy rozwój oraz codzienną pracę edytorów;
- szybsze wdrożenie i optymalizację kosztów – możliwość ponownego wykorzystania sprawdzonych bloków i modułów znacząco skróciła czas developmentu i obniżyła koszty całego projektu;
- gotowość na przyszły rozwój – wybór Drupala to inwestycja w przyszłość. Dzięki skalowalności, CMS bez problemu wspiera rozbudowę stron o nowe funkcje i rozwiązania.
Sam CMS to jednak nie wszystko. Oprócz niego w projekcie zastosowaliśmy:
- Vue.js – framework, który pomógł dynamicznie renderować m.in. wyniki wyszukiwania na stronie;
- Tailwind CSS – niskopoziomowe narzędzie do stylowania interfejsu użytkownika;
- Single Directory Components – wydzielone komponenty UI, które pomagają uporządkować strukturę projektu i urozmaicić wygląd strony;
- CI/CD + Docker – zautomatyzowane pipeline’y zapewniające szybkie i bezpieczne wdrożenia.
Jak krok po kroku wyglądało wdrożenie?
To nie było zwykłe postawienie nowej strony. Aby wszystko się udało, projekt wymagał holistycznego podejścia. Nad czym konkretnie pracowaliśmy?
- Prace rozpoczęliśmy od analizy przedwdrożeniowej, która obejmowała omówienie makiet z klientem, audyt projektów graficznych pod kątem SEO i SXO oraz identyfikację problemów i oczekiwanych efektów działania witryny. Na tej podstawie stworzyliśmy solidne fundamenty pod wysoką widoczność w Google i intuicyjną obsługę dla użytkowników. Najważniejsze zalecenia dotyczyły m.in. ujednolicenia struktury adresów URL, wdrożenia przekierowań, implementacji zaawansowanych danych strukturalnych oraz właściwego uporządkowania hierarchii nagłówków.
- Równolegle z procesem developmentu współpracowaliśmy z klientem nad treściami – przygotowywaliśmy briefy i konspekty tekstów, a specjalista SEO rekomendował frazy kluczowe, tak aby każda podstrona kategorii była zarówno merytoryczna, jak i dobrze widoczna w wynikach wyszukiwania.
- Na koniec wdrożyliśmy nową stronę – zespół developerów zadbał o każdy szczegół i przygotował witrynę zgodną z makietami i oczekiwaniami klienta.
Szczegóły techniczne projektu

Rozbudowane drzewko asortymentu
Stworzyliśmy customowe rozwiązanie, które w przejrzysty sposób prezentuje szeroką ofertę klienta. Z poziomu menu użytkownik może zobaczyć zdjęcia produktów i od razu przejść do interesującej go podstrony. Rozwiązanie oparliśmy na Taksonomii, dzięki czemu – mimo zaawansowanej architektury – pozostaje łatwe w zarządzaniu dla edytorów i zapewnia automatyczne powiązania między innymi kategoriami.

Zaawansowana wyszukiwarka wewnętrzna
Dzięki połączeniu Vue.js i ElasticSearch stworzyliśmy wyszukiwarkę, która znacząco przyspiesza dotarcie do poszukiwanych treści. Po wpisaniu słowa lub frazy użytkownik otrzymuje szczegółowe wyniki z możliwością filtrowania kategorii. Takie rozwiązanie eliminuje konieczność czasochłonnego przeglądania witryny w poszukiwaniu interesujących treści.

Dynamiczne paragrafy
Aby ułatwić nawigację po stronie, stworzyliśmy dynamiczne paragrafy wyświetlające się na bazie asortymentu, w którym użytkownik się znajduje. Dzięki temu można szybko przejść do innych podkategorii z tej grupy.

Automatycznie generowany listing podkategorii
Kolejnym mechanizmem ułatwiającym poruszanie się po witrynie jest listing dostępnych podkategorii. Jak działa? Po kliknięciu np. kategorii „Sieci gazowe”, użytkownik trafia na podstronę z opisem tej sekcji oraz przejrzystym listingiem dostępnych podkategorii, który generuje się automatycznie na bazie drzewa asortymentu. W momencie gdy dana kategoria zostanie wyłączona/przeniesiona, zniknie z listingu, zaoszczędzając czas edytorów na ręczne wprowadzanie zmian.

Widok listingu dostawców
Dzięki wdrożeniu strony w oparciu o Drupal 11 mogliśmy ponownie wykorzystać sprawdzoną sekcję wyboru dostawców, znaną już z witryn Hydrosolar i BIMsPlus. Użytkownik zyskuje tym samym wygodne narzędzie wyszukiwania firmy, której produktów poszukuje – może skorzystać z filtrowania po branży, pierwszej literze nazwy lub po prostu wpisać nazwę dostawcy w wyszukiwarkę.

Rozbudowana strona kontaktowa
To kolejna sekcja, którą stworzyliśmy dla Hydrosolar i BIMsPlus, a teraz wykorzystaliśmy ponownie przy okazji tej realizacji. Dzięki interaktywnej mapie użytkownik może szybko sprawdzić, w których lokalizacjach w Polsce znajdują się oddziały HTI, znaleźć szczegółowe informacje na ich temat oraz wytyczyć trasę dzięki integracji z Google Maps.

Prezentacja treści dostosowana do rozdzielczości ekranu
Przygotowaliśmy customowe rozwiązanie, które dostosowuje sposób wyświetlania strony do rozdzielczości ekranu. Na smartfonach pozwala to na czytelniejszą i wygodniejszą prezentację treści. Przykładowo, nie wszystkie kafelki z proponowanymi produktami są widoczne od razu – użytkownik może przesunąć palcem w lewo, aby rozwinąć dalszą część sekcji. Taki mechanizm nie tylko ułatwia przeglądanie strony na urządzeniach mobilnych, ale również jest przyjazny SEO.
Efekty pracy
Nowa strona HTI łączy nowoczesne funkcje z maksymalną przejrzystością, zapewniając użytkownikom intuicyjne i wygodne doświadczenie już od pierwszego kliknięcia.
Serwis jest spójny z identyfikacją wizualną stosowaną przez Grupę HBH, a jego centralnym elementem jest rozbudowane drzewko asortymentu – proste w obsłudze dla administratora i przede wszystkim intuicyjne dla użytkownika.

Całkowicie nowe, angażujące treści na podstrony kategorii
Dostosowanie strony zarówno pod UX, jak i SEO
Interaktywna mapa pozwalająca szybko wyszukać oddziały HTI w Polsce
Łatwe i szybkie wyszukiwanie informacji na stronie
Spójność technologiczna z innymi serwisami Grupy HBH
Atrakcyjniejsza prezentacja oferty dzięki licznym paragrafom i automatycznym listingom podkategorii
Ułatwienia przeglądania dla użytkowników mobilnych
Statystyki realizacji
8
+ 85 K
~ 280 K
11
54
22
Zależy Ci na kompleksowym stworzeniu nowej strony internetowej?