Comprehensive website implementation from analysis to copywriting for an infrastructure and industrial solutions leader
Project type
New website
Industry
Trade in materials for infrastructure and industry
Technologies
Drupal
Elasticsearch
Tailwind CSS
Vue.jsScope of work
Graphic design, pre-implementation analysis, web development, post-implementation support and copywriting
Key Project Aspects
- Pre-implementation analysis, including mockup audit in terms of UX and SEO
- Implementing an expanded, multistage assortment tree
- A modular website structure, which enables quick content management
- Customized integration with the Suite CRM system
- Technological unification with the HBH Group’s websites
About the Client
HTI is part of the HBH Group and one of the leading infrastructure and industrial solutions providers in the Polish market. The company handles water, sewage, road, and rail projects, providing underground technical infrastructure systems, as well as sanitary and industrial installations. The HTI Group includes six companies in Poland. They cooperate closely to build an integrated distribution system. Apart from trade in materials, the company also offers professional support at each project implementation phase.
Marek Bajon
Chief Executive Officer / HBH Group
We appreciate the professionalism, timeliness, and flexible approach (...). Throughout our collaboration, the team responded quickly to our needs, (...) initiated operations independently, and offered solutions to streamline processes.
Experts developed the websites with Drupal CMS technology, which provides us (...) security and convenience in daily content management. Smartbees' team proved its thorough knowledge of this technology and the ability to utilize its potential in practice.
Challenges
The previous website fell short of current standards in terms of graphic design and technicality. It was stylistically and technologically inconsistent with other HBH websites as well. We wanted to create a new one that complies with the entire group’s standards.
Presenting HTI’s broad offer logically and intuitively was a challenge, too. The goal was to enable effortless search for interesting products with minimal clicks.
Goals
Implementing an assortment tree as an expanded main menu part was a key part of the project. We focused on enabling a clear category connection and an easy user navigation. Our client expected the new website to be more efficient as well. They also wanted to enrich the assortment subpages with content that clearly describes the product or category, complies with SEO standards, and is presented attractively on landing pages.
The Solution
Since the Hydrosolar and BimsPlus websites (that belong to the HBH Group) are also based on Drupal, using this technology was a legitimate decision. We opted for version 11, which enabled us to migrate and adapt selected features already in use in the client’s other sites. What benefits did it bring?
- Entire ecosystem technological coherence – maintaining every Group website on one CMS simplifies management, updates, further development, and the daily editor work;
- quick implementation and cost optimization – the ability to reuse tested blocks and modules sped up the development process and lowered the entire project cost;
- forthcoming growth readiness – choosing Drupal is an investment for the future. The CMS supports easy website expansion with new features and solutions, thanks to scalability.
However, the CMS itself is not everything. The project also included:
- Vue.js – a framework that helps render dynamic search results, among other things;
- Tailwind CSS – a low-level UI styling tool;
- Components – separate UI components that help arrange the project structure and diversify the website’s appearance;
- CI/CD + Docker – automated pipelines providing quick and safe implementation.
What did the implementation look like step by step?
- The work began with pre-implementation analysis, involving discussing mockups with the client, a graphic design audit in terms of SEO and SXO, and identifying issues and expected outcomes. Based on this, we laid a solid foundation for high visibility in Google and intuitive user experience. The most essential recommendations involved a standardized URL address structure, redirects implementation, advanced structured data deployment, and a proper header hierarchy order.
- In parallel with the development process, the client cooperated with us on the content – we prepared briefs and article outlines. Our SEO expert recommended keywords to ensure high visibility in search results and substantive correctness for each category subpage.
- Finally, we implemented the new website – our development team took care of every detail and made sure the site is in line with the client’s mockups and expectations.
Solution Details
Extensive Assortment Tree
We created a custom solution, which clearly presents the client’s broad offerings. Users can view product images from the menu and immediately navigate to the relevant subpage. We based this solution on Taxonomy, and despite its advanced architecture, it is easily manageable for editors and ensures automatic links between other categories.
Advanced Internal Search Engine
We used a combination of Vue.js and ElasticSearch to create a search engine that significantly speeds up accessing the content you are looking for. After entering a word or phrase, the user receives detailed results and a category filtering option. This solution eliminates the need for time-consuming browsing for engaging content.
Dynamic Paragraphs
To facilitate navigation on the website, we created dynamic paragraphs that display based on the product range the user is currently in. It enabled quick switches to other subcategories within that group.
Automatically Generated Subcategory Listing
The available subcategory listing is another navigation facilitating mechanism. How does it work? For example, after clicking on the “Gas networks” category, the user is directed to a subpage with the section description and a clear, automatically generated subcategory listing based on the assortment tree. When a category is disabled or moved, it disappears from the listing. This solution saves editors time by eliminating the need for manual changes.
Supplier Listing View
Implementing the website on Drupal 11 allowed us to reuse the proven supplier selection section. It is well known from Hydrosolar and BIMsPlus sites. The user has a convenient way to find the company whose products they are looking for. There is also an option to filter by industry, the name’s first letter, or simply the supplier’s name.
Extensive Contact Page
Another section we created for Hydrosolar and BIMsPlus and reused for this project. Thanks to the interactive map, users can quickly check HTI branch locations in Poland, find specific information about them, and plan their route as it is integrated with Google Maps.
Content Presentation Adapted to the Screen Resolution
We developed a custom solution to adapt the website’s display to the screen resolution. This allows more legible and convenient content presentation on smartphones. For example, not every suggested product tile is visible immediately – users can swipe left to expand the section. This mechanism not only facilitates website browsing on mobile devices but also makes it SEO-friendly.
The effects
The new HTI website combines modern features with maximum clarity, providing an intuitive and convenient user experience from the very first click.
The website is consistent with the visual identity used by the HBH Group. An extensive assortment tree, easy to use for administrators and intuitive for users, is its focal point.
Entirely new, engaging content on category subpages.
Website adaptation for both UX and SEO.
An interactive map allowing users to find HTI branches in Poland quickly.
Non-complicated information search on the website.
Technological consistency with HBH Group’s other websites.
More appealing offer presentation with many paragraphs and an automated subcategory listing.
Browsing improvements for mobile users.
Statistics
8
+ 85 K
~ 280 K
11
54
22
Are you looking for a comprehensive website creation?