Edumundo App
Het gamified leerplatform voor mbo-studenten, met challenges, medailles, ranglijsten en groepsopdrachten.
Mijn rol
Ik leidde het volledige UI/UX-traject voor de doorontwikkeling van twee producten, BOOM Burgerschap en AstraZeneca, en was eindverantwoordelijk voor het ontwerp. Ik bepaalde de look and feel, ontwierp de app-schil met eigen kleurensets en 3d-illustraties per versie, en werkte de schermen uit in Figma binnen het design system. Daarnaast maakte ik zelfstandig, in overleg met AstraZeneca, het marketingmateriaal voor hun versie van de app.
Team & samenwerking
Een graphic designer maakte, onder mijn leiding, de illustraties binnen de app die bij de theorie-inhoud passen. De richting, look and feel en de overige visuele keuzes lagen bij mij.
De app-schil, kleurensets en 3d-illustraties ontwierp ik zelf; de theorie-illustraties in de app werden onder mijn leiding gemaakt.
Vanwege concurrentiegevoelige informatie zijn niet alle schermafbeeldingen en ontwerpdocumenten van dit project openbaar gedeeld.
Context
De Edumundo App bestaat al langer als engagement-platform: studenten leren via challenges, verdienen medailles en zien hun score op een ranglijst. In 2025 was het tijd voor een flinke doorontwikkeling.
Het begon bij één klant, het mbo-onderwijs samen met uitgeverij BOOM. Tijdens het traject kwam AstraZeneca erbij, een heel andere doelgroep in de farmacie. Beide draaien op dezelfde basis, met voor elk een eigen visuele identiteit en kleurschema.
Van wensensessie tot overdracht
Wensensessie
Gestart met een gezamenlijke sessie met de product owner en de content-/projectmanager. We liepen de feature-wishlist door: uitgebreid medaillesysteem met animaties en overlays, verbeterd voortgangsoverzicht, privégroepsranglijsten, nieuwe challengetypen (foto, video, voting, scavenger hunt) en uitbreidingen voor de docentrol (punten toekennen, challenges beheren). Per feature legden we vast wat er die maand moest landen en wat later kon.
Figma-design
Elk scherm uitgewerkt in Figma binnen het bestaande design system (gebaseerd op Material Design 3, met custom kleurthema's per product). Voor Burgerschap: warme oranje/amber tinten. Voor AstraZeneca: donkerblauw/navy. Ontworpen schermen: login, dashboard, thema- en unit-overzicht, story-schermen, theorie met hotspot-feedback, polls, challenges (quiz, open vraag, media), medailledetails en ranglijst met groepsfunctie.
Feedbackronde & overdracht
Na de eerste designronde volgde een gestructureerde feedbacksessie met development. Punten rond leesbaarheid van titels, gradient-contrast, navigatiebugs en kaartafmetingen werden gedocumenteerd en verwerkt. Daarna zijn de designs overgedragen voor implementatie.
Belangrijke beslissing
De belangrijkste keuze was om één gedeelde basis te ontwerpen die meerdere klanten kan dragen, elk met een eigen schil, in plaats van per klant een aparte app. Voor BOOM Burgerschap en AstraZeneca maakte ik aparte kleurensets met bijpassende 3d-illustraties per versie, zodat beide een eigen stijl houden binnen dezelfde basis.
Schermen
Een kleine selectie uit de tientallen ontworpen schermen. Vanwege concurrentiegevoelige informatie tonen we hier slechts drie publieke voorbeelden.
Eén systeem, twee thema's
De app is gebouwd op een intern design system dat ik opzette in Figma, gebaseerd op Material Design 3. Het systeem bevat een volledige componentenbibliotheek (buttons, cards, navigation bars, chips, dialogs, bottom sheets, badges, etc.) en twee kleurthema's die per product inwisselbaar zijn. Zo bedienen Burgerschap en AstraZeneca dezelfde codebase met een eigen merkbeleving.
Producten
BOOM Burgerschap
Leerapp voor burgerschap in het mbo, uitgegeven in samenwerking met BOOM. Studenten volgen thema's en units, doen challenges en verdienen punten op een ranglijst. Kleurpalet: warm oranje op beige/crème achtergrond.
AstraZeneca
Leertraject voor medewerkers in de medische sector. Schermen omvatten theorie met hotspot-feedback, open vragen, een medisch dossier pop-up en een uitgebreid medaillesysteem. Kleurpalet: donkerblauw/navy met oranje accenten.
Resultaat
BOOM Burgerschap en AstraZeneca bediend vanuit één codebase met eigen merkbeleving
Login, dashboard, thema's, theorie, story, polls, challenges, medailles en ranglijst ontworpen. Vanwege concurrentiegevoeligheid wordt hier slechts een kleine selectie publiek getoond.
Material Design 3-basis met inwisselbare kleurthema's per product
De designs werden volledig afgerond en overgedragen aan development. Feedbackpunten uit de reviewronde (leesbaarheid van themakaarten, gradientcontrast, navigatiegedrag, kaartafmetingen) zijn verwerkt vóór overdracht. Het medaillesysteem, de groepsranglijst en de nieuwe challengetypen zijn als eerste opgeleverd.
Reflectie
De opdracht was om een nieuwe app te ontwerpen, gebaseerd op een oude. Tijdens het designproces kwam er een wending: eerst zou alleen het mbo-onderwijs (samen met uitgeverij BOOM) de app gebruiken, daarna kwam AstraZeneca erbij, een heel andere doelgroep in de farmacie. Daardoor moest de basis van de app op beide passen, met voor elk een eigen schil. Omdat ik de look and feel, kleuren en 3d-illustraties grotendeels zelf maakte, bleef dat consistent. Ik werkte hier ook voor het eerst serieus met het design system van Google (Material Design 3) en met WCAG-toegankelijkheid.