TechTown

Een platform dat scholen, bedrijven en leerlingen bij elkaar brengt moet drie dingen tegelijk doen. Docenten moeten snel relevante activiteiten vinden voor hun klas. Leerlingen moeten enthousiast worden voor techniek. Bedrijven en partners moeten zich kunnen profileren als betrokken partij bij het onderwijs.

De inhoudelijke breedte was groot, van buitenschoolse activiteiten tot stages tot ondersteuning voor docenten. Daarbij speelde een concrete logistieke vraag mee: veel activiteiten vinden op locatie plaats bij een bedrijf of partner, dus afstand tot de school is een belangrijke factor voor een docent die een bezoek plant.

STO Rotterdam wilde een platform dat deze complexiteit overzichtelijk maakt zonder dat het voelt als een bureaucratisch systeem. Aantrekkelijk voor jongeren, toegankelijk voor docenten en werkend als zichtbaarheidsplatform voor partners.

Wij startten het project met wireframes. Voordat er ook maar een pixel werd ontworpen, legden we de basisstructuur van de website vast en toetsten die met STO Rotterdam. Die aanpak gaf ons vroeg zekerheid dat we het juiste concept te pakken hadden en voorkwam dat we in een later stadium grote wijzigingen moesten doorvoeren in uitgewerkte ontwerpen.

Na akkoord op de wireframes ontwierpen en bouwden we de volledige website. Craft CMS als basis voor contentbeheer, Tailwind CSS voor de frontend styling en Barba.js voor vloeiende paginatransities die de website een moderne en snelle uitstraling geven. De content-structuur is zo ingericht dat STO Rotterdam zelfstandig activiteiten, partners, nieuwsberichten en agenda-items kan toevoegen en beheren.

Het platform bestaat uit twee hoofdonderdelen. Het leerlingendeel presenteert activiteiten op een manier die aansluit bij de leefwereld van jongeren, met focus op thema's als klimaat, duurzaamheid en circulaire economie. Het docentendeel richt zich op de praktische kant: welke activiteiten zijn geschikt voor welke klas en hoe krijg je die georganiseerd.

Op de pagina's Aanbod voor leerlingen en Aanbod voor docenten hebben wij een postcode-functionaliteit ingebouwd die specifiek aansluit op hoe scholen activiteiten zoeken. Een docent vult de postcode van de school in, waarna de buitenschoolse activiteiten worden gesorteerd op afstand tot die school. Elke activiteit toont daarbij de hemelsbrede afstand in kilometers.

Activiteiten die op locatie bij de school plaatsvinden, waarbij de activiteitenleverancier naar de school toe komt, krijgen automatisch 0 km toegewezen. Die komen altijd bovenaan, ongeacht waar het bedrijf zelf gevestigd is. Dat is logisch vanuit het perspectief van een docent: als er niet gereisd hoeft te worden, is afstand geen factor meer.

Deze functionaliteit klinkt eenvoudig maar vraagt om een doordachte implementatie. De geocodering van postcodes, de afstandsberekening, de uitzonderingslogica voor op-locatie activiteiten en de performance bij grote aantallen resultaten, allemaal zaken die naadloos moeten werken zonder dat de gebruiker er iets van merkt.

Craft CMS als basis voor het volledige contentbeheer. Tailwind CSS voor de frontend styling, volledig conform de huisstijl van TechTown. Barba.js voor vloeiende paginatransities en een moderne gebruikerservaring. Postcode-gebaseerde afstandsberekening met hemelsbrede sortering. Uitzonderingslogica voor op-locatie activiteiten die standaard op 0 km komen. Uitgebreide filterfunctionaliteit naast de afstandssortering. Responsive design voor desktop, tablet en mobiel.

Sinds januari 2026 is het platform live en vult TechTown het zelfstandig met content. Inmiddels zijn er 33 scholen en 17 bedrijven en partners actief op het platform. Docenten kunnen via de postcode-functionaliteit direct relevante activiteiten vinden in hun regio. Leerlingen krijgen een aantrekkelijk beeld van wat techniek inhoudt. Partners krijgen zichtbaarheid bij scholen die actief op zoek zijn naar buitenschoolse activiteiten.

Het platform is opgezet om mee te groeien. Nieuwe functionaliteiten zoals een leskaartselector staan al in de planning en kunnen op de bestaande basis worden uitgebreid zonder dat de structuur van de website moet worden omgegooid.

Beginnen met wireframes is vaak sneller dan het lijkt. De tijd die je investeert in het valideren van de structuur voordat je gaat ontwerpen verdient zich meerdere keren terug in het vervolgtraject. Geen verrassingen in een laat stadium, geen ontwerpwijzigingen die al in code zijn vertaald en geen ingewikkelde discussies achteraf over wat nu eigenlijk de bedoeling was.

Daarnaast leerde dit project ons opnieuw dat de meest waardevolle functionaliteit vaak de minst zichtbare is. De postcode-sortering is geen feature die marketing-waarde heeft, maar voor een docent die een excursie plant is het het verschil tussen wel en niet gebruiken van het platform.