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
  • Badania z użytkownikami i warsztaty jako fundament strategii UX
  • Projekt UX/UI wszystkich kluczowych widoków
  • 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

Projekt poprzedziliśmy fazą badawczą. Przeprowadziliśmy 12 indywidualnych wywiadów z przedstawicielami firm budowlanych – zaopatrzeniowcami, kierownikami budów, właścicielami małych firm wykonawczych i projektantami. Rozmowy dotyczyły ich codziennej pracy, sposobów szukania informacji, relacji z dostawcami i oczekiwań wobec strony internetowej. Badania pokazały coś, czego nie było widać w analityce – klienci HTI często pracują na budowie, pod presją czasu i bez dostępu do komputera.

Wyniki rozmów skonfrontowaliśmy z celami biznesowymi HTI podczas warsztatów z zespołem klienta. Oto kilka głównych wniosków, na których oparliśmy strategię UX:

  • Dostępność i szybkość korzystania – z myślą o użytkownikach działających w terenie, którzy muszą szybko znaleźć potrzebne informacje, umieściliśmy dane kontaktowe w widocznych miejscach na całej stronie, zaprojektowaliśmy prostą nawigację i wdrożyliśmy wyszukiwarkę obejmującą wszystkie typy treści.
  • Strona dla nowych klientów – badania pokazały, że stali klienci HTI nadal wolą zadzwonić do opiekuna niż szukać na stronie. Dlatego architekturę zaprojektowaliśmy przede wszystkim pod osoby, które dopiero poznają markę.
  • Zróżnicowane grupy odbiorców – strona musiała jednocześnie obsługiwać wiele grup (m.in. duże firmy budowlane, małe firmy wykonawcze, projektantów i potencjalnych pracowników), o różnych celach, potrzebach i sposobie poruszania się po serwisie. Nawigacja i struktura musiała to uwzględniać.
  • Wykorzystanie bogatej listy wartości – wartości, jakie firma reprezentuje, musieliśmy pokazać na stronie. Przedstawiamy je w kluczowych miejscach, aby przekonać użytkowników do korzystania z usług HTI.

Kluczową decyzją projektową było odejście od jednego ogólnego formularza kontaktowego na rzecz zestawu ścieżek konwersji dopasowanych do tego, na jakim etapie relacji z HTI znajduje się dany użytkownik. Każdy punkt styku z marką przemyśleliśmy strategicznie pod kątem tego, czego klient potrzebuje w danym momencie:

  1. Osoba gotowa na współpracę trafia bezpośrednio do formularza „Zostań naszym klientem".
  2. Klient, który chce najpierw porozmawiać ze specjalistą, może bezpłatnie umówić się na konsultację bezpośrednio na swojej budowie.
  3. Użytkownik zainteresowany konkretną kategorią asortymentu, ale jeszcze niezdecydowany, ma pod ręką lżejszą formę kontaktu: „Zadaj pytanie o ofertę".
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.

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 fazy badawczej i warsztatów z zespołem HTI, na podstawie których opracowaliśmy strategię UX, architekturę informacji i wyznaczyliśmy kluczowe ścieżki użytkowników. Następnie zaprojektowaliśmy makiety wszystkich najważniejszych widoków, które stały się punktem wyjścia do audytu pod kątem SEO i SXO oraz dalszych prac nad treściami i developmentem.
  2. Przeszliśmy do 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 SEO 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.
  3. 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.
  4. 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.

10

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?