Craft CMS website voor Focus Beroeps Academie

De bestaande website van Focus Beroepsacademie draaide op Craft CMS 2, een versie die nauwelijks nog werd ondersteund en alleen cruciale security-updates ontving. Het systeem gaf deprecation-meldingen, was lastig onderhoudbaar en de website voldeed niet aan de eisen voor digitale toegankelijkheid (WCAG).

De opdracht bestond uit drie pijlers: een volledige rebuild in Craft CMS 4, het digitaal toegankelijk maken van de website en het doorvoeren van gerichte UX- en contentoptimalisaties. Daarbij lag de nadruk vooral op de pagina’s ‘Voor leerlingen’ en ‘Voor ouders’, waar structuur, vindbaarheid en gebruiksgemak cruciaal zijn.

Hosting bleef in handen van Accessible Minds, maar werd ondergebracht op een nieuwe, moderne serveromgeving bij onze hostingpartner Rootnet.

Huidige situatie en uitdagingen

Bij de start troffen we een verouderde Craft 2-installatie aan, met bijbehorende technische risico’s en beperkte ondersteuning vanuit het CMS. Het bestaande design voldeed niet aan de WCAG-richtlijnen: contrasten waren onvoldoende, focus- en hoverstates ontbraken en de lees- en scansnelheid liet te wensen over doordat teksten te breed waren en elementen te dicht op elkaar stonden. Ook de footer en diverse componenten oogden rommelig en boden onvoldoende rust. Daarnaast bevatte veel pagina’s te weinig tekst, wat negatieve gevolgen had voor SEO en de algehele vindbaarheid.

Daarnaast bleek uit UX-sessies dat de inhoud van de pagina’s Voor leerlingen en Voor ouders niet logisch was opgebouwd. Informatie was verdeeld over meerdere plekken en overlapte elkaar onnodig, waardoor bezoekers moesten zoeken in plaats van worden geleid.

UX Discovery en contentstrategie

Voor de redesign van de website zijn meerdere UX discovery-sessies gehouden. Uit deze sessies kwamen onder andere flowcharts voort voor de belangrijkste gebruikersstromen, wireframes die de nieuwe pagina-indeling inzichtelijk maakten en een eerste contentinventarisatie waarin de behoeften van verschillende doelgroepen zijn meegenomen. Hiermee ontstond een helder fundament voor de volgende ontwerp- en ontwikkelfases.

Tijdens het reviewen van de wireframes werd duidelijk dat vooral de pagina’s Voor leerlingen en Voor ouders scherper moesten worden afgebakend.

Op basis van UX-inzichten, best practices bij andere middelbare scholen en analyses van bestaande portalen, stelden we een heldere contentverdeling voor:

Leerlingen

• Ziek melden
• Rooster
• Schoolregels
• Doorstromen naar het MBO
• Examens en stage lopen
• Lesstof, cijfers en reglementen
• Schoolleiding (korte introductie, vanuit leerlingperspectief)

Ouders

• Aanmelden kind
• Vakantieregeling
• Ouderbijdrage
• Lesstof/cijfers/reglementen (vanuit ouderperspectief)
• Schoolleiding
• Ouderraad
• Privacy

Daarnaast adviseerden we:

Daarnaast adviseerden we om per pagina minimaal driehonderd woorden op te nemen, aangevuld met duidelijke koppen en korte, scanbare alinea’s. Belangrijke onderwerpen zoals ziek melden, het rooster, de vakantieregeling en aanmelden zouden zo hoog mogelijk op de pagina moeten staan om de vindbaarheid en gebruiksvriendelijkheid te vergroten. 

Waar mogelijk stelden we voor om relevante informatie uit de portalen ook op de website zichtbaar te maken, zodat gebruikers niet onnodig hoeven te schakelen tussen omgevingen. Voor losse of terugkerende vragen adviseerden we het gebruik van een FAQ-component, waarmee informatie overzichtelijk en toegankelijk blijft.

Zo werden Voor leerlingen en Voor ouders elk een logisch startpunt, in plaats van een verzamelplek van losse linkjes.

UX design en digitale toegankelijkheid

De website kreeg geen volledig nieuw merk, maar wel een UX-gedreven visuele optimalisatie op basis van het aangeleverde huisstijlhandboek. Daarbij lag de focus vooral op:

Scanbaarheid en leesbaarheid

Om de scanbaarheid en leesbaarheid te verbeteren, zorgden we voor logischer leesvolgordes binnen de componenten. We verkortten de tekstregels door bredere containers te vermijden en creëerden meer ruimte tussen blokken en elementen. Hierdoor werd de content rustiger, overzichtelijker en prettiger te lezen.

Consistentie in knoppen en interacties

We brachten meer consistentie aan in knoppen en interacties door één herkenbare knopstijl te gebruiken en een duidelijke hiërarchie aan te brengen tussen primaire en secundaire acties. Dit zorgt voor meer voorspelbaarheid, betere navigatie en een rustiger geheel voor de gebruiker.

Digitale toegankelijkheid (WCAG)

We verbeterden de toegankelijkheid door te zorgen voor juiste kleurcontrasten en duidelijke focus-indicatoren voor toetsenbordgebruikers. Daarnaast werden logische hover- en active-states toegevoegd, zodat interacties voorspelbaar en herkenbaar zijn. Ook formulieren en de navigatie zijn toegankelijker gemaakt, waardoor de website beter bruikbaar is voor alle gebruikers.

Ook de footer en andere drukke onderdelen zijn opnieuw opgebouwd met meer rust, structuur en focus op wat echt belangrijk is.

Technische rebuild in Craft CMS 4

In plaats van een complexe upgrade van Craft 2 naar 4 kozen we voor een volledige rebuild. De website is volledig opnieuw opgezet in Craft CMS 4, waarbij alle bestaande componenten kritisch zijn beoordeeld en waar mogelijk hergebruikt of verbeterd. De content is gecontroleerd gemigreerd naar de nieuwe omgeving en alle componenten zijn flexibel ingericht, zodat Focus in de toekomst zelf eenvoudig nieuwe pagina’s kan opbouwen. Daarnaast is er bewust ruimte gelaten voor verdere UX- en contentoptimalisaties.

Na oplevering op de acceptatieomgeving heeft Focus feedback kunnen geven op zowel de structuur als het design. Vervolgens is de website geplaatst op een nieuwe, veilige server bij Rootnet en zijn de DNS-instellingen aangepast om de site live te zetten. Redacteuren ontvingen een duidelijke handleiding, en er is een koppeling met Google Analytics ingericht om monitoring en verdere optimalisatie mogelijk te maken.

De oplossing

We ontwikkelden voor Focus Beroepsacademie:

1. Een volledig vernieuwde website in Craft CMS 4
2. Een helder onderscheid én betere opbouw van de pagina’s Voor leerlingen en Voor ouders
3. Een visueel opgeschoond ontwerp met meer rust, ruimte en logische leesstructuur
4. Digitale toegankelijkheid als uitgangspunt voor componenten, kleurgebruik en interactie
5. Een flexibele componentenbibliotheek waarmee Focus zelf pagina’s kan beheren en uitbouwen