Essentra
User-centred website strategy, design and testing for components manufacturer
Essentra Components is a world leader in the manufacture and distribution of small, essential components like plastic caps, clamps, fasteners and handles. Cyber-Duck was brought onboard to surface their thousands of products through an effective design system, for their technical team to roll-out into a new website.
Objectives
Over one billion parts from Essentra Components are stocked and shipped across EMEA, APAC and the Americas via 42 manufacturing sites, 64 distribution centres and 5 R&D centres worldwide.
Their current website was launched a few years ago. It has around 35 variations – one for each major country the business operates in – and it’s fragmented across several platforms. They are not well joined up and do not provide an intuitive, streamlined user experience. This has led to a website that is complex to use and challenging to manage.
Cyber-Duck was invited to transform how the website works for its users and customers, helping them along every step of the buying process. They were migrating 47 websites across six different platforms and replacing them with one platform, which consisted of 30 transactional websites. Applying our accredited user-centred design process, our objectives were to:
- Delve into Essentra’s research and define key personas.
- Develop a design system that their technical team could take forward.
User-centred design strategy
First, we ran a UX strategy workshop with key stakeholders. Through a series of exercises, we explored the risks, goals, empathy maps, typical user stories/journeys and wrote a set of design principles for the future website.
We immersed ourselves into Essentra’s landscape and current data, including personas, website surveys and audits; we validated the findings by conducting persona interviews and research. For example, we learned that personas typically knew roughly what they wanted, but there was scope for subtle design changes to fit off-the-shelf components.
The navigation needed careful attention, due to the wealth of products that Essentra offers. In the final mega menu, we categorised the products into ‘meta categories’, all headed up with a ‘popular products’. Once selected, the popular products window could be easily opened without even having to deep dive into all products.
Working closely with Essentra’s team, we prototyped all key interfaces and interactions into the website; we moved from low-fidelity sketches to semi-functional prototypes. We ensured a high level of usability through remote usability testing for the key interfaces and user journeys.
Design system deliverable
Our final deliverable for Essentra was a design system, or pattern library. Based on the initial prototypes and art direction, Cyber-Duck designed a pattern library that included common interface that can be reused. This included:
- The look and feel of each element e.g. text styles, buttons, form fields
- An explanation about how to use the UI pattern
- Rationale to support the pattern choice
- Developer notes to support the use of the pattern
Paired with code snippets, the design system included coded page templates ready for Essentra’s technical team to implement into their pages with ease.