VDAB · 2021

Improving employee experience and workflow for job mediators

From instructions in a PowerPoint deck to robust internal tooling for VDAB mediators to match job seekers with training programs across Flanders.

01From PowerPoint decks to a single source of truth

In Belgium, one of the roles of the VDAB is to connect job seekers to the educational programs that improve their odds in the job market. Vlaamse Dienst voor Arbeidsbemiddeling en Beroepsopleiding is the Flemish public employment service in Belgium. VDAB is the government agency responsible for job matching, career guidance, and vocational training/education programs for job seekers. Source Before this project, job mediators at the VDAB matched job seekers to educational programs from several interactive PowerPoint decks.

Client

VDAB

Year

2021

Duration

4 months

Role

Senior Designer
Front-End Developer

The new tool, the Toeleidingswijzer, replaced the deck with a tool mediators could filter, search, and act on directly. Toeleiding is the process in which someone leads another person to a specific place of service, often used in the context of access to care, education, or services.

The main challenge

Mediators were scrolling through slides to find something that fit, which led to inconsistent advice, people getting recommended for courses that were far away and an overall frustrating workflow.

02User research surfaced two distinct working styles

Four months of interviews with mediators and internal stakeholders surfaced one thing that shaped everything else: mediators split roughly evenly between two working styles. Some browse toward an answer; others already know exactly what they want and go straight to search. People tend to be either Searchers or Browsers, according to former Apple Human Interface Group founder Bruce Tognazzini. It’s about supporting both options rather than choosing one over the other. Source

Filtering and search sit as two equal, permanently visible entry points, so neither working style has to go looking for its way in. The new design now supports mediators who want to browse through the results, as well as those who already know exactly which program they’re looking for and just need to find and enrol a job seeker in it.

Filter, search and browse sit as equal entry points.
Filter, search and browse sit as equal entry points.

03Show what matters first but allow mediators to dig deeper

Each program in the results runs across multiple locations, is delivered by a different organiser, and has its own availability. All three factor into whether it’s the right fit for a job seeker. The hard part of this page was helping mediators navigate that complexity without burying them in it.

The progressive disclosure Educational psychologist John Sweller’s cognitive load theory holds that people reason and decide better when unnecessary detail is kept out of view until it’s needed, freeing capacity for the decision at hand. Source was the guiding principle: show the information that matters most at a glance, and let mediators drill into the rest only when they need it.

Mediators can enrol a job seeker directly from the results list, or open a program’s full detail page when a decision needs more context first. Both stay one click away, since some choices need only a glance and others need the full picture.

Enrolling for a course can be done straight from the list bypassing the detail pages.
Enrolling for a course can be done straight from the list bypassing the detail pages.

Because each program is kept up to date by a program owner working independently in their own region, the results are only as reliable as the least-maintained entry among them. User research found that mediators were frustrated by stale or incorrect information, and that they often had to navigate to another system to report it.

Mediators can flag anything that looks wrong straight from this page, sent directly to the person responsible for it from within the context of the tool. They no longer need to navigate to another system, with the redesign, they can report it in context.

Providing feedback about a listing takes one dialog, sent straight to the person who can fix it.
Providing feedback about a listing takes one dialog, sent straight to the person who can fix it.

04Building the front-end myself in parallel with design-work

At VDAB, Design owned the front-end too. This was a time long before GenAI. It’s a relatively unique setup for a design department. Despite this project being relatively short, building the front-end alongside many talented colleagues taught me several nuances of what it takes to ship production code. Working from the design system in code, I built the fully responsive HTML and CSS myself. Accessible, production-ready, and handed straight to the development teams to integrate.

Because I built it myself using the standardized components and patterns from the design system, the Toeleidingswijzer looked and worked exactly as designed.

New components specced and built in code, for future reuse.
New components specced and built in code, for future reuse.

For the new components, I built them in a way that was consistent with the existing design system, and contributed them back to the design system for future use.

Designing in code taught me

  • Design systems meet real-world edge cases. Implementation affects the design choices I made because of how code behaves in practice.
  • Accessibility is a build-time decision. Focus order, ARIA states, and keyboard navigation only become real once you’re writing markup, not mocking screens.
  • Responsive costs more in code than in Figma. Breakpoints that look simple as artboards force real decisions about what collapses, reflows, or disappears.
  • Writing the CSS enforces component discipline. It surfaces exactly where the design system needs a new variant, and where you’re tempted to one-off something.

05The three improvements that made the biggest difference

Looking back, the toughest part of this project was learning to write production-grade front-end code. I leaned heavily on talented colleagues who were patient enough to teach me how to do it properly, and I’m grateful for that.

If I had to point to where the time went, it was less in the code itself and more in understanding the mediators’ specific workflow and digging through past prototypes to understand what had already been tried and why it hadn’t worked. This helped me get from a manual, error-prone process to a streamlined, efficient solution.

From...

An interactive PowerPoint deck, manually kept up to date, with no way to tell if the version in front of you was current.

To...

A shared tool with full criteria filtering and direct search, since mediators split roughly evenly between browsing toward an answer and already knowing what they want.

To conclude, my design effort in this project focused on improving things that made the biggest difference to productivity and consistency in advice. By distilling a process from several unstructured decks into a single source of truth, mediators can now focus on what matters most: helping job seekers find the right training programs.

One source of truth

Replaced a manually-updated PowerPoint deck mediators could no longer trust.

Several ways to navigate

Filter or search, supporting both mediator working styles without forcing either to adapt.

Closing the loop

Mediators flag stale listings directly to the responsible program owner, in the same screen.

Robert A. Paauwe

About Robert

Design + Systems Thinking + Platforms + Complex Orgs

Currently I am Chapter Lead Design - Platform at Rabobank. Previously, co-founder of Tinybots and creator of social care robot Tessa.

More projects

Designing and building a tarot app into the app stores

A tarot app designed, built, and shipped solo, with its own brand identity, live now on the App Store and Google Play.

Rebuilding a decade-old public website with a renewed publishing flow

A public website redesign for Atrias, Belgium's central information provider for the energy sector. It replaced a decade-old publishing flow for regulatory documentation.