HTI company logo

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

logo Drupal Drupal
Logo Elasticsearch Elasticsearch
Logo Tailwind CSS Tailwind CSS
Logo Vue.js Vue.js

Zakres prac

Projektowanie graficzne, analiza przedwdrożeniowa, web development, support powdrożeniowy i copywriting

  • 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.

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ęć.

Logo Elasticsearch
Logo Vue.js
logo Drupal

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.

Sens projektu strony internetowej HTI
Element tła

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?

  1. 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.
  2. 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.
  3. Na koniec wdrożyliśmy nową stronę – zespół developerów zadbał o każdy szczegół i przygotował witrynę zgodną z makietami i oczekiwaniami klienta.
Rozbudowane drzewko produktowe dla HTI

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 na stronie HTI

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.

Ułatwienie nawigacji na stronie HTI

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.

Menu podkategorii generowane automatycznie

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.

Nowoczesna lista dostawców dla HTI

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ę.

Nowa strona internetowa HTI - kontakt

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.

Dostosowanie wyświetlania treści do rozdzielczości ekranu

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.

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.

Efekt pracy nad nową stroną HTI
  1. Całkowicie nowe, angażujące treści na podstrony kategorii

  2. Dostosowanie strony zarówno pod UX, jak i SEO

  3. Interaktywna mapa pozwalająca szybko wyszukać oddziały HTI w Polsce

  4. Łatwe i szybkie wyszukiwanie informacji na stronie

  5. Spójność technologiczna z innymi serwisami Grupy HBH

  6. Atrakcyjniejsza prezentacja oferty dzięki licznym paragrafom i automatycznym listingom podkategorii

  7. Ułatwienia przeglądania dla użytkowników mobilnych

8

specjalistów pracujących nad projektem

+ 85 K

linijek kodu

~ 280 K

napisanych znaków na podstrony kategorii

11

customowych modułów

54

paragrafy

22

przeanalizowane widoki w audycie SEO/UX - 11 desktop i 11 mobile

Zależy Ci na kompleksowym stworzeniu nowej strony internetowej?