The rise of generative artificial intelligence and no-code/low-code environments has democratized the creation of digital interfaces, but has also revealed a significant gap in the UI/UX design knowledge of those who build them. Tools such as ChatGPT and vibe coding platforms allow virtually anyone to create digital products without prior technical training, yet they do not ensure that the resulting interfaces are usable, accessible, or aligned with the principles of user-centered design. This Final Degree Project addresses that gap through the design, development, and evaluation of a serious game in the roguelike deck-builder genre, aimed at facilitating the learning of UI/UX design fundamentals.
Following a systematic literature review, six sets of UI/UX design fundamentals were selected to structure the game's educational content. The game system was designed using the MDA and LM-GM frameworks, resulting in a functional prototype developed in Godot Engine featuring 34 cards, deficient interfaces as combat scenarios, narrative events, and a two-layer feedback system combining deterministic evaluation with LLM-based text generation. This system enables players to receive contextualized explanations of their design decisions, fostering reflection and active learning.
A preliminary evaluation with five participants, conducted using an adapted version of the MEEGA+ questionnaire, yielded positive ratings in the dimensions of perceived learning, satisfaction, and perceived value of the game as a learning method. However, the small sample size limits the generalizability of the findings. Future work will focus on expanding the evaluation to larger groups and extending the game's content catalogue to cover additional UI/UX design principles.