Nedap Security Management

Interaction design: All just one click away

The customer was at the center of our interaction design phase. We explored the customer journey, the portal user needs, and used extensive online search data to determine the best functions for the new website and portal. From there on, we developed a responsive interactive prototype that tested every function for user friendliness and technical ability.

1. Reusable template

The Nedap portal consists of various information about both the use and ability of their security products. This information was categorized on several different levels with each level receiving its own layout template. This ensured that users understand both the level of information they are seeing and how to proceed to a higher or deeper level. We found that this method produced the best interface consistency and helped users and partners quickly familiarize themselves with the portal.

2. Integrated public website and portal experience

The interaction design consisted of similar components for both the public website and the portal, resulting in the same look and feel. We also made sure that users can navigate between these two parts seamlessly for an integrated Nedap experience.

3. Mega menu

A proper menu must be compact and offer an easy way to access and find information on the website. In order to achieve both of these for Nedap, we created a mega menu. The menu consists of various sections and subsections that presents all information in a non-overwhelming and accessible manner.

Graphic design: Always consistent thanks to our style guide

The personality of every brand must lie at the center of the design. Therefore, in the graphic design phase, we conducted an analysis of how Nedap presents itself to the world. This analysis resulted in the chosen look and feel for the website and portal, which was presented to the client and the stakeholders. We ended up using an atomic style guide to deliver the successful look and feel.

1. Look & Feel

An important part of the graphic design process is to create the perfect look and feel. In this design phase, we choose the style for the fonts, colors, and images for the portal and the public website.

2. Atomic Style Guide

In order to develop and create a complex website like Nedap, we designed an atomic style guide. Atomic design is a methodology used to create web designs. The principle behind this methodology is to first create the individual elements and then put them together with the interaction of the user in mind.

3. Consistent public website and portal experience

We decided to use the same style guide for both the public website and the portal experience during the graphic design phase. This helps ensure that the style is the same for both components and can help users quickly familiarize themselves with Nedap.

Development: it’s all about building truly flexible solution

We built this project in 7 sprints, each taking place over the course of two weeks. In total, we spent almost 4 months on this project. Moreover, two weeks before the official launch date our client decided to redo some of the pages, simplify the hierarchy, change the menus, and update the content throughout the site. This has probably happened to you too, right? But we were totally ready for such scenario because now it’s all about true flexibility in terms of content structure. We built this project (and all others) with as much freedom in content creation as we possibly can. Any page can be built using a predefined set of layouts and components. The change in site structure resulted in some small issues here and there of course, but nothing major. As a bonus, the client can create really complex rich pages without developer interaction, which is always a win!

1. Bespoke content pages

The project required a wide range of landing pages with varied content and layouts. We took the easy way to implement them: paragraphs. We created two sets of paragraphs: one for specifying a layout (full width, ½, ⅓, ⅔, etc) and one for the content itself. First, the user needs to select a layout type and then add content to it. Hopefully, the Paragraphs module will support core Layout API at some point in time, making it possible to get rid of layout paragraphs altogether!

2. Custom search facets

There are around 15 different content types and all of them are searchable. There was a requirement to set up a filter for content types on a search results page. However, those 15 content types represented the way we implemented project technically and was not necessarily a customer-centric data structure. In order to avoid confusion and offer too many choices, we decided to segment certain content types into groups that the customer would understand. For example: technically there are a few content types that represent slightly different types of partners, but this does not matter for the search. We decided to group them together under a ‘Partners’ filter. Additionally, we added some JavaScript magic to hide the less important groups under a ‘Show more’ button (due to limited space on the screen and to emphasize the main content).

3. Advanced documents filter

A part of the project was dedicated to developing a portal. This is where Nedap partners can find relevant documents/media/software of the products. Historically, this documents library has a certain categorization, which all of the customers are quite familiar with. It was easily mapped to the core taxonomy vocabulary. However, on the frontend, this huge tree of categories did not look very aesthetic (to say the least) and it was useless for end users. We decided to dynamically display the tree of categories based on user selection. First, the first level is displayed. After the selection of a term, we show all the children of the term in question. Then the process continues. This approach provides customers with a clear and easy-to-use interface for narrowing search results when looking for something specific.