04 · Serious Game · Rebranding, Design System & Worldbuilding

WPC · Wicked Problem Challenge

Een simulatie over onmogelijke keuzes, waarin elke keuze een tekstveld was. Ik ontwierp het spel opnieuw: nieuw merk, nieuw design system, een wereld om in te stappen, en een werkdag die uitloopt omdat jouw beslissingen tijd hebben gekost.

De stelling

Een wicked problem laat zich niet invullen.

De eerste versie stelde goede vragen en gaf spelers vervolgens een leeg tekstvlak met een ondergrens van vijftig tekens. Zo meet je wie het snelst typt, niet wie de afweging voelt. Een keuze wordt pas echt als hij iets kost, en dat kostende deel hoort in de interface te zitten in plaats van in de opdrachttekst eronder.

Daarom ging het aantal vrije invoervelden van 55 naar nul. Bij een meekijksessie bleek nul te ver doorgeschoten: wie alleen kiest, klikt zonder te formuleren. Ik bracht er twaalf terug, onder twee regels. Een veld verschijnt nooit als startpunt maar altijd na de keuze, en het heeft een bovengrens in plaats van een ondergrens. Waar de eigen woorden al hardop aan tafel vallen, komt geen tekstveld.

Rol
Head of Design
Jaar
2025–2026
Opdrachtgever
AstraZeneca (via Edumundo)
Tools
Figma · Lovable · Claude · FigJam
Rol & team

Mijn rol

In de eerste fase leidde ik het ontwerp en stuurde ik een junior designer aan bij de vertaalslag van spellogica naar schermen. Na de eerste speelsessies ben ik aangesteld om het product volledig opnieuw te ontwerpen. Dat redesign deed ik van A tot Z zelf: audit, rebranding, design system, worldbuilding en het klikbare prototype van de volledige game.

Team & samenwerking

Het spelconcept werd parallel aangescherpt door onze learning experience designer en getoetst door onze CTO. Met de externe developer stemde ik af wat bouwbaar was binnen de architectuur, en het scenario en de scripts kwamen van de redactie. Elke ontwerpstap legde ik vast in een projectdossier met leeswijzer, zodat het team altijd bij de actuele versie kon.

Het spelconcept is niet van mij. De wereld eromheen en de manier waarop die het verhaal vertelt, wel.

Aankomst bij de White Paper Clinic om 07:56, het eerste scherm van de simulatie

Het probleem

De Wicked Problem Challenge laat teams oefenen met vraagstukken zonder juist antwoord, waarbij elke keuze iets waardevols kost. Acht rondes, vijf rollen, een AI die doorvraagt in plaats van pampert.

De eerste versie deed functioneel wat hij moest doen. Uit speelsessies, een gebruikerstest en mijn eigen UX-audit kwam steeds hetzelfde beeld terug: het spel beloofde spanning, de schermen voelden als een formulier. Deelnemers wisten niet of ze op opslaan of op doorgaan moesten klikken. Iemand ging kopiëren en plakken om de tekenlimiet te halen. De inhoud was goed, de vorm werkte ertegenin.

Ik kreeg de opdracht het product naar een hoger niveau te tillen. Ik heb ervoor gekozen dat niet als restyling aan te pakken.

Nieuw WPC-logo, lijnkubus met accentkleur

Van stelling naar ontwerp

01

Een merk dat het onderwerp aankan

Het oude systeem was een verzameling losse schermen zonder gedeelde taal. Er kwam een nieuw logo en een donker kleursysteem met één accent, met de tokens in één bron die doorloopt naar CSS, Tailwind, shadcn en Figma. Elke combinatie is doorgerekend op contrast in plaats van op het oog beoordeeld. Die ene accentkleur heeft twee taken: de verstreken werkdag en het onomkeerbare moment. Alle andere signalen dragen zichzelf via materiaal. Zes modi, drie dagfases maal zaal of beamer, schakelen in code om via één attribuut.

02

Drie oppervlaktes, één regel

De wereld spreekt via fotografie, mensen spreken via papier, het systeem spreekt via glas. Hoe zwaarder de beslissing, hoe meer glas. Hoe menselijker het moment, hoe meer papier. Niemand hoeft per scherm te bedenken hoeveel spelwereld erin hoort, je vraagt alleen wie er aan het woord is. Een spelwereld zonder regel eronder is decoratie, en die valt uit elkaar zodra iemand anders er een scherm bij ontwerpt.

03

Het systeem woont in het beeldscherm

Op de bureaufoto staat een oude monitor met een leeg scherm. Daar draait het besturingssysteem van het spel in, met scanlijnen en fosforgloed. Het apparaat is oud, de interface erop is haarscherp. Dat contrast maakt het merk modern zonder dat er één effect voor nodig is. Berichten van de directie komen daarnaast op papier binnen, want een mens met macht is geen systeem.

04

Kiezen kost iets

De dossierlade schuift open zonder de spelklok te pauzeren: wat je opzoekt betaal je in tijd. Bij Stakeholder Poker legt iedere speler hardop een fiche op zijn niet-onderhandelbare belang en registreert het scherm alleen. Dat gesprek belandt niet in de data, en dat is het waard, want het gesprek is de les. Een snelheidsbonus die snel tikken beloont heb ik om diezelfde reden laten liggen.

05

Observatie tijdens proefrun

Tijdens een proefrun van de simulatie zat ik als observator aan tafel en legde vast wat deelnemers deden, waar ze aarzelden en welke emoties er per ronde opkwamen. Niet wat mensen achteraf zeiden, maar wat er tijdens de sessie gebeurde. Die observaties gingen als input rechtstreeks de volgende ontwerpiteratie in.

Belangrijke beslissing

Mijn eigen tijdlijn liet de dag om 17:00 eindigen, met de krantenkop als ontknoping. Netjes, en te braaf. In de uiteindelijke opzet springt de klok na de reorganisatie van 10:05 naar 20:05, verschuift het eindpunt van de werkdagbalk van 17:00 naar 21:00 en verschijnt de badge uitloop. De ontknoping is geen afgeronde werkdag meer maar een avond waarop je nog op kantoor zit.

Dat kost me de symmetrie van een dag van acht tot vijf, en de reflectie valt later op de avond dan gepland. Daar staat tegenover dat het verlies in de interface zit in plaats van in een tekst die het achteraf uitlegt. Wie om 20:36 nog een dossier zit in te dienen, hoeft niet te lezen dat keuzes tijd kosten.

Oplossing

Een nieuw merk en een klikbare flow van 38 schermen die de hele werkdag draagt, van inklokken bij je bureau tot de krant van morgen. Vijftien personages met eigen emotievarianten, een eigen iconenset, en een styleguide met tokens die de developer zonder mij kan lezen. Eronder liggen elf iteraties, elk met een geschreven verantwoording van wat er veranderde en waarom. De reeks hieronder loopt in die orde: eerst het merk, dan de wereld en de dag die daarin verstrijkt.

Het oude WPC design system uit april 2026, licht met limegroene accenten
Kleursysteem uit de nieuwe styleguide, donkere neutralentrap met één oranje accent
Typografiesectie uit de styleguide met vier letters en hun rollen
Het nieuwe WPC-merkteken op merkzwart
Het bureau om 10:30 met WPCos in het beeldscherm van de CRT-monitor
Teamoverleg om 14:02, het scherm gepauzeerd en een gesprekskaart op het bureau
Styleguide-sectie over documenten in de wereld en het dubbelwoord
Het besluitregister drie weken later, week 4 om 19:12

Resultaat

55 → 12

Vrije invoervelden teruggebracht tot een vijfde, en alleen op de plekken waar eigen woorden iets toevoegen

11 iteraties

Van eerste stijlkamer tot volledige klikbare flow, elk met een geschreven verantwoording

0 WCAG-issues

Automatische axe-metingen over alle 38 schermen, niveau A en AA inclusief 2.2

Reflectie

Ik ben in dit project harder geworden op mijn eigen werk. Het geplande einde om 17:00 was van mij en moest weg. De nul invoervelden waren ook van mij, en twaalf bleek beter. Wat daarbij hielp is dat ik elke versie schriftelijk verantwoordde: als je opschrijft waarom iets er staat, zie je zelf het snelst wanneer het er niet meer hoort te staan.

Verder neem ik mee dat een spelwereld dezelfde discipline vraagt als een design system. Sfeer is makkelijk. De krant van morgen, de stempel op het bureau, de telefoon die overgaat: leuke vondsten, allemaal, maar pas bruikbaar toen er een regel onder lag die iemand anders ook kan toepassen.