Case · Baanvak · I-Stapp
Eén digitaal leersysteem voor leren, begeleiden en ontwikkelen.
Hoe breng je opleidingen, competenties, praktijkopdrachten, begeleiding en voortgang samen in één omgeving?
Voor Baanvak ontwikkelden we I-Stapp: een maatwerk webapplicatie waarin beheerders het leerproces kunnen organiseren, begeleiders de ontwikkeling van deelnemers kunnen volgen en deelnemers zelf inzicht houden in hun leerroute en voortgang.
Het resultaat is één centrale digitale omgeving waarin leren niet alleen wordt aangeboden, maar ook gestructureerd, gevolgd en begeleid.
- Maatwerk webapplicatie
- Leerplatform
- Competentiemanagement
- Progress tracking
- React
- Firebase
02 — De uitdaging
Leren is meer dan alleen lesmateriaal beschikbaar maken.
Een digitaal leerplatform wordt al snel complex wanneer verschillende gebruikers allemaal vanuit hun eigen rol met hetzelfde leerproces werken.
Een beheerder wil opleidingen kunnen opbouwen en beheren. Een begeleider wil kunnen zien hoe deelnemers zich ontwikkelen en waar extra aandacht nodig is. Een deelnemer wil vooral weten: wat moet ik doen, waar sta ik en wat is mijn volgende stap?
Daar komen competenties, vaardigheden, modules, praktijkopdrachten, mijlpalen, beoordelingen en feedback nog bij.
Voor Baanvak lag de uitdaging daarom niet simpelweg in het digitaliseren van lesmateriaal.
De echte uitdaging was om al deze onderdelen samen te brengen in één logisch systeem waarin iedere gebruiker precies de informatie en functionaliteit krijgt die bij zijn of haar rol hoort.
Niet één systeem vol functies, maar één leerproces dat voor iedere gebruiker logisch voelt.
03 — De oplossing
I-Stapp brengt het volledige leerproces samen.
In plaats van iedere gebruiker dezelfde interface te geven, is I-Stapp opgebouwd rondom verschillende rollen.
- Beheerders richten de leeromgeving in.
- Begeleiders volgen en beoordelen de ontwikkeling van deelnemers.
- Deelnemers zien hun toegewezen opleidingen, activiteiten, vaardigheden en voortgang.
De onderliggende informatie blijft met elkaar verbonden, terwijl iedere gebruiker alleen werkt met wat voor zijn of haar rol relevant is.
Dat maakt het platform overzichtelijk voor de gebruiker en tegelijkertijd krachtig genoeg om een uitgebreid leerproces digitaal te ondersteunen.
04 — Eén platform · drie perspectieven
Iedere gebruiker krijgt een omgeving die past bij zijn rol.
Beheerder
De leeromgeving organiseren.
Beheerders vormen het centrale startpunt van het platform. Zij kunnen gebruikers beheren, opleidingen en functies structureren, competentieniveaus vastleggen en leeronderdelen zoals vaardigheden, modules, praktijkopdrachten en mijlpalen organiseren.
Ook kunnen deelnemers aan opleidingen worden gekoppeld en begeleiders aan deelnemers worden toegewezen.
Zo kan de leerstructuur vanuit één centrale omgeving worden opgebouwd en beheerd.
- Gebruikersbeheer
- Opleidingen
- Competenties
- Skills
- Modules
- Praktijkopdrachten
- Mijlpalen
Begeleider
Ontwikkeling volgen en begeleiden.
Begeleiders krijgen inzicht in de deelnemers waarvoor zij verantwoordelijk zijn.
Vanuit hun eigen omgeving kunnen zij de voortgang per opleiding bekijken, vaardigheden en mijlpalen volgen en beoordelingen, notities of feedback toevoegen.
Daardoor ontstaat niet alleen inzicht in wat een deelnemer heeft afgerond, maar ook ruimte voor actieve begeleiding tijdens het leerproces.
- Deelnemers
- Voortgang
- Beoordeling
- Feedback
- Competenties
- Begeleiding
Deelnemer
Weten waar je staat en wat je volgende stap is.
Voor deelnemers draait I-Stapp om overzicht.
Na het inloggen zien zij hun toegewezen opleidingen en de voortgang daarvan. Binnen een opleiding kunnen zij leeronderdelen, vaardigheden, modules, praktijkopdrachten en mijlpalen doorlopen.
De voortgang wordt zichtbaar binnen dezelfde omgeving, waardoor deelnemers steeds kunnen zien wat is afgerond, wat nog openstaat en waar zij zich bevinden binnen hun leerroute.
- Mijn opleidingen
- Leeractiviteiten
- Voortgang
- Skills
- Praktijk
- Mijlpalen
05 — Structuur
Van opleiding naar een concrete leerroute.
Een opleiding of functie vormt de basis. Daarbinnen kunnen competentieniveaus, vaardigheden en concrete leeractiviteiten worden georganiseerd.
Vervolgens kunnen modules, praktijkopdrachten en mijlpalen worden toegevoegd om de ontwikkeling van een deelnemer stap voor stap op te bouwen.
Zo ontstaat een digitale leerroute waarin theorie, praktijk, ontwikkeling en voortgang met elkaar verbonden blijven.
- 01Opleiding of functie
- 02Competentieniveau
- 03Vaardigheden
- 04Modules & leeractiviteiten
- 05Praktijkopdrachten
- 06Mijlpalen
- 07Voortgang & beoordeling
06 — Competentiegericht leren
Niet alleen registreren wat iemand heeft gedaan, maar volgen wat iemand beheerst.
Binnen I-Stapp kunnen vaardigheden en competenties onderdeel worden van de leerroute.
Beheerders kunnen vaardigheden structureren en koppelen aan opleidingen en niveaus. Daardoor kan dezelfde leeromgeving niet alleen worden gebruikt om activiteiten af te ronden, maar ook om ontwikkeling inzichtelijk te maken.
Voor begeleiders betekent dit dat zij gericht kunnen kijken naar de ontwikkeling van een deelnemer.
Voor deelnemers betekent het dat leren minder abstract wordt: de omgeving laat zien welke onderdelen onderdeel zijn van hun ontwikkeling en hoe deze samenhangen met de opleiding die zij volgen.
Van content afvinken naar ontwikkeling inzichtelijk maken.
07 — Theorie + praktijk
Een leerplatform dat verder gaat dan online lessen.
Modules
Digitale leeronderdelen die binnen een opleiding kunnen worden doorlopen.
Praktijkopdrachten
Onderdelen die in de praktijk worden uitgevoerd, met ruimte voor relevante informatie of bewijs binnen het leerproces.
Mijlpalen
Herkenbare momenten binnen de opleiding die de ontwikkeling van een deelnemer markeren.
Daardoor kan de digitale omgeving aansluiten op wat een deelnemer daadwerkelijk tijdens een opleiding of in de praktijk moet uitvoeren. Het platform wordt daarmee niet alleen een plek om informatie te lezen, maar een centrale omgeving rondom het volledige leerproces.
08 — Voortgang
Iedereen kijkt naar dezelfde ontwikkeling, vanuit zijn eigen perspectief.
Deelnemer
Wil weten wat al is afgerond en wat nog moet gebeuren.
Begeleider
Wil zien hoe een deelnemer zich ontwikkelt en waar begeleiding nodig kan zijn.
Beheerder
Heeft overzicht nodig over gebruikers, opleidingen en activiteit binnen het platform.
Daarom is voortgang niet als losse functie toegevoegd, maar verweven in de verschillende dashboards en leerprocessen. Van cursusoverzichten en voortgangsvisualisaties tot vaardigheden en mijlpalen: relevante informatie wordt zichtbaar op de plek waar de gebruiker die nodig heeft.
Dezelfde data. Een ander perspectief voor iedere rol.
09 — Menselijke begeleiding
Digitaliseren zonder de menselijke begeleiding eruit te halen.
Een digitaal leersysteem moet begeleiding ondersteunen, niet vervangen.
Daarom kunnen begeleiders binnen I-Stapp gekoppelde deelnemers volgen, hun ontwikkeling bekijken en feedback, notities en beoordelingen vastleggen.
De technologie zorgt voor structuur en inzicht. De begeleider blijft degene die context geeft, ontwikkeling beoordeelt en de deelnemer verder helpt.
Juist die combinatie maakt een digitaal leerplatform waardevol: informatie wordt centraal georganiseerd, terwijl persoonlijke begeleiding onderdeel blijft van het proces.
10 — Beheerbaar
Een leeromgeving die zelf verder kan worden opgebouwd.
Daarom beschikt I-Stapp over beheerfunctionaliteit waarmee de leerstructuur kan worden onderhouden en uitgebreid.
Zo vormt I-Stapp geen statisch softwareproduct, maar een digitaal fundament waarop de leeromgeving verder kan worden ontwikkeld.
- Opleidingen
- Competenties
- Vaardigheden
- Modules
- Praktijkonderdelen
- Mijlpalen
- Algemene content
11 — Security by design
Verschillende rollen vragen om gecontroleerde toegang.
Een platform met deelnemers, begeleiders, voortgang en beoordelingen vraagt om een zorgvuldige omgang met toegang.
Daarom is I-Stapp opgebouwd met rolgebaseerde toegang. Na het inloggen komt iedere gebruiker terecht in de omgeving en functionaliteit die bij zijn of haar rol hoort.
Naast de reguliere authenticatie is een extra verificatiestap onderdeel van het inlogproces.
Zo combineren we gebruiksgemak met een extra beveiligingslaag voor toegang tot de leeromgeving.
12 — Meertalig
Gebouwd voor gebruik in Nederlands én Engels.
De applicatie is voorbereid op gebruik in meerdere talen en bevat zowel Nederlandse als Engelse interfacevertalingen.
Door meertaligheid als onderdeel van de applicatiestructuur op te nemen, hoeft internationalisering niet achteraf als losse laag aan het product te worden toegevoegd.
Het platform kan daarmee gebruikers in verschillende taalcontexten ondersteunen binnen dezelfde digitale omgeving.
13 — Technologie
Een moderne technische basis voor een maatwerk leerplatform.
Voor de gebruikersinterface kozen we voor React en TypeScript. De applicatie is opgebouwd uit herbruikbare componenten en responsive interfaces voor dashboards, formulieren, tabellen en voortgangsweergaven.
Firebase vormt een belangrijk onderdeel van de backendarchitectuur en ondersteunt onder andere authenticatie, dataopslag, bestanden, server-side functionaliteit en hosting.
Hierdoor beschikt I-Stapp over een technische basis die past bij een interactieve, rolgebaseerde webapplicatie.
Frontend
Backend & cloud
14 — Architectuur
Eén platform. Meerdere rollen. Eén verbonden datamodel.
Wanneer een beheerder bijvoorbeeld een deelnemer aan een opleiding koppelt, wordt die informatie relevant voor meerdere onderdelen van het platform. De deelnemer krijgt de juiste opleiding te zien, de gekoppelde begeleider krijgt inzicht in de deelnemer en de juiste vaardigheden en leeractiviteiten worden onderdeel van de leerroute. Voortgang kan vervolgens binnen dezelfde structuur worden bijgehouden.
Dat is het verschil tussen losse schermen bouwen en een digitaal product ontwerpen: de onderdelen moeten onderling logisch blijven samenwerken.
Interface
Rolgerichte omgevingen
- Beheer
- Begeleiding
- Deelnemer
- React
- TypeScript
Leerstructuur
Opleidingen, competenties en activiteiten
- Opleidingen
- Competentieniveaus
- Vaardigheden
- Modules
- Praktijkopdrachten
- Mijlpalen
Relaties
Deelnemers, begeleiders en toewijzingen
- Gebruikersrollen
- Koppelingen
- Beoordelingen
- Feedback
Platform
Authenticatie, data en hosting
- Firebase
- Cloud Firestore
- Cloud Functions
- Firebase Authentication
- Firebase Storage
- Firebase Hosting
Conceptuele weergave van het verbonden proces
- 01BeheerLeerstructuur inrichten
- 02LeerrouteOpleiding en activiteiten
- 03DeelnemerDoorlopen en afronden
- 04VoortgangInzicht per rol
- 05BegeleidingFeedback en beoordeling
15 — Het resultaat
Van losse leeronderdelen naar één samenhangende digitale leeromgeving.
Beheerders kunnen de structuur van opleidingen en leeractiviteiten organiseren. Deelnemers krijgen een persoonlijke omgeving waarin zij hun opleidingen en ontwikkeling kunnen volgen. Begeleiders krijgen inzicht in de deelnemers waarvoor zij verantwoordelijk zijn en kunnen actief onderdeel blijven van het ontwikkelproces.
Daarmee brengt het platform drie perspectieven samen die in de praktijk sterk met elkaar verbonden zijn: organiseren, leren en begeleiden.
01
Centraal georganiseerd
Opleidingen, competenties, vaardigheden en leeractiviteiten binnen één omgeving.
02
Rolgericht
Een eigen ervaring voor beheerder, begeleider en deelnemer.
03
Inzicht in ontwikkeling
Voortgang, vaardigheden en mijlpalen zichtbaar binnen het leerproces.
04
Praktijkgericht
Ruimte voor modules, praktijkopdrachten en andere leeractiviteiten.
05
Begeleiding geïntegreerd
Begeleiders kunnen ontwikkeling volgen en feedback en beoordelingen vastleggen.
06
Zelf verder te beheren
De leeromgeving kan vanuit de beheeromgeving worden onderhouden en uitgebreid.
16 — Meer dan software bouwen
Maatwerk begint niet bij code, maar bij begrijpen hoe mensen werken.
De technische uitdaging van I-Stapp zat niet alleen in het bouwen van dashboards, databases of functionaliteiten.
De belangrijkste vraag was hoe drie verschillende gebruikersgroepen binnen hetzelfde systeem op een logische manier met dezelfde leerstructuur konden werken.
Dat vraagt om meer dan development. Het vraagt om het begrijpen van rollen, processen, informatie, verantwoordelijkheden en de momenten waarop gebruikers elkaar binnen het systeem raken.
Pas daarna kun je technologie zo organiseren dat die complexiteit voor de gebruiker juist eenvoudiger wordt.
Dat is ook hoe we bij Yousource naar maatwerk webapplicaties kijken. Niet beginnen bij wat technisch mogelijk is, maar bij hoe de organisatie werkt en wat gebruikers nodig hebben — van de interface tot de backend en integraties.
Maatwerk webapplicatie
Loop je tegen de grenzen van standaardsoftware aan?
Sommige processen passen simpelweg niet goed in bestaande software.
Wanneer gebruikers, rollen, data en workflows steeds specifieker worden, kan maatwerk juist zorgen voor minder complexiteit.
Vertel ons hoe jouw organisatie nu werkt en waar je tegenaan loopt. We denken met je mee over hoe dat proces digitaal slimmer kan worden ingericht.
Geen technisch verhaal nodig. Begin bij het proces of probleem dat je wilt oplossen.
Meer werk
Andere projecten
Website Redesign · UX/UI · WordPress · Elementor · Crocoblock
Eco Age
Yousource ontwierp de internationale website van Eco Age volledig opnieuw en bouwde het editorial platform in WordPress met Elementor en Crocoblock.
WordPress · Elementor · Crocoblock
Case bekijken
UX/UI Design · Figma · WordPress · Elementor · Responsive Development
MIRA Quality
Yousource ontwierp de volledige website van MIRA Quality in Figma en vertaalde dat ontwerp naar een gebruiksvriendelijke WordPress-website met Elementor.
Figma · WordPress · Elementor
Case bekijken
Headless migratie · WordPress · Elementor · Crocoblock · Technisch beheer
TextileGenesis
Yousource migreerde de corporate website van TextileGenesis van een headless opzet naar een volledig beheersbare WordPress-omgeving met Elementor en Crocoblock.
WordPress · Elementor · Crocoblock
Case bekijken