Studio Theo
Back

Digilingo AI leerplatform

Tijdlijn
Nov 2025 – heden
Rol
UX/UI Designer
Tools
Figma · Figma Make · Claude Code
Type
Freelance project
Digilingo AI leerplatform — screen 1
Digilingo AI leerplatform — screen 2

Context

Digilingo is een edtech startup die tech onderwijs ontwikkelt voor het PO, VO en MBO.

Het platform helpt leerlingen digitale vaardigheden op te bouwen en geeft docenten inzicht in voortgang, leeractiviteit en knelpunten.

Het product groeide door, maar miste een duidelijke richting voor nieuwe functionaliteiten. Sommige onderdelen waren al ontwikkeld, andere moesten volledig opnieuw worden ontworpen. De uitdaging lag niet in losse interfaces, maar in het verbinden van bestaande en nieuwe onderdelen tot één consistente leeromgeving.

Drie gebruikersbehoeften kwamen samen: leerlingen moesten zelfstandig en prettig kunnen leren, docenten moesten grip houden op voortgang en problemen, en AI moest ondersteunen zonder de controle van de docent over te nemen. Als enige designer werkte ik aan zowel productrichting als uitwerking — nieuwe schermen, bestaande flows, AI interacties en werkende prototypes met Claude Code.

Probleem

Hoe ontwerp je een AI leerplatform dat leerlingen persoonlijker begeleidt en docenten sneller inzicht geeft in wat er in de klas gebeurt?

De bestaande richting sloot niet meer goed aan op de nieuwe doelen van Digilingo. De navigatie was op sommige plekken onduidelijk, leerlingen begrepen niet altijd waar ze heen moesten en de interface voelde te droog voor een platform dat leren persoonlijker wil maken.

Tegelijkertijd moest het platform twee verschillende gebruikers goed bedienen. Leerlingen hadden behoefte aan overzicht, motivatie en directe hulp tijdens het leren. Docenten hadden juist behoefte aan grip: wie is actief, wie loopt vast en waar moet ik mijn aandacht op richten?

Prototype

Loginpagina 1

Oud

Loginpagina 2

Nieuw

Loginpagina

Probleem

De loginpagina vormt de eerste kennismaking met Digilingo. De oude richting voelde te statisch en liet te weinig van de identiteit van het platform zien. Ook was het onderscheid tussen leerling en docent niet duidelijk genoeg.

Oplossing

De nieuwe login maakt de identiteit van Digilingo direct zichtbaarder. Het logo krijgt meer aandacht, Pingu is aanwezig als herkenbaar karakter en de rechterzijde toont een productpreview. Daardoor laat de pagina niet alleen zien waar je kunt inloggen, maar ook wat het platform doet.

Een belangrijk onderdeel is de switch tussen leerling en docent. Die maakt direct duidelijk dat Digilingo twee verschillende gebruikers bedient, elk met een eigen ingang en context. Zo wordt de login functioneel duidelijker, zonder extra stappen toe te voegen.

De productpreview aan de rechterkant werkt als ruimte voor communicatie. Nieuwe functies, updates en voorbeelden uit het platform kunnen hier zichtbaar worden gemaakt. Daardoor blijft de loginpagina bruikbaar als toegangspunt én als plek om productwaarde te tonen.

Leerlingdashboard

Leerlingdashboard

Probleem

Het leerlingdashboard is vanaf nul ontworpen als persoonlijke leeromgeving. De uitdaging was om modules niet als een droge lijst te presenteren, maar als een omgeving waarin leerlingen snel begrijpen waar ze zijn, wat hun voortgang is en hoe ze verder kunnen.

Oplossing

Het dashboard opent met een persoonlijke begroeting, voortgangsstatistieken en een duidelijke plek voor Pingu. Modules worden getoond als kaarten met status, voortgang en directe acties. Leerlingen kunnen verdergaan waar ze gebleven zijn of alle lessen binnen een module bekijken.

Gamification elementen zoals XP, level en leerreeks geven extra motivatie, zonder de leerflow zwaarder te maken. Het resultaat is een dashboard dat leerlingen sneller naar de juiste les brengt en tegelijk persoonlijker aanvoelt.

Lessenoverzicht

De lesflow hoort bij het leerlingdashboard. Vanuit een module moet een leerling makkelijk kunnen zien welke lessen openstaan, welke les bezig is en wat al is afgerond.

Daarom toont het lessenoverzicht elke les als een duidelijke rij met titel, korte beschrijving, onderwerp en status. Labels zoals "Bezig", "Te doen", "Voltooid" en "Verlopen" maken direct zichtbaar waar de leerling staat.

Deze structuur maakt de route van dashboard naar module naar les logisch. De leerling hoeft minder te zoeken en begrijpt sneller wat de volgende stap is.

Pingu chatinterface

Pingu chatinterface

Probleem

Pingu maakt de leerervaring persoonlijker en toegankelijker. Binnen een digitale leeromgeving kan AI snel afstandelijk of generiek aanvoelen. Het risico is dan dat leerlingen de chat zien als een losse chatbot, in plaats van als een leerhulp die echt onderdeel is van de les.

Oplossing

Daarom is Pingu ontworpen als herkenbaar karakter in plaats van een standaard chatvenster. De chat staat vast aan de rechterkant van de lespagina en blijft beschikbaar tijdens het leren. Leerlingen kunnen hulp vragen zonder hun focus op de les kwijt te raken.

De AI is bewust ontworpen als begeleider. Pingu geeft hints, stelt tussenvragen en helpt leerlingen verder denken, maar geeft niet direct het antwoord. Zo blijft de leerling actief betrokken bij de inhoud. De chatgeschiedenis blijft zichtbaar, waardoor de context van het gesprek behouden blijft tijdens de les.

Voor de loading state is gekozen voor een vriendelijke animatie. Dat maakt het wachten prettiger en geeft de interface meer karakter.

Docentendashboard

Docentendashboard

Het docentendashboard is ontworpen zodat docenten in één oogopslag kunnen zien wat er in de klas gebeurt. Een dashboard met te veel losse data helpt niet tijdens een les. De informatie moest snel leesbaar zijn en direct duidelijk maken waar aandacht nodig is.

Het dashboard is opgebouwd rond drie lagen: voortgang, inzichten en signalen. Bovenaan staan kernstatistieken zoals actieve leerlingen, voltooiingspercentage, gemiddelde score en leerlingen die extra aandacht nodig hebben. Deze KPI's geven snel een algemeen beeld van de klas en tonen hoe prestaties zich ontwikkelen.

Per klas kan de docent zien welke leerlingen actief zijn, hoe ver zij zijn binnen een module en welke status zij hebben. Voor de status is gekozen voor drie niveaus: rood voor directe hulp, geel voor aandacht en groen voor geen actie nodig. Door het aantal statussen laag te houden, blijft de interpretatie snel en duidelijk.

Aan de rechterkant staat de verdieping. Daar ziet de docent een signaallijst, een AI samenvatting van chatgesprekken en een overzicht van veelgemaakte fouten. Zo ziet de docent niet alleen wie aandacht nodig heeft, maar ook waarom.

Het dashboard helpt docenten sneller prioriteiten stellen. In plaats van losse gegevens te verzamelen, krijgen ze direct zicht op patronen in de klas. De combinatie van voortgang, AI inzichten en signalen maakt het makkelijker om uitleg aan te passen en gerichter in te grijpen.

Inzendingen bekijken 1
Inzendingen bekijken 2

Inzendingen bekijken

Docenten moeten snel kunnen controleren wie opdrachten heeft ingeleverd en hoe leerlingen hebben gescoord. Zonder duidelijke structuur kost dat veel tijd, vooral wanneer meerdere klassen en modules tegelijk lopen.

De inzendingen zijn vormgegeven als een overzichtelijke tabel met leerling, module, antwoorden, score en inlevertijd. Filters op module, klas en status maken het mogelijk om snel te focussen op de juiste groep. De correctheid van multiple choice antwoorden is direct zichtbaar, waardoor de docent niet elke inzending apart hoeft te openen.

Bij het openen van een leerling verschijnt een detailweergave met voortgang, gemiddelde score, AI chat samenvatting en recente problemen. Daardoor krijgt de docent meer context achter een score.

Deze flow maakt individuele begeleiding concreter. Prestaties, chatgedrag en problemen komen samen op één plek, waardoor docenten sneller begrijpen wat een leerling nodig heeft.

Impact

Niet alleen een prototype. Een werkend platform.

01

Live platform

Het platform is live en in gebruik.

02

Pilot op school

Er loopt een pilot op een middelbare school.

03

Doorlopende ontwikkeling

Het product wordt verder ontwikkeld op basis van nieuwe inzichten.

Terugblik

Als enige designer schakelen tussen UX, UI en productdenken.

Als enige designer op dit project was het belangrijk om snel te schakelen tussen UX, UI, productdenken en technische haalbaarheid. Het project vroeg om meer dan losse schermen ontwerpen. Elke keuze moest bijdragen aan een leeromgeving die logisch werkt voor leerlingen en bruikbaar blijft voor docenten.

De belangrijkste les zit in de rol van AI binnen onderwijs. AI wordt pas waardevol wanneer het op het juiste moment helpt, in de juiste context en zonder het leerproces over te nemen. Door Pingu te ontwerpen als begeleider en niet als antwoordmachine, werd AI onderdeel van de leerervaring zelf.

Dit project laat zien hoe snel productdesign binnen een startup kan bewegen. Door ontwerpen direct te vertalen naar prototypes en te blijven itereren op schermen, flows en interacties, ontstond een platform dat klaar is voor gebruik, feedback en verdere groei.

Meer werk