UI Design • Development
Marketopia Adventures
An interactive visual-novel style web app designed to introduce and explore fundamental concepts in game theory. Developed to accompany an introductory talk, it allows viewers to experience game theory principles firsthand through a series of dynamic scenarios and decision-making pathways. The app combines narrative elements with educational gameplay, providing an engaging learning environment that demystifies complex topics.
Why it exists
Game theory concepts can feel abstract. Marketopia, built to accompany an introductory talk, teaches them through a story: Queen Celeste Mailer must save the realm of Marketopia from the Churn Dragon.
What it does
- Story chapters covering game theory basics, the prisoner's dilemma, payoff matrices, Nash equilibrium and Bertrand competition.
- Applies the ideas to customer retention through chapters on churn, referral rewards, personalised incentives, predictive analytics and seasonal events.
- Interactive diagrams, charts and forms for trying out strategies.
- A final simulated battle against the Churn Dragon to test what you've learned.
How it's built
- A Next.js App Router app with one route per chapter, styled with Sass modules and animated with Framer Motion page transitions.
- Reusable components for payoff matrices, charts, tooltips and navigation, and a shared context that switches between shorter and more detailed explanations.
