The Challenge
Contrinex is a Swiss manufacturer of precision industrial sensors — inductive sensors, photoelectric sensors, safety sensors, and RFID systems — serving automotive, food and beverage, and manufacturing automation markets globally. Their product catalogue spans thousands of SKUs differentiated by sensing range, output configuration, housing material, protection class, and operating voltage: the kind of technical specification depth that defines whether a procurement engineer or automation specialist can find the right component for their application without resorting to a telephone call or a distributor catalogue.
The core challenge of industrial automation website design with complex product catalogues is the expertise gap between the manufacturer's product knowledge and the buyer's ability to navigate it. An engineer who knows exactly what they need — a PNP normally-open inductive proximity sensor, M12 form factor, 4mm sensing range, 10-30VDC — should be able to find it in three clicks. An application engineer who knows the application requirement but not the product specification should be guided to the right product through application-first navigation. Both journeys need to coexist in the same catalogue architecture.
The density of technical content presented a visual design challenge distinct from most B2B website projects. Industrial sensor specifications are not reducible to simplified descriptions: the engineer making a component selection decision needs to see the full specification table, the dimensional drawing, the connection diagram, and the characteristic curves — all legibly, on a range of devices from a large engineering workstation monitor to a tablet on the factory floor. Designing information density that is technically complete without being visually overwhelming was the central visual challenge of the project.
The Strategy
- Structured UI system for complex product catalogues — designed a consistent product card and listing template that surfaced the five to seven specification parameters most relevant to initial product evaluation across all sensor categories, with expandable detail for the full specification sheet
- Dual-mode navigation architecture — built navigation pathways for both specification-led search (the engineer who knows what they need) and application-led navigation (the engineer who knows what they are trying to achieve), allowing both user profiles to reach relevant products through their natural entry point
- Multi-level category navigation redesign — restructured the product taxonomy from a flat, alphabetically-organised list to a hierarchical navigation system organised by sensor type, application area, and operating environment, reducing the number of navigation steps required to reach a specific product family
- Technical data visualisation design — designed specification tables, dimensional drawing integration, and characteristic curve display components that communicated technical data with the legibility engineers require, optimised for both large desktop monitors and tablet displays used in factory environments
- Product comparison tool UX — designed a component comparison interface allowing engineers to evaluate up to four sensor variants side-by-side on their full specification parameters, removing the need to navigate between product pages to make a selection decision
- Smart factory and Industry 4.0 content architecture — designed dedicated content sections for Contrinex's IO-Link and smart factory solutions, giving industrial automation engineers and system integrators a clear entry point for the connectivity and integration products that differentiate Contrinex in the Industry 4.0 market
The Results
Why this matters
Industrial B2B websites that make it difficult for engineers to find the right component don't lose the sale to a competitor manufacturer — they lose it to a distributor who has invested in better product search tools. A sensor manufacturer whose website requires a telephone call to confirm product compatibility is effectively outsourcing its customer relationships to the distribution channel. B2B technology website design that returns that product selection capability to the manufacturer's own platform retains the direct customer relationship and the margin that comes with it.
Engineering company website design for complex product catalogues is information architecture before it is visual design. The hierarchy of product categories, the parameters surfaced in product listings, and the navigation pathways available to different engineer personas determine whether a buyer finds what they need or gives up. Visual design applied to a poor information architecture produces a better-looking failure.
The dual-mode navigation was the design decision that most directly addressed the diversity of the technical buyer audience. A quality engineer sourcing a safety sensor for a specific machine guarding application does not think about that requirement in terms of sensor type — they think in terms of application, safety category, and mounting constraint. Building an application-first navigation pathway alongside the specification-led catalogue search meant both engineering personas could reach relevant products through their own mental model of the problem.
If you are managing an industrial website design project for a manufacturer with a complex product catalogue, a B2B technology platform with multiple technical buyer personas, or any engineering company website that needs to make complex product selection intuitive, Contrinex demonstrates the UX architecture and navigation design that technical B2B audiences require.