Van der Lely Foundation: an accessible custom website that organises applications

The Van der Lely Foundation is an independent foundation that supports initiatives in education, health, and arts and culture, rooted in the values of the Van der Lely family. For the Van der Lely Foundation, we designed and built a bilingual custom website. It is accessible to WCAG 2.1 AA level and has a step-by-step application form.

Anyone who assesses applications needs a website that organises the application process. A foundation also has to be transparent, and accessible to everyone. Those are requirements you don't always come across with an ordinary business website. Here, they were the starting point.

What was the challenge for the Van der Lely Foundation?

A foundation website calls for transparency that can be verified and accessibility that is not optional. An ANBI foundation (the Dutch status for public benefit organisations) must make its policy plan, board composition and annual figures, among other things, public and easy to find. On top of that, applications came in unstructured, which made assessing them time-consuming.

Applicants and partners also come from all walks of life. So the site has to work for people with a visual or motor impairment too. That is not an extra, because a foundation that says it wants to reach everyone can't have a website that shuts some people out.

Yet the practical problem was at least as big. If every application looks different, the team's time goes into sorting rather than assessing. And assessing is exactly what a foundation wants to spend its time on.

Why did we choose this approach for the custom website?

We took WCAG 2.1 AA as a design principle, not as a check afterwards. We also designed the application form in steps, so every application comes in in the same format. React gave us room to make that form smooth, while the rest of the site stays light.

My view: adding accessibility afterwards is more expensive and worse than designing with it from the start. You end up fixing colours, headings and buttons you have only just approved. That is why it was part of every design choice here.

Something similar applies to the form. One long form puts people off and leads to half-finished applications. A form in steps, on the other hand, feels smaller, even when you ask for exactly the same information. Curious what a custom site like this costs? Take a look at the cost of having a website built.

How did we build it?

In React, with a step-by-step application form, a dedicated section for ANBI information and a bilingual set-up. The components are built so the foundation team can add projects, annual reports and languages by filling them in. Accessibility was part of the build from the first design.

How does the application form work?

The form guides applicants through the process, instead of confronting them with one long screen. Each step asks for one type of information. Validation happens immediately, so errors don't only show up at the end.

The site then processes a completed application automatically and bundles it by email for the foundation team. That way every application comes in in the same format and comparing them is simpler.

How was the site made accessible?

By following the WCAG 2.1 AA guidelines in every choice. That means sufficient contrast, a logical heading structure and full keyboard operation. There are also visible focus indicators and text alternatives for images.

Where is the ANBI information?

In a dedicated section, so visitors don't have to search for it. An ANBI must make its policy plan, board composition, remuneration policy and a financial statement, among other things, publicly accessible. That is why we treated that information as permanent site content, not as an attachment. The supported projects are also clearly listed.

Why bilingual?

The site is available in Dutch and English. That makes the foundation reachable for international partners and institutions. And thanks to the way it is built, an extra language doesn't require a rebuild.

What does the design look like?

The design uses natural, earthy tones, calm typography and plenty of white space. Micro-animations subtly bring the content to life. They are set up so that visitors with motion sensitivity are not bothered by them. The design had to suit the mission, not shout over it.

I think this is a good example of accessibility and atmosphere going together. Many people think an accessible site has to be dull. That's not true. You just make deliberate choices about contrast, motion and space.

What did the custom website deliver for the Van der Lely Foundation?

Applications now come in complete and in a fixed format, which makes assessing them simpler. The policy plan, ANBI information and supported projects are easy to find and read. And adding new projects, annual reports or languages is a matter of filling them in.

We built a very different custom site, with the same care for the visitor, for Bar-le-Duc and their Bar-4-Bar platform. There too, the design started with the question of what the visitor wants to do first.