WPC — Wicked Problem Challenge
Van spellogica naar scherm: interactief design voor een complexe business simulatie.
Mijn rol
Ik leidde dit project en was eindverantwoordelijk voor het ontwerp. Ik zat bij elke multidisciplinaire meeting, bepaalde de designrichting en stuurde een junior designer aan in de uitwerking. Ik ondersteunde haar ook praktisch: ik legde uit hoe Lovable werkt en hoe je een designprototype vertaalt naar een MVP voor de developer. Ik bedacht het logo en de algehele branding, en scherpte het designsystem verder aan.
Team & samenwerking
Een junior designer verzorgde, onder mijn begeleiding, de vertaalslag van documentatie naar flowchart, wireframes en prototype, en bouwde het designsystem op. Met de externe developer stemden we in de meetings af wat de vereisten binnen een Lovable-ontwerp waren, zodat het prototype ook echt bouwbaar was. Daarnaast schakelde ik met de externe projectmanager en Edumundo als designconsultant.
Geleid en begeleid door mij; de uitwerking lag bij een junior designer, het logo en de aanscherping van het designsystem deed ik zelf.
Context
AstraZeneca en Edumundo wilden studenten laten oefenen met wicked problems: ingewikkelde vraagstukken zonder één juist antwoord, waarbij elke keuze ook nadelen heeft. Het spel bestond al, met acht rondes die steeds spannender worden, een mix van individueel werk en teamoverleg, en een AI die je bevraagt in plaats van pampert.
Mijn werk zat in de vertaling naar het scherm: een gelaagd spel intuïtief laten aanvoelen, ook als de inhoud ongemakkelijk is, en duidelijk maken wanneer je alleen of als team aan zet bent terwijl de klok loopt.
Aanpak
Spelanalyse & UX-flows
Analyse van de spellogica en game design documentatie. Per ronde uitgewerkt: wat een speler individueel doet, wanneer de overgang naar teaminteractie plaatsvindt, en hoe AI-output terugkomt als systeemfeedback in plaats van vrij gesprek. User journeys voor zowel speler als facilitator.
Schermstructuur & wireframes
Wireframes voor alle schermen en interacties: individuele inputstap, teamdiscussie, AI-reactie en consequenties. De twee interactielagen (individueel vs. team) visueel duidelijk gescheiden. Tijdsdruk en voortgang zichtbaar verwerkt in de schermopbouw.
Visueel design & prototype in Lovable
Functioneel en visueel uitgewerkt design in Lovable als directe developer handoff. Spelerstatus, rondestructuur en AI-feedback kregen elk een eigen visuele behandeling, zodat spelers altijd weten: waar ben ik, wat doe ik nu, en wat is dit voor feedback?
Flowchart & overdracht
In FigJam uitgewerkte flowchart van de volledige simulatielogica: rondes, iteratiecycli en systeemreacties. Samen met de wireframes en het Lovable-prototype een compleet bouwpakket voor de externe developer.
Belangrijke beslissing
WPC wordt deels op de laptop en deels fysiek in de ruimte gespeeld. Daarom liet ik micro-interacties en visuele cues op de schermen nadrukkelijk naar voren komen: spelers moeten in één oogopslag zien waar ze zijn en wat er van hen gevraagd wordt, zonder te zoeken of uit te vogelen. Onder de tijdsdruk van het spel weegt snelle herkenbaarheid zwaarder dan visuele subtiliteit.
Oplossing
Een volledig uitgewerkt design in Lovable, inclusief visuele stijl, schermopbouw en interacties, als directe overdracht aan de developer. Samen met de flowchart en wireframes zorgde dit voor een helder en compleet bouwpakket.
Resultaat
Van spellogica en documentatie naar developer-klaar design
Plus iteratiecycli uitgewerkt in één samenhangende schermstructuur
Flowchart (FigJam) + wireframes (Figma) + hi-fi prototype (Lovable)
Reflectie
WPC speelt zich deels op de laptop en deels in de ruimte af, dus snelle leesbaarheid was cruciaal: een speler moet een scherm meteen snappen. Daar stuurde ik de junior designer op, en we legden de spellogica eerst vast in een flowchart en wireframes. Daardoor kon de developer zonder gedoe bouwen.