Platform Havo-P banner

Platform Havo-P connects schools, teachers, hbo institutions and companies around practice-oriented havo education. The platform brings together knowledge, training, teaching materials, regional networks and collaboration.

I worked on this project at B302 as a frontend developer.

Animated view of the Havo-P landing page
The landing page introduces the platform and its main sections.

The project

Havo-P is about making havo education more practical. The platform helps schools and teachers find support, events, regional contacts and learning materials. On the public website this comes together in pages for scholing, regionetwerk, samenwerking and leermiddelen.

For the client it was important that the website did more than show information. They needed specific WordPress functionality that matched how they organise scholing and events.

Visual identity

The platform has a bold, colourful visual identity. Everything from the logo to the colour palette was designed to feel energetic and approachable — fitting for a national education network aimed at teachers and schools.

Havo-P logo overview showing primary logo, secondary icon, and colour variants
The primary logo pairs the Havo-P wordmark with a folded-page P mark. The icon can appear in any of the platform’s accent colours.
Havo-P colour palette with six named colours and their meanings
Each colour in the palette carries a meaning — indigo for innovation, yellow for optimism, green for growth.
Havo-P typography showing Poppins Black for display and Poppins for body text
Poppins Black handles display headings. The regular weight is used for body text across the platform.

My role

I worked together with one other developer, multiple designers and a project manager. My focus was frontend development and turning the designs into a working WordPress experience.

We also custom built a WordPress plugin for the client’s specific scholing needs. That included functionality such as:

  • a calendar for scholing and events;
  • registration flows for participants;
  • custom forms for the platform;
  • content management that fits how the Havo-P team works.
Animated view of the Havo-P scholing page
The scholing section needed clear pages and custom event functionality behind it.

Pages and features

The site has a playful visual style with colourful blocks, strong typography and a grid background. Translating the design system into WordPress meant keeping the frontend close to the original designs while still being manageable for the Havo-P team to maintain.

Havo-P scholing page with four training categories
The scholing page shows different kinds of support for schools, from exploring to inspiration.

What I learned

This project was a good mix of frontend work and client-specific WordPress development. I learned a lot about working in a larger team, matching design details, and building plugin functionality around real organisational needs instead of generic WordPress features.