Werkveilig

Context

Present the services of the Instituut voor Veiligheid & Milieu to visitors with different goals: finding a training course, understanding the services or asking for support. A large amount of content had to stay easy to take in.

The challenge

Keep courses, industries, services and expert content from blending into one stream. Navigation should help visitors recognise their task and reach a specific offer.

What we did

1. Several ways in, one architecture

   The homepage opens up the main areas, while the inner structure separates training, services, industry-specific needs and knowledge. Each way in continues as a route of its own.

2. The training catalogue as a working tool

   The UX/UI works out the path from a general area to a specific course. The catalogue has its own information hierarchy and a responsive presentation.

3. Contact at the right moment

   Forms and contact points are built into the offer structure. Visitors can ask a question or apply right where they have understood the service they need.

4. A system for a lot of content

   Exo 2 unifies navigation, headings and body text. Contrast in weight and size separates the levels, and colour distinguishes surfaces and accents.

What we built

1. Architecture and user journeys

   We organised a large volume of information into services, industries, training and expert content, and designed the path to the right area and its contact point.

2. UX/UI and visual system

   We designed consistent interfaces for the homepage, the catalogue and the inner sections, with desktop and mobile layouts that keep the brand recognisable and the hierarchy clear.

3. Development and configuration

   We built the site, the forms and the contact points, and connected the service and industry structures with the training catalogue and expert resources.

4. SEO, testing and launch

   We organised the content and the SEO structure, ran testing and final optimisation, and took the project to launch with one continuous route from exploring the offer to getting in touch.

Visual system

A green base, a lime accent and dark blue-green text create a professional, easy-to-read interface. On the homepage a large photo is supported by entry points into each area, followed by alternating information and visual blocks.

Typeface

Exo 2 · weights 300, 400, 700, 800

Body text

16 px · 300 · line height 1.5

H1

800 · clamp(32 px, 4vw, 52 px) / 1

H2 / H3

28–44 px / 24–28 px · weight 800

Navigation / buttons

18 px, 800 / 16 px, 700

Container

1280 px; wide blocks up to 1456 px; 24 px margins

Reference widths

640 · 768 · 1024 · 1280 · 1456 px

Journeys and material

An area on the homepage → services or the training catalogue → a specific offer → enquiry. Industry sections and expert content provide extra ways into the same structure.

Promotion

We optimised the site for search, set up a Google Ads account, and launched advertising and search promotion.

The result

IVM now has a working corporate website for the Dutch market. The company, its services, training and expert resources share one structure. Visitors can choose an area and get in touch about their task on a wide screen or a phone. Architecture, design and the full build were delivered in one project, all the way to launch.

Tools and build

UX/UI · responsive web development · HTML / CSS · SEO structure