Sector(s)
Team Members
Visit the site
Visit the siteOrganizations Involved
Community contributions
Numerous issues in contributed projects were progressed for the sake of this project, such as for Search API, but also to Drupal core for migrations from Drupal 6. A new Entity Extra Field release was possible due to work on this project.
Hydrotechnik UK Ltd is one of the United Kingdom’s leading test and measurement equipment distributors and manufacturers, servicing industries from construction equipment to Formula One since 1990. They wanted to upgrade and improve their Drupal 7 website. They also have two related businesses, UK Flowtechnik and Filtertechnik, each of which had an even older Drupal 6 website that needed upgrading. Hydrotechnik has their own Drupal developer, but upgrading the sites was too large a task for them to do on their own. They asked ComputerMinds to carry out this work, here’s what we did.
The three sites were to be rebuilt on a single shared Drupal 9 platform, with the project to include:
- Migrating content
- Improving the user journey to help customers find what they need
- Redesigning key pages
- Establishing best practices in code, design and website management
ComputerMinds deployed the three new bespoke websites and trained Hydrotechnik's Drupal developer to be able to pick up content and development tasks on the three sites going forward. The new sites look better, are more secure, and help customers pick out what they need from the huge catalog of products on offer.
About the project
Content migration
Almost all of the content from the old websites needed to be brought across to the new sites. The Hydrotechnik Drupal 7 website was in a fairly good state, so was chosen to represent the content model that all three sites should share. This did mean a bit more effort was required to funnel the content from the older Drupal 6 sites into the newer architecture, but the resulting Drupal 9 websites present the content in a much more modern and consistent way. The migration tools in Drupal core and contributed modules facilitated a smooth content migration.
Shared platform
Contributed and custom modules needed auditing and replacing with equivalents compatible with Drupal 9. The custom modules were particularly interesting to replace as Hydrotechnik's in-house Drupal developer had produced a lot of bespoke templates and functionality.
Upgrading the platform provided an opportunity for a clean start so legacy functionality could be left out. The resulting platform is much leaner and more manageable. There is now one single codebase used for all the websites, rather than three that can become inconsistent over time.
Changes are automatically deployed together for each brand making upgrades and development a lot easier. Even the front end theme is the same across all 3 sites, with just some fairly simple differences applied from distinct style sheets and templates within that single theme.
Faceted search
The old websites buried many products deep in a hierarchy of categories, making it hard for customers to find exactly what they needed. Using facets means products can all be shown together on a category page. Customers can now easily filter to just show the products that would fit their specifications. Bespoke facet widgets were built to support filtering via multiple units (e.g. ºC / ºF for temperature, and bar / psi / mpa for pressure) with sliders.
Redesign
The product and category pages needed a refresh to look more modern. The Drupal 7 versions were taken as a base for the design. We streamlined pages to appear more up to date while also making the most important page elements more prominent. The product pages on the old websites had many elements competing for attention. The new design groups related elements, surfacing 'inherited' information (such as from a product's category) and consistently displaying the most important things in places that users would expect to find them.
The Tailwind CSS framework was then used to implement this design, allowing for rapid development of page templates and minimal bespoke CSS. The history of iterations in the old websites' design could be seen leaking through into their front end as various elements had inconsistent spacing, fonts, etc. Tailwind CSS helped enforce a far more consistent design and easily facilitated the differences in coloring for each brand. Simple configuration files contain everything like colors and sizes of text and spacing, so these can be easily tweaked before compiling to CSS.
The site homepages were completely redesigned to feel clean and modern, with clear signposting to the distinct product categories creating a more pleasant user experience.
Establish best practices
The original websites were simply deployed over FTP to some servers that were managed via cPanel and phpMyAdmin. They had been developed over time in isolation from the evolution of best practices within the Drupal community. ComputerMinds' developers have built their expertise from a wide breadth of projects and have awareness of trends in the Drupal community. We were able to understand Hydrotechnik’s needs and advise on the appropriate solutions and workflows for their context.
We put the codebase under version control and set up scripted deployment workflows with drush and the platform.sh hosting service whilst simultaneously training Hydrotechnik’s in-house developer to be able to work with these things. Our bespoke code adhered to Drupal’s coding standards. Modern Drupal patterns and architectures were used where possible, such as plugins, context-aware blocks and services. Modern front-end tooling such as NPM, Gulp and Tailwind CSS were used to facilitate the design implementation. The websites now have a responsive mobile-first design.
Summary
All three websites were successfully replaced in accordance with the project schedule. They are much more modern and help customers find what they are looking for. Hydrotechnik’s in-house developer has been able to add further improvements and bring in further help from ComputerMinds when needed. The shared platform is more coherent and maintainable due to the best practices applied to it and the workflows for working with it. By now using Drupal 9, the sites have full security support and the best available functionality for the site administrators and visitors. We were delighted to successfully deliver this project!
Why Drupal was chosen
Ultimately Drupal is playing the role of a content management system for Hydrotechnik. It scales to handle the sizable product inventory, and integrates smoothly with Solr for helping customers find relevant products. Drupal had already proven itself suitable for the old websites, and the in-house developer already had plenty of skill and experience to work with it.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Search API was used to power all product listings and facets with Solr as the search engine behind it.
Configuration Split was used to segment some configuration for each brand. But also, since our deployment process automatically imports configuration when changes are made live, we also use the module to split out some configuration to be ‘unmanaged’, i.e. untouched by that process. This allows site administrators to make and retain some configuration changes directly on the live site without having to export them back to code. We have written about this technique in more detail on our ComputerMinds website.
Entity Extra Field is a handy little module we have used for embedding blocks and views within category and product pages. More details about how we use the Entity Extra Field module are also on our website.
Paragraphs and Webform are essential components for nearly every website we build nowadays. Paragraphs allow for splitting the main content of a page into multiple chunks, for more control over their layout. Webform provides the contact forms that are a high priority for Hydrotechnik on every page, as these are their main means of interaction with customers, in place of a full e-commerce solution.
