Maarten Kling
Maarten Kling
8 december 2020

Hoe belangrijk is een website voor een ROC

Op zoek naar de volgende stap in je leven, bezoek je zomaar een website in het landschap van ROC's. Maar achter een dergelijke website zit een enorme hoeveelheid denk-, design- en UX-werk.

Enorme concurrentie in een wereld vol studenten

Hoe maak je nu net deze website beter dan de concurrentie. “Concurrentie?” Ik hoor het je vragen. Heeft een ROC concurrentie? Nou wel degelijk, de competitie is enorm! Er zijn 42 ROCs (regionale opleidingscentra). Binnen het zoekgebied van aanstaande scholieren en ouders bestaan vaak meerdere scholen die dezelfde opleidingen aanbieden. Echter, voor het voortbestaan van een ROC is het van essentieel belang om voldoende studenten aan te trekken en ook een hoge score te halen op de uitstraling om dit ook in de jaren daarop te garanderen.

In 2017 is ROC Rivor, zeker niet het grootste ROC van Nederland, naar de combinatie Eight Media en Four Digits toe gekomen met een interessante vraag: Kunnen jullie onze bestaande huisstijl tweaken, zodat deze online vóór ons gaat werken in plaats van tegen ons? En kunnen jullie dit in een fantastische website omzetten, waarin wij alle inhoud zelf kunnen wijzigen, zonder af te wijken van de design- en UX-beslissingen?

Kies je opleiding

Om direct een voorbeeld aan te halen: er zijn diverse webmasters die allemaal wat van hun opleiding vinden en hierover willen schrijven. Maar alle opleidingen moeten op eenzelfde manier worden gepresenteerd om het makkelijker te maken voor studiezoekers om opleidingen te kunnen vergelijken. Er is vrijheid nodig in tekst en beeld, maar in presentatie en volgorde op een webpagina moeten er juist restricties zijn.

Elke dag werk ik met plezier aan de website als visitekaartje van de opleiding. Het ontwerp en de realisatie hebben voor veel meer websitebezoekers gezorgd.
– Marlène van Overbeek - Medewerker Online Marketing en Communicatie - ROC Rivor

De weg naar het nieuwe design

De eerste stap in het proces was een analyse van de huidige huisstijl op vormgeving, om te kijken of het aansloot bij de doelgroepen en op de herkenbaarheid van het merk.

Het logo was heel karakteristiek, sprong eruit tussen die van andere ROC’s en was sterk gegrond in de ligging van de opleidingsvestigingen tussen de rivieren. Samen met de unieke kleurencombinatie van blauw en groen had je het begin van een herkenbaar merk. Maar de huisstijl was niet klaar voor de moderne wereld. Het logo was in kleine vorm slecht leesbaar en door zijn vorm lastig toe te passen. In zowel drukwerk, online en in de gebouwen werden meer dan 10 verschillende lettertypes gebruikt en de fotografie was voornamelijk stockfotografie. Voor een kleinschalig ROC moest dit herkenbaarder, echter en warmer worden om zich te onderscheiden van de grote ROC’s.

ROC Rivor logo 005
ROC Rivor logo 007

Tijdens interviews met studenten vroegen we wat de school voor hen betekende. Hoe ervaarden zij de uitstraling van het logo en de website? Mede naar aanleiding van deze gesprekken hebben we de basis gelegd voor een vernieuwde, moderne huisstijl. Een huisstijl geïnspireerd door de flow van de rivier.

De kracht van Eight is het onderzoek en dat wat we ontdekken omvormen naar gebruiksvriendelijke eindproducten.
– Adam Chapman - Producer - Eight Media

ROC Rivor logo 006

Samen met illustrator Sjoerd Verbeek hebben we het logo hertekend. Samen zijn we op zoek gegaan naar de nieuwe flow van Rivor. In verschillende stappen zijn we tot het uiteindelijke resultaat gekomen. Door de schetsen te gebruiken in bijvoorbeeld website of flyers werd gecontroleerd of deze aansloot bij het gewenste eindresultaat.

ROC Rivor logo 008
ROC Rivor logo 009

De schets is helemaal uitgewerkt en getest in diverse soorten media en met verschillende kleuren. Denk aan briefpapier, logo op het gebouw, natuurlijk op de website maar ook open-dagen posters. Dit is een niet te vergeten stap in het proces om te ervaren hoe het logo werkt.
Het is uiteindelijk een uniek logo gebleven, maar nu is het leesbaar op groot én klein formaat en is het veel makkelijker in gebruik.

De opleidingen binnen ROC’s worden opgedeeld in verschillende branches. We hebben iedere branche een eigen kleurencombinatie gegeven en deze toegepast op alle opleidingen die binnen die branche vallen. Dit passen we door de hele website toe: in overzichten en detailpagina’s. Hierdoor is er herkenbaarheid en een mooie, duidelijke structuur gecreëerd.

ROC Rivor logo 010
ROC Rivor logo 011

Daarnaast hebben we de kleuren, fotografie en vormentaal een update gegeven. Een belangrijk onderdeel van het huisstijl gevoel. Beeld maakt de opleidingen herkenbaar en krachtig. Ook de kleuren die bij de opleidingen horen zorgen voor herkenning en worden in alle uitingen op dezelfde wijze gebruikt.

ROC Rivor logo 011

Verschillende kleuren voor verschillende richtingen. Toegepast op opleidingen en gebruikt door de hele website, in overzichten en detailpagina’s. Hierdoor is er herkenbaarheid en over het geheel een mooie structuur gecreëerd.

ROC Rivor logo 011

Zo staat er nu een enorm krachtige huisstijl. Niet alleen een logo maar ook een toepassing voor opleidingen met de kleuren en uitingen. Natuurlijk is ook gekeken naar tekstgebruik. Hoe alle informatie van een opleiding ingepast kan worden in een pagina zonder ruis te creëren, en daarbij wel een stoere en frisse indruk achterlaten.

Samenwerken met Eight Media

Wat dit project leuk maakt is de absolute scheiding van front-end en back-end werkzaamheden. Met onze grote vrienden van Eight Media zijn we dit project ingestapt. Eight en Four Digits kennen elkaar al jaren en vullen elkaar aan in design en implementatie-werkzaamheden. Qua omvang vergelijkbaar en bij een borrel is het de vraag wie als laatste de deur dicht trekt.

Op het gebied van samenwerking ligt de kracht in het uitvoeren van rollen maar gezamenlijk optrekken richting één klant. Doordat er geen interne concurrentiestrijd is omdat Eight geen developers heeft en Four Digits geen designers moeten wij samen juist de samenwerking opzoeken.

Een project moet vanaf het begin duidelijk en goed georganiseerd zijn. Wanneer je bij de start van het project de tijd neemt om afspraken vast te leggen, zorg je voor een efficiëntere ontwikkeling tijdens het project.

Samen kunnen wij betere producten realiseren dan alles in-house willen doen. Zoek de beste partners voor bij de klus en streef samen naar het ultieme eindresultaat.
– Maarten Kling - Four Digits

De eerste stap die wij zetten is het doornemen van de opdracht met het gehele team. Dit zorgt ervoor dat het gehele team de opdracht op dezelfde manier interpreteert. Nadat het team alle informatie heeft kunnen analyseren wordt er een kick-off gehouden. Tijdens de kick-off meeting stelt het team projectinhoudelijke vragen. Onderwerpen die aan bod kunnen komen zijn bijvoorbeeld het ontwerp of de API’s waarmee gewerkt wordt of hoe de invulling van de use-cases echt gaan werken. Ook maken we afspraken rondom het proces en de oplevering.

Onderling maken Four Digits en Eight de rolverdeling en deze wordt meermaals geëvalueerd om het proces strak te houden maar ook samen alle kansen te benutten die er zijn in een project.

ROC Rivor logo 011

Hoe brengt dit ROC Rivor dichter bij de bezoeker

Studenten starten hun onderzoek naar een opleiding doorgaans via hun mobiel. De daadwerkelijk beslissing aan het einde wordt vaak samen met hun ouders op de laptop genomen Dit betekent dat de website responsive moet zijn zodat deze op kleine schermen even goed werkt als op grotere. De stijl moet herkenbaar zijn zodat bij de switch van mobiel naar laptop er genoeg visuele aanknopingspunten zijn om zonder te lezen te weten dat je op de juiste plek bent. In de fotografie bij opleidingen gebruiken we jonge mensen in de werksituatie. Veel studenten op ROC’s willen het liefst werken in plaats van dat ze in de schoolbanken zitten, maar ze moeten een opleiding doen om het werk te mogen doen wat ze willen. Het taalniveau van de teksten hebben we gezet op B1. Zo is de informatie toegankelijk voor iedereen die moet meebeslissen over de opleiding.

Belangrijk is de uitstraling, hoe spreek je bezoekers aan. Maar ook het gebruik van afbeeldingen, video en weinig teksten is relevant. Studenten zoeken via telefoon naar verschillende ROC’s en de daadwerkelijk beslissing wordt vaak in combinatie met ouders op de desktop genomen. Dus een goed werkende responsive website is een must.

Technisch moeilijk en toch lekker simpel

Waarom moeilijk als het ook super eenvoudig kan. Achter de website zit Wagtail CMS waarin alle verschillende pagina’s op te bouwen zijn. De verschillende webmasters hebben rechten toegekend gekregen voor secties in de website of toegang tot alles. Content is opgebouwd uit bouwblokken. Deze blokken komen uit de Stijlgids die niet alleen inzichtelijk is voor ons als developers maar ook zeer begrijpbaar voor de klant.

Stijlgids

Door deze splitsing van elementen is het mogelijk de kleinste brokjes visueel te controleren. Namelijk elementen zonder dat deze gebruikt zijn in pagina’s. De werking controleren, het effect meten en meteen documenteren. Opleidingspagina’s hebben een vaste opbouw zodat deze uniform blijven qua kleur en tekstindeling.

Ik heb de kracht en eenvoud van Wagtail CMS ontdekt bij de ontwikkeling van ROC Rivor en ben daarna het core team ingestapt.
– Coen van der Kamp - Developer - Four Digits

Het Wagtail CMS behoeft geen cursus, de contentbeheerders kunnen immers geen fouten maken. Er is geen html knop! Maar even een extra call to action plaatsen, geen probleem. Alles is zo ingericht dat het vrijheid biedt waar het kan, zoals bij normale contentpagina’s en restricties waar je uniformiteit wil zoals bij opleidingspagina’s.

Ook dit bereiken voor je ROC?

In het schooljaar 2019-2020 zijn er 501.904 MBO-studenten. In die vijver moet je vissen, met het juiste aanbod en een uitstraling die past bij de doelgroep. Dacht je echt dat de student nog naar een school wil die op haar website eindeloze teksten over leerwegen en uitgravingen over het bestuur van de school presenteert? Nee, aansprekende video’s van medestudenten, wat je gaat doen op de opleiding en vooral, hoe ziet je werk er later uit! Dát wil je zien!

In de gedachte van deze student kruipen is niet anders dan in de gedachte van elke andere mogelijke bezoeker stappen van de website waarmee je bezig bent of gaat zijn. Neem een stap terug en praat met de ervaringsdeskundigen van Eight Media en Four Digits. Wij kunnen je helpen bij het opzetten van persona’s op basis van je doelgroepen. Zo maken we een visueel meesterwerk, dat zo makkelijk te beheren is dat een cursus overbodig is!

De kans dat je dit leest als niet beslisser op een ROC is natuurlijk groot, er zijn er immers maar 42. Maar is de vraag van een ROC in essentie echt anders dan die van de organisatie waar jij werkzaam bent? Gaat het er niet altijd om het juiste verhaal te vertellen aan de juiste doelgroep? Als dan de vormgeving en de toon daarbij aansluiten maak je contact, en zet je aan tot actie. Volgens mij zijn de kansen eindeloos, je moet ze alleen durven grijpen en in staat zijn om deze om te zetten van teksten en ideeën naar oplossingen.



Wil je ook een website met resultaat maken?

Neem contact op
We love code