Harwin

Powerful new website for a leading components manufacturer.

Design, Development | WordPress

Harwin are a world-class manufacturer of high-reliability connectors and components, with nearly 70 years of experience behind them. Originally a simple turning facility, Harwin has grown and expanded into challenging new areas, their website needed to reflect that. With an inventory of over 30,000 products, we were tasked with designing and building a new website that balanced form and function. User journeys had to be slick and efficient, and the overall design needed to reflect Harwin’s own quality.

Utilising a simplified, unified approach to UX allowed us to reduce and improve user journey length dramatically. From the re-categorisation of products to the new superpowered search, the new Harwin website is designed to perform. We undertook a huge UX task in order to help users find the products and information they need as quickly as possible. We implemented a mega menu with distinct categories, guided navigation on list pages and live filtering with an intelligent new search.

Visit Site

Typography.

Moving away from their previous online typeface, Acumin Pro, Harwin were keen to find to something more in-keeping with their brand. We suggested Scene. It’s angled ascenders and descenders tie the typeface in nicely with the Harwin brand. It’s also versatile and easy to read.

Scene
Scene

Bespoke Iconography.

Icons were designed to be clean, crisp and minimal. Some icons were also created with connection in mind, taking inspiration from some of Harwin’s products. For example, rather than using a standard checkbox with a tick, we designed one that looked like a connector pin in its slot.

Navigation Simplicity.

Implementing a mega menu means users access required categories faster, we implemented a mega menu. This, along with prominent category signposts on the homepage, gives users an instant overview of the Harwin product range. It also enables users direct access to category listing pages to find the products they want.

Guided Navigation.

The new guided navigation, or faceted search, helped reduce the number of clicks it took a user to reach a product from nine clicks down to three. 

The faceted search allows a set of relevant filters to be pulled in depending on the product category. Users can filter by important criteria, such as pin count, connector style and gender, allowing them to very quickly refine the list of products.

Superpowered Search.

With such a vast product inventory, it was vital to ensure users can quickly access the products and information they needed. 

Sitewide searches return clear and concise results, split into categorised tabs for Products, Support, Obsolete Products and Insight & News. This allows users to drill down to content they actually want to see much faster than sifting through thousands of mixed results.

Furthermore, different results are provided based on how broad the search is. For example, a user searching for broad terms like ‘connectors’ will be returned top level category pages, like ‘1.25mm Pitch Connectors’, as well as results. On the other hand, users searching for specific terms, such as product codes, will be served specific relevant results.

Mobile in Mind.

With Harwin seeing a gradual increase in mobile visits to their site, they wanted to ensure the new site worked as well on mobile as it does on desktop.

Designed with mobile in mind, the new site gives users the same in-depth, highly-detailed experience as the desktop site. From the technical details on product pages, to the staged menu, users are able to browse the site the same way on any screen size.

Cable Generator

Redesigned and rebuilt from the ground up, the Harwin Cable Generator allows users to design custom Cable Assemblies that are tailored to their project requirements. 

The generator takes users through an interactive step-by-step process and runs complex searches at various points to allow the user to define anything from the cable length to the wire gauge to the connectors used each end.

Say hello